How to deploy in production

Deployment in production is how your app's users will experience your application after download from the stores. Follow the steps below in order to deploy your Mobile App in production mode.

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.

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

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.

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

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.

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.

Step 4: Turn off development mode

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.

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

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

Note: do make sure to replace the string with your own Heroku url, created in the 'Installation ServerApi: How to deploy in production' section.

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.

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