> 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/how-to-deploy-in-production.md).

# How to deploy in production

### MobileApp

In order to for your app to run correctly in production, you must also already have followed all the steps for 'Installation ServerApi - How to deploy in production'.

**Step 1: Install packages**

If you have already installed your project, you can safely skip this step.

Before we begin, I'm going to assume you have cloned and installed MobileApp on your local machine. If this is not the case, go back to 'How to deploy in development' **Step 3**.

Otherwise, open your command-line tool, go to the *MobileApp* project folder and enter the install command to install all project dependencies:

```
$ cd MobileApp

$ yarn install
```

**Step 2: Update App.json**

Here you'll update a couple values for your app.

* `name` -> add your app name
* `slug` -> add your own slug
* `version` -> set your first publication version (1.0.0)
* `description` -> add your own description
* `icon` -> you can add your own app icon (displayed on your phone's screen), but make sure to set the correct icon name and location.
* `splash.image` -> you can set your own splash, but make sure to set the correct image name and location.
* `ios.infoPlist` -> wherever you see 'Social Networking Backend App' replace with your own app name.&#x20;
* `ios.bundleIdentifier` -> create a unique identifier (usually starting with com.\<your-company-name>.\<your-app-name> You'll be using this same identifier when setting up your App Store account. (See: 'How to deploy to Apple app store'.).
* `buildNumber` -> set to 1.
* `android.versionCode` -> set to 1.
* `android.package` -> create a unique identifier (usually starting with com.\<your-company-name>.\<your-app-name> You'll be using this same identifier when setting up your Play Store account. (See: 'How to deploy to Android Play store'.).

**Step 3: Prepare push notifications for production.**

For this you'll be adding a Google Services json file to your project. This takes a couple of extra steps:

1. If you have not already created a Firebase project for your app, do so now by clicking on **Add project** in the [Firebase Console](https://console.firebase.google.com/).
2. In your new project console, click **Add Firebase to your Android app** and follow the setup steps. **Make sure that the Android package name you enter is the same as the value of** `android.package` **in your app.json.** (See above step for package name.)
3. Download the `google-services.json` file and place it in your MobileApp main project directory.

{% hint style="warning" %}
**Note:** Firebase will create an API key in the Google Cloud Platform console with a name like `Android key (auto created by Firebase)`. **This is not always the same key as the one found in `google-services.json`. Always confirm your key and associated restrictions in the Google Cloud Platform console.** (See screenshot below.)
{% endhint %}

To double check your Android key values, head over to your Google Cloud console, search for 'Api and services', and open the 'Credentials' tab. Under 'API Keys' there should now be a key visible, the value for which should be identical to that in the `client.api_key.current_key` field in your 'google-services.json' file.

![Never mind the blacked out values. The Android key should be the same as found in your google-services.json file.](/files/-MiaYNYgpkN7sB_zfDX9)

5\. Finally, in order for Expo to send notifications from our servers using your credentials, you'll need to upload your secret server key. You can find this key in the Firebase Console for your project:

1. At the top of the sidebar, click the **gear icon** to the right of **Project Overview** to go to your project settings. (See screenshot below.)
2. Click on the **Cloud Messaging** tab in the Settings pane.
3. Copy the token listed next to **Server key**.
4. Run `expo push:android:upload --api-key <your-token-here>`, replacing `<your-token-here>` with the string you just copied. Expo stores your token securely on their servers, where it will only be accessed when you send a push notification.

![Copy this Server Key value and upload to Expo servers.](/files/-Miaa1HTdIjUeTeEbumQ)

**Step 4: Turn off development mode**&#x20;

This step will make sure that your app connects to your remote heroku server. To do so, open the MobileApp project inside your code editor and open the `/src/config/constants.js` file.&#x20;

Here, first make sure to correctly set your Heroku server url:

```
// APISERVER URLS
const PRODUCTION_API_HOST = 'https://react-native-share.herokuapp.com';
```

{% hint style="warning" %}
**Note:** do make sure to replace the string with your own Heroku url, created in the 'Installation ServerApi: How to deploy in production' section.
{% endhint %}

Next, look for the *development* variable  and make sure it is set to:

```
const development = false;
```

**Step 5: Run your application**

Make sure you are still inside the MobileApp folder in your command-line tool. Then, enter the start command:

```
$ yarn start
```

Grab your phone and scan the QR code on the screen that now has opened up inside your browser.

![](/files/-MESQnOAQ0gFDK3DGO-J)

To run the app, simply scan the QR code with the Expo app (Android) or the Camera app (iOS).
