How to deploy in development

The development environment builds a server on your local system. It is ideal for making changes and testing your code quickly, without harming the experience of live users of your app.

Before we can start testing, we need to link up your project with a number of third-party services that assist in storing user data and images and sending emails. The service providers that we selected for our project all offer free accounts that can be upgraded to premium accounts as your app's use base starts growing.

ServerApi

Begin installation by cloning the entire project (ApiServer + MobileApp) on your personal console.

Skip Step1, Step 2 and Step 3 if you already have VSCode, node and npm or yarn installed.

Step 1: Install VSCode

Install Visual Studio Code or any code editor of your choice.

Step 2: Install Homebrew

Open terminal and type the following command.

Step 3: Install Node via Homebrew

In the terminal type the following command to install Node:

$ brew install node

or

$ brew install yarn         # this will install node and yarn

Step 4: Download ShareBackend from your purchase .zip file

You should now have a folder with inside containing two project folders: ApiServer and MobileApp.

Before we start up the server we will need to set up each of the dependent services that are used to store user data and images and to send emails

MongoDB Atlas

MongoDB Atlas is a hosted MongoDB service option in the cloud which requires no installation overhead and offers a free tier to get started.

In this section we will be setting up our database. For this, we will install mongoDB which offers a free account that is perfect for testing and making potential changes to the app.

Step 1: Create a free mongoDB account

Step 2: Create a new Project

We decided to name our project Share-development, though you can name your project anything you like. The name will not be used anywhere else. Once you named your Project, press 'Create Project'

Step 3: Build a new Cluster

Make sure to select the 'Free' option.

Step 4: Setup your new Cluster

Complete the rest of the setup. For 'Cloud Provider & Region' try to match your region with the region you selected setting up your Heroku app (either Europe or North-America).

In the 'Cluster Name' section, you can give your cluster a specified name. For this development deploy, we choose to name this cluster Share-development as well.

Now press 'Create Cluster'. (This could take a couple minutes until ready.)

Step 5: Connect the Cluster with your back end

Once your Cluster is ready to use, press 'Connect'...

...Next, select 'Allow Access from Anywhere' in the Whitelist a connection IP address...

...and create a new Database User.

make sure to remember the Username and Password from this step. You will need it later on to connect your back end with the database.

Step 6: Choose a connection method

Press 'Connect your application'...

...and copy the connection string, which we will copy into our back end code in the next step.

Step 6: Modify connection string

Before adding the connection string to Heroku, open up text editor first and paste the copied connection string from the previous step.

mongodb+srv://<username>:<password>@<cluster_name>.whbsh.mongodb.net/<dbname>?retryWrites=true&w=majority

Make sure any of the options params below are URL encoded, or else your connection might fail to establish. For more info on how to do this, follow this link.

Replace <username> and <password> with your 'Database User' username and password from Step 5 and replace <cluster_name> with the name of your Cluster (if you did not change the cluster name during setup, this should be cluster0). Replace <dbname> with share_development (or any other name you'd like to use to name your database).

Make sure to copy the connection string from your own database cluster. Do not copy the one used in the above example, or your database will not be connected properly.

Step 7: Add MongoDB connection string to ServerApi

Next, head over to your ServerApi project and create a new .env file inside the main project folder. Inside this file, add a MONGODB_CONNECTION_STRING variable which is set to your own connection string.

This should look something like this:

MONGODB_CONNECTION_STRING=mongodb+srv://the_rest_of_your_connection_string

Note: when setting .env variables, no spaces and string quotes are required.

• This completes the database development setup!

Cloudinary

Cloudinary stores and manages images, videos and other media and delivers these in an optimised way to your users devices.

Let's begin by creating and setting up our image and video hosting account. For this, we selected Cloudinary for their easy integration and free (though limited) test account.

Step 1: Create a free Cloudinary account

Step 2: Add account variables to ServerApi

Next, head head over to your ServerApi project and open .env. Here, set your CLOUDINARY_CLOUD_NAME ,CLOUDINARY_API_KEY, and CLOUDINARY_API_SECRET variables with your own taken from your Cloudinary Dashboard. (See image below.)

• This completes the Cloudinary setup!

Sendgrid

Sendgrid is the email service provider through which we will send all email notifications to our users.

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

Our back end will send email notifications for certain action, like account signup completion and account recovery. Therefore, we will need to setup an Email service provider Sendgrid and connect it to our server.

Step 1: Create a new free account

What's important here is to make sure to remember your username and password. You are going to need it in the next step.

Don't forget to confirm your account.

Step 2 (Optional): Add Sender Authentication

To increase the chances that your app's emails actually arrive at your users's email inbox, it is important that you work on your reputation as an email sender. To do so, start with your 'Sender Authentication' process...

...and follow the instructions provided in each step.

Note that this step is optional. You might find that your email already get send without implementing this step.

Step 3: Update your email content

The app's current setup contains one email notification, send out when a user requests an account recovery code.

These emails can be personalised with:

• Your company and app identity info

• Your email content

To change your company and app identity, head over to constants.js and update the following object with your information:

exports.COMPANY_INFO = { app_name: '', company_name: '', app_emailaddress: '', address: '', };

to change the email content, head over to /emails/recoveryCodeEmail.js and change the html value inside the mailOptions object.

Note: Beware that any changes done to the email styles could potentially break your email layout.

Your email content is now set up correctly.

Step 4: Create and store auth API-key

Sendgrid uses unique api-keys for authentication for your app to its service.

Go over to your Sendgrid Settings tab and press API keys. Here, go ahead and create a new API key for your app:

Next, head head over to your ServerApi project and open .env. Here, set the SENDGRID_APIKEY var with your API key value.

Note: Your API-key will only be shown to you once, so make sure to immediately store your key upon creation.

• This completes the Sendgrid email service setup!

JWT key

Data protection is an important feature for your application. That is why user login and all consecutive api calls afterwards are made on the basis of encrypted requests. To make sure that data encryption is unique for your particular application, a secret key must be created and stored.

Step1: Setting a development key

Head over to your ServerApi project and open .env. Here, set the JWT_KEY with a unique string. You may want to use a third-party key generator to generate your unique key string.

Note: It is important to realise that that secret encryption key should not be changed in the future. Key changes may result in unwanted side effects, such as users may not be able to access their data any longer.

And that's it. Your user login tokens and api calls are now securely encrypted.

Push Notifications

When testing your app in Expo Client, push notification should work out-of-the-box.

Note: Do keep in mind that push notifications cannot be received on iOS Simulator or Android Emulator. But they will work fine when running your app with a real device in development mode.

Note: When testing your app in Expo Client, you will not be able to see your personal app icon inside the notification display. To have your personal app icon displayed, you must publish a production version of your app first. (See 'How to deploy in production'.)

Final step

You have two options to run and test your server api:

• One is to install and run it from a localhost on your local machine. For this, you don't need to set up a server first and deploy your backend code to the server.

• The other is to setup a heroku server, the steps for which are provided in 'How to deploy in production', and to install and deploy your ServerApi project to the heroku server.

What is important to understand is that in order to test the app on your own device, deployment on a remote server will be required. On the other hand, testing with iOS simulator and / or Android emulator will work perfectly fine running your ServerApi from a localhost.

In the next two steps I will outline how to run the ServerApi project from your local machine. You may skip these steps if you want to run your project directly from a heroku server.

Step 1: Install and run

You are now ready to install and run your server api project. Simply run the following commands:

$ cd ApiServer

$ yarn install

$ yarn run:dev

Your server api should now be running with the following message:

Server is running at: 4000 Database Connected

• This completes backend setup! Your backend is now ready for use.

Next step is to install the MobileApp.