React-SASS-PM2-EC2-Production-App mapped with a custom domain and secured with SSL layer.

In this tutorial, we will be creating a sample react app using create-react-app, configure SASS in it and upload it in GitHub and deploy the application in EC2, configure our DNS, Nginx and finally we will map our custom domain and add SSL layer to it.

Create React App

Now you will be automatically redirected to http://localhost:3000/ where you will see your react app built in seconds.

Configure SASS

Create a folder called styles in thesrc folder and inside of it, create a file called style.sass.

SASS files should be intended properly to convert it to CSS. Only perfectly intended SASS files can be converted. So I will install a package called SassBeautify which will beautify our SASS file using a special command.

If you are using Sublime Text Editor, give a High-Five. I will guide you step by step to install and configure it.

Others — Kindly bear with me. These are just optional and you may even intend your code manually. However, I recommend you to configure the same package in your editor to make your code perfect.

Open your sublime and press Cmd+Shift+P and type Install Package and press enter to open install packages menu. Now type SassBeautify and press enter to install the package.

This plugin uses sass-convert, and so you need to have sass installed. Read the sass download page to view the installation options.

Now, paste the following code in your style.sass file and press alt+w to intend and save the file automatically.

$font-stack: Helvetica, sans-serif$primary-color: #333

bodyfont: 100% $font-stackcolor: $primary-color

You can see the file intended and saved.

If you see the following error while intending,

There was an error beautifying your Sass:/System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/lib/ruby/2.3.0/universal-darwin17/rbconfig.rb:214:

which means that there are some lines intended using the tab key. Let’s us convert it into spaces by selecting all the content in our sass file using Cmd+A option, click the Spaces (available at the right bottom corner in Sublime) and select Convert Indentation to Spaces.

If you don’t have pbcopy, you can use any of your editors to open this file and copy its whole content. I use sublime and if you want to open the above file in a sublime editor, issue the following command.

Go to your GitHub account settings and add the SSH key as you did above.

PM2 configuration

Let us configure PM2 in our local repository which will actually do our deployment works.

Basically, PM2 is specifically designed for Node.js and not for client applications. But here, we are going to automate our deployment with the help of PM2 so that, we are using it to pull our code from GitHub and run in our remote server (EC2 instance).

Note: The app is not going to run in the PM2 process.

If you are aware of Amazon EC2 instance and know how to configure and work on it, you don’t need to do anything.

However, if you aren’t aware of it, you can go through the below link and set up your remote instance ready which is required to host your Node.js server.

Note: You need a server(EC2 instance) to deploy your production ready React application.

Issue the following command to install PM2 in your root directory.

$ sudo npm i pm2 --save-dev

In your root directory, create a file called ecosystem.config.js and add the below content to it.

Here, In apps we are giving our application name, port and node environments. In deploy section, we are naming the configuration as production and giving user, host, key, ref, repo, path and post-deploy commands.

Right click on your security group for your instance and click Edit inbound rules.

Click Add Rule. Add the following configurations as you see in the below image and click Save.

Security group config rule.

Note: Add your port as 3000 here, in which the React app is running and add port 443 for SSL access.

DNS configuration

Required: It would be more awesome to run our react app in the custom domain (eg: https://tamilakam.in). So, you can get one @ GoDaddy or through any other domain registrar and a domain name is mandatory to complete the remaining steps.

From now on, I am going to use my site tamilakam.in for reference below for your understanding. Kindly replace tamilakam.in with your domain name.

The first record is to load the page when the user types just domain name.com. Eg. tamilakam.in. (Required).

The second record is to load the Node.js API server. You can refer this link and this link where I have worked on hosting my Node.js application and load it using subdomain called api.tamilakam.in. (Optional).

The third record is to load the page when the user types www.tamilakam.in. (Required).

We have configured our DNS successfully. Wait for 5 minutes for changes to be reflected as you have given TTL value as 600 seconds.

Nginx configuration

Let’s connect to our remote instance first using the below command from a terminal. (Replace your EC2 URL in required place)

Ubuntu comes with its own package manager, apt-get. Using apt-get, we can install nginx in one command.

$ sudo apt-get install nginx

apt-get runs nginx automatically after install so you should now have it running on port 80, check by entering your public DNS URL into a browser.

Nginx welcome page.

If this doesn’t work, you might need to start it manually.

$ sudo /etc/init.d/nginx start

Now let’s configure our Nginx to run our Node.js server.

How are nginx configs set up? Configs are stored in plain text files in sites-available with any name. Linking them into the sites-enabled folder will cause them to be read and used when nginx starts. All of the configs are combined together by nginx.

You can take a look at this config using cat.

$ cat /etc/nginx/sites-available/default

Let’s first remove the default config from sites-enabled, we will leave it in sites-available for reference.

$ sudo rm /etc/nginx/sites-enabled/default

Let’s create a config file in sites-available with the domain name.

$ sudo nano /etc/nginx/sites-available/tamilakam.in

And add the following contents to it, press Ctrl+x, type yes and hit enter to save it.

In the above code block, we are listening to the default port which is 80 and provided our server name in both the formats. We have also provided location, which will be served when the server name is hit with the root and default index file option.

As you can see the root option, we have given it as /var/www/tamilakam.in. This location acts as a source for our application. So let’s add our React app minified (production) version code in that location.

Navigate to that location and create a file called tamilakam.in.

$ cd /var/www$ sudo nano tamilakam.in

Now let’s go back to our post-deploy command in our PM2 configuration file. There you have given a command as follows.

Let me tell you what it does. After downloading your code from GitHub, it will do npm install first, and then run npm run build for production optimised build and finally copy this optimised build to the location we have created just now to the location /var/www/tamilakam.in.

Restart nginx for the new config to take effect.

$ sudo service nginx restart

You are done. Let’s run few commands from our local terminal so that we will deploy our React app to production in seconds.

To check whether the configurations provided by you are correct, issue the following command.

$ sudo nginx -t

If you face any error, you need to work on your server blocks (which you have created in the sites-available folder. Let me know in the comments so that we can try to solve it.

Deploy your application

From your application root directory in your local machine, issue the below command to set up our application in the remote server.

$ sudo pm2 deploy ecosystem.config.js production setup

This will configure our application in the EC2 instance.

Finally, issue the below command to host and run your application using PM2 on your remote server.

$ sudo pm2 deploy ecosystem.config.js production

Hurray!!! Your React application is now in your production server and ready to use.

If this is your first time running certbot, you will be prompted to enter an email address and agree to the terms of service. After doing so, certbot will communicate with the Let's Encrypt server, then run a challenge to verify that you control the domain you're requesting a certificate for.

If that’s successful, certbot will ask how you'd like to configure your HTTPS settings.

Output

Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.-------------------------------------------------------------------------------1: No redirect - Make no further changes to the webserver configuration.2: Redirect - Make all requests redirect to secure HTTPS access. Choose this fornew sites, or if you're confident your site works on HTTPS. You can undo thischange by editing your web server's configuration.-------------------------------------------------------------------------------Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

Select choice 2 (default — to redirect all your request to secure HTTPS access) then hit ENTER. The configuration will be updated, and Nginx will reload to pick up the new settings. certbot will wrap up with a message telling you the process was successful and where your certificates are stored:

Output

IMPORTANT NOTES:- Congratulations! Your certificate and chain have been saved at/etc/letsencrypt/live/example.com/fullchain.pem. Your cert willexpire on 2017-10-23. To obtain a new or tweaked version of thiscertificate in the future, simply run certbot again with the"certonly" option. To non-interactively renew *all* of yourcertificates, run "certbot renew"- Your account credentials have been saved in your Certbotconfiguration directory at /etc/letsencrypt. You should make asecure backup of this folder now. This configuration directory willalso contain certificates and private keys obtained by Certbot somaking regular backups of this folder is ideal.- If you like Certbot, please consider supporting our work by:

Now, try reloading your website using https:// and notice your browser's security indicator. It should indicate that the site is properly secured, usually with a green lock icon. If you test your server using the SSL Labs Server Test, it will get an A grade.

Let's finish by testing the renewal process.

To test the renewal process, you can do a dry run with certbot:

$ sudo certbot renew — dry-run

If you see no errors, you’re all set. When necessary, Certbot will renew your certificates and reload Nginx to pick up the changes. If the automated renewal process ever fails, Let’s Encrypt will send a message to the email you specified, warning you when your certificate is about to expire.

If you have further questions about using Certbot, their documentation is a good place to start.

We have secured our React application.

If you have any doubts above the above steps, feel free to put it up in the comments section and I will try to respond as soon as possible.

Since it’s quite big, you may face any prob in setting up your project. Kindly check my other tutorials so that you may find any solution to your prob in any of those.