How to quickly deploy React and Node app on AWS

So you have a setup running on your local box with node server and a webpack server and want to deploy this code on a brand new aws ubuntu box. The expectation is when you visit your public ip address, your home route should work and your react landing page should be served. For this to happen, we need to do these things.

• Enable your node code to serve react code.
• Get your code from github/gitlab etc on this new box.
• Map port 80 to the port your node server is running.

Enable your node code to serve react code: Before we hand over react code to node, lets create a production build for our react code. If you are using create-react-app, running npm run build will do the trick. Now copy the build folder in the public folder of your node app and commit these changes.

Second part is to enable the node app to serve static content. If you are using hapi, you can follow this, which is few lines of code to serve the static content.

You can test this by running this on your localbox and going to the port on which your node server is running (for eg: http://localhost:3000)

Get your code from github/gitlab etc on this new box:

• Install git apt-get install git
• Install nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

• Install node nvm install 7.2.0 // change it to the version you want
• Install database. I am using postgres .

 apt-get install postgresql postgresql-contrib

To connect to the database, make sure your configuration files have the right username and password. You might also have to create the database manually on which you want to connect your app.

• Now we would clone your code. You can use https to clone but it is painful to do it every time. Lets generate public/private keys which you can enter into our repo settings so that we can clone easily without the password.
• Create keys:

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

Now copy the contents of your public key cat ~/.ssh/id_rsa.pubinto your github/gitlab repo.

Now in your aws box, run git clone git@<your repo>and this will clone the repo in your box. Run npm install and npm startor whatever command you have in your package.json and we have our app up and running.

Map port 80 to the port your node server is running: If we would type your aws machine ip address into the box, nothing would work as your app is running on port 3000 and not on port 80. To enable this, we can run this command

sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-ports 3000

What this command is doing is appending (flag -A ) the iptables PREROUTING chain and saying that any tcpprotocol with a destination port (flag — dport) of 80 should be redirected to port 3000.

P.S: Every time a server re-start, this setting go away as they are stored in memory. You can persist these rules as well. Look here for a tutorial.

P.P.S: We could have used nginx to run on port 80 and map to our server port. It would have been a little more involved though.

Once done, you are good to go!!

PS: If you are looking to automate all these steps, I have written a new blog post: How to deploy React and Node app on AWS: A better approach