> For the complete documentation index, see [llms.txt](https://knowlephant.gitbook.io/react-native-share-backend-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowlephant.gitbook.io/react-native-share-backend-app/installation-serverapi-1/how-to-deploy-in-production.md).

# How to deploy in production

{% hint style="warning" %}
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.&#x20;
{% endhint %}

### **Render.com**

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

**Step 1: Create a free  account**

<figure><img src="/files/HOiJAd3JyFDiHgpX27eK" alt=""><figcaption></figcaption></figure>

**Step 2: Add a new app**

Make sure to select the *Web Service* option

<figure><img src="/files/kwi43ZnszHdSKMgXgd1U" alt=""><figcaption></figcaption></figure>

### **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](https://signup.heroku.com/). 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**

![](/files/-MDoSY8UnVqhcBNqHWvd)

**Step 2: Create a new app**

Press the 'New' button...

![](/files/-MDoT7cIqoJIBHZqD6RR)

...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.

![](/files/-MDoVFKSTRkCBoeb8Ajr)

### 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.&#x20;

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.

{% hint style="warning" %}
**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!
{% endhint %}

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.&#x20;

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.

![](/files/-MDouBvyt_JYrpFRV8AS)

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:

![](/files/-MiaI45rp8os8EUo6Bdt)

{% hint style="warning" %}
**NOTE:**&#x20;

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.
{% endhint %}

**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'.

![](/files/-MiaLEA2USx9ubldlhpr)

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':

![](/files/-MiaM9Si-n4kU7adkgXu)

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:

![If you see this file you'll know your setup is correct](/files/-MiaMueah3CkD3x10YCl)

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.&#x20;

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.

{% hint style="warning" %}
**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:**

* [Git installation](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
* [First-time Git setup](https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup)
  {% endhint %}

The following steps assume you use MacOS. For Windows systems, installation is handled by downloading and running the installer from [this link.](https://devcenter.heroku.com/articles/heroku-cli)

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*.

&#x20;***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.
