Setting up React Redux application for production and hosting in AWS EC2

Gobinda Thakur

[Update:- 07-Feb-2019]: Now my website is hosted on Netlify. Mailing functionality is not working currently. I am trying to fix it.

[Update:- 14-Sep-2019]: My profile is migrated to GatsBy and hosted it in Netlify. You will find second part of this blog in my new website.

Now a days react with redux is gaining it’s popularity. It is now good time to learn both react and redux. You will find a very few articles or blogs that can help you to host your react redux application in AWS EC2. As a full stack developer, it is our responsibility to design, develop, test and deploy our application in server. I am going to share my experience on deployment of gobindathakur.com in AWS EC2.

What I have used?

  1. React — v15.6.1
  2. Redux — v3.7.2
  3. Material-UI — v0.18.7
  4. NodeJS — v8.9.0
  5. Express — v4.16.2
  6. nginx — v1.13.6
  7. pm2 — v2.7.2
  8. Letsencrypt

Let’s start

Step 1: Build your react application for production

The main file of your React + Redux application is bundle.js. When I built it for development, size was 4.79 MB.

Just imagine, if I will use this bundle in production then my application will load slowly when I hit my server for the first time. Browser will take time to download this bundle. To decrease the first loading time we have to decrease the size of the bundle.

  1. Add the following webpack plugins to webpack config file
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.DedupePlugin(), //dedupe similar code
new webpack.optimize.UglifyJsPlugin(), //minify everything
new webpack.optimize.AggressiveMergingPlugin()//Merge chunks
],

It decreased the bundle size from 4.79 MB to 1.2 MB.

2. Use gzip file in production

Install compression webpack plugin.

npm install compression-webpack-plugin --save-dev

Add following code to your webpack config file.

var CompressionPlugin = require('compression-webpack-plugin');plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new CompressionPlugin({ // this is the new code you have to add
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
})

As I am using express js, I have to use a middleware that would return .js.gz file to server. But the application will use .js file.

app.get('*.js', function (req, res, next) {
req.url = req.url + '.gz';
res.set('Content-Encoding', 'gzip');
next();
});

It helps me to reduce the bundle file size to 308 kB.

NODE_ENV=production webpack --progress --colors

Still there is a scope to decrease the bundle size.

Step 2: Create your EC2 instance

I am assuming that you have created your account in AWS. For creating an account in AWS you need to have a credit/debit card.

Open your AWS Console and select EC2.

Below Compute you can see EC2

On the sidenav you can see the option “Instances”. We are going to create our EC2 instance by clicking this option. Then click the “Launch Instance” button. Now it will give us options to choose instance.

Now we are going to choose instance by following below steps:

  1. Select free tier server (Ubuntu 16.04 LTS)
Select Ubuntu 16.04 LTS

2. Name the instance (It is optional)

3. Configure security group for SSH, HTTP and HTTPS

Note*: To configure security group properly, please go through AWS documentation.

4. Now create and download a new key pair (We need this to login to the server)

Congratulations! We have created an EC2 instance. Now server will be setting itself up.

Now we can see the EC2 instance up and running.

You can see the “Public DNS(IPv4)”, we will need it to SSH into our server. As I am using Ubuntu machine, I can use my terminal to do SSH. If you are using window machine then you need a SSH client.

Step 3: Connect and update

Now open your terminal and navigate to key pair file location. Then set the permission to that file.

chmod 400 ./YOUR_KEY_PAIR_NAME.pem

Make sure that you have proper permission to ~/.ssh.

chmod 700 ~/.ssh && chmod 600 ~/.ssh

Now we are going to connect to the server by using that public DNS IPv4.

ssh -i "YOUR_KEY_PAIR_NAME.pem" ubuntu@YOUR_IPv4_LINK

After connecting to the linux box we have to update the server.

sudo apt-get update && sudo apt-get upgrade -y

Step 4: Installations

You will find the second part here.

Gobinda Thakur

Written by

Fullstack web developer, www.gobindathakur.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade