How to deploy in development

Deployment in development is great for testing and tweaking your app. Below I will guide you through the steps you need to take in order to deploy your Mobile App in development mode.

MobileApp

Step 1: Get the Expo command line tool

The expo command line tool help you publish your project, but also provides all the necessary tools to test and debug your application on iOS and android simulators / emulators as well as on your hand-held device.

Open your command-line tool and enter the following command:

npm install expo-cli --global

Step 2: Install packages

For this step I will assume you have already cloned/downloaded the project to your local machine. If this is not the case, go back to 'How to deploy in development' Step 3.

Clone/download the repo into your local disk. You can name it whichever name you like. Then, go over to the MobileApp project folder and enter the install command to install the project dependencies:

$ cd MobileApp

$ yarn install

Step 3: Add your own global constants

The app contains a number of global configs that control the overall app experience. These configs can be accessed from the project's /src/config/constants.js file.

While most configs have been already set up correctly for the demo project experience, there are a few constants that need to be modified for your setup. These are your app and company information:

// APP & COMPANY INFO
// THESE ARE APPLIED IN THE 'SIGNUP_STEP_3' SCREEN
export const APP_NAME = 'React Native Share Backend App';
export const COMPANY_NAME = 'Knowlephant';
export const CONTACT_EMAIL = '[e-mail]';

...and your API server location url:

// APISERVER URLS
// THESE CONNECT THE CLIENT SIDE WITH THE API SERVER
const DEVELOPMENT_API_HOST = 'http://localhost:4000';

Note: do make sure to set the port number to your actual local machine port number which get logged in the terminal when starting up your ApiServer project.

Step 4: Enable on development mode

This step will make sure that you test the app by connecting to the server that should be running on your local machine (See: 'How to deploy in development').

If you like to connect the app directly to the remote server setup on your Heroku server, then you can skip this step (but make sure that the development variable mentioned below is set to false).

To connect to your local machine setup, open the MobileApp project inside your code editor and open the /src/config/constants.js file. Look for the development variable somewhere at the start of the file, and make sure it is set to:

const development = true;

Step 5: Add Firebase Cloud Messaging (for Android)

Created a Firebase project for your app, do so by clicking on Add project in the Firebase Console.

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.

Now, download the google-services.json file and place it in your MobileApp root directory.

In your app.json, make sure an android.googleServicesFile field exists with the relative path to the google-services.json file you just downloaded. The reference should already be there but it's good to double-check:

{
  ...
  "android": {
    "googleServicesFile": "./google-services.json",
    ...
  }
}

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 if you don't receive any push notifications!

Step 6: Run the application

All that's left is to start expo-cli and open up and test the application on your iOS simulator:

$ yarn run ios

...or on your Android emulator:

$ yarn run android

Test on iOS Simulator or Android emulator

To be able to test your app on the iOS simulator, then follow the instructions on how to set up iOS simulator laid out in this link.

To test on Android emulator, follow the instructions on how to set up Android emulator laid out in this link.

And that's it. The app is now ready for testing!