How to deploy in production

The production environment sets up your application for deployment to app stores.

Note: We have switched our Free hosting provider to Render.com as Heroku no longer offers free dynos. The documentation lets you choose between Heroku or Render.com for your server hosting provider.

Render.com

Render.com is used to deploy our demo app for free.

Step 1: Create a free account

Step 2: Add a new app

Make sure to select the Web Service option

Heroku

Heroku is used to deploy, manage and scale our application as the number of people using your app are starting to grow.

We start our installation with the setup of our hosting service, for which we use the Heroku platform. Heroku allows for setting up a free account that is ideal for testing the application with minimal downsides. Once your user base begins to grow, you might want to consider scaling up to a paid membership to ensure high delivery speed and speedy customer service.

Step 1: Create a Heroku account

Step 2: Create a new app

Press the 'New' button...

...and fill out the form. The 'App name' and region can be anything you like. We will use the 'App name' string later to complete our setup.

MongoDB

Step 1: Set up a production project

It is possible (and probably advisable) to use different databases for your development and production environments. If you choose to do so, repeat the MongoDB steps laid out in the 'How to deploy in development' section.

Use your existing account, and start by creating a new project. Make sure to name your new Project, Cluster and database name in a way that's relevant to your production setup.

NOTE: Do no forget to update your connection strings when switching between development and production environments. This is especially important once you decide to deploy a new version of your ApiServer to your Heroku dynamo!

Your database is now ready for use!

Cloudinary

Your Cloudinary setup is complete.

Heroku config variables & buildpack

UPDATED: due to changes on the Sendgrid platform authentication with username and password has now been replaced with authentication with API key.

Step 1: Provide access to your third-party services's secret strings, keys and passwords

The ServerApi needs some manner of access to each of our third-party services's secret keys and strings.

In development we set this up using a .env file. However, for safety reasons, this file is omitted from our commits when pushing our project code to either a repository or to Heroku (next step). So we need to figure out another setup.

Luckily, Heroku offers a solution: Config Vars

To set up the Heroku Config Vars, go to your Heroku dashboard, select your app and press the 'Settings' tab. Here, look for the 'Config Vars' section and press the 'Reveal Config Vars' button.

All you need to do here is copy over the keys previously used in your .env file (see: How to deploy in development) and link the key to its relevant values:

NOTE:

Note the addition of a new variable: GOOGLE_CREDENTIALS. The value for this variable is the entire contents of the Service Account JSON File that you downloaded and saved in a 'setup' folder in the previous development setup. Simply copy/paste the content into this new variable.

Step 2: Add a Buildpack to your Heroku Settings

For Heroku to be able to create a file containing your Google Authentication Credentials (Similar as the file used in the development setup), we're going to add a Buildpack that will create that file for us.

To add a new Buildpack, in the 'Settings' tab, simply scroll down to 'Buildpacks' and press 'Add Buildpack'.

Next, add the following 'Buildpack URL' and save your changes:

https://github.com/gerywahyunugraha/heroku-google-application-credentials-buildpack

Let's double check that your JSON file got created successfully. To do so, scroll up and press the 'More' button and select 'Run Console':

Next, type bash in the input field and press 'Run'.

The console opens up in which you type ls and press enter. The contents of your main ApiServer project folder appear, and in it you should now be seeing the file:

And that's it. Your server is now connected to your MongoDB database, Google Cloud and Sendgrid services.

ServerApi

Step 1: Install your project

In case you have skipped the final step in 'How to deploy in development', you still want to install your project before deployment to Heroku server in order to successfully deploy your server project.

For this, open your command-line tool and make sure you are inside the ApiServer project folder. Then, type the install command:

$ cd ApiServer

$ yarn install

Step 2: Install Heroku CLI

In the next series of steps, you will prepare to deploy your ServerApi project to your Heroku server app.

Before being able to push code to Heroku, it is necessary to install the Heroku-cli on your system.

Heroku CLI requires that Git is installed on your system. If you have never used Git before, follow instruction and usage steps using these links:

The following steps assume you use MacOS. For Windows systems, installation is handled by downloading and running the installer from this link.

To install Heroku CLI, run the following command in Terminal:

$ brew tap heroku/brew && brew install heroku

You can verify your installation with the following command:

$ heroku --version

After completing installation, login to Heroku with the following command and entering your Heroku authentication details:

$ heroku login

Next, set Heroku as a remote to your repository. To do so, first go to the top level folder of your project. This should be the folder that holds the two project folders ApiServer and MobileApp.

Note that in order to go one folder level up simply use the cd .. command in your command-line tool.

Inside your top level folder, go ahead and set heroku as a new remote using the following command:

$ cd ..

$ heroku git:remote -a [your-heroku-app-name]

Step 4: Deploy

Make sure you are inside the top level project folder. Then enter the following commands...

$ git init

$ git add .

$ git commit -m "preparing to deploy"

$ git subtree push --prefix ApiServer heroku master

That's it. Your production setup is now complete. The next step is to install the MobileApp.

Last updated