Home » Nodejs » How to deploy ReactJS + NodeJS Express application onto AWS?

How to deploy ReactJS + NodeJS Express application onto AWS?

Posted by: admin November 29, 2017 Leave a comment

Questions:

I have a ReactJS + NodeJS/ExpressJS + Webpack/Babel application, and would like to deploy it onto AWS.

My question is, would I have to deploy ReactJS and NodeJS/ExpressJS separately? Or could it they be deployed together at once?

Also, any good guides specific to my stack mentioned? Looked around but all seemed to be specific to one particular, whether it be just NodeJS or ReactJS. Closest found it https://www.youtube.com/watch?v=WxhFq64FQzA, but I believe it only covers NodeJS/ExpressJS and not ReactJS.

Currently the application is under one project, including all of ReactJS + NodeJS/ExpressJS + Webpack/Babel.

Answers:

1. If you have two distinct projects

e.g. a React single-page app and a Node/Express API.

a. You can deploy

Otherwise, you can deploy both parts together at once on Elastic Beanstalk or EC2. In doing so, you miss out on the benefits of hosting on S3 and CloudFront, i.e. faster delivery for your users and cheaper costs. In my opinion, it’s also more convenient and less prone to unexpected errors to update and deploy separately the client-side and the server-side of a web application.

b. Why S3 + CloudFront instead of S3 alone?

  • all the benefits of using a CDN
  • your own domain name and a free SSL certificate in 1-click
  • redirection on 4xx errors (necessary if your app uses a HTML5 History-based router)
  • the caching system
  • http2 and http to https redirection

c. How to handle CORS?

You can use different subdomains, e.g.

  • api.domain.com for the API
  • app.domain.com for the app

Then enable CORS in the API:

app.get('/api', cors({ origin: 'https://app.domain.com' }), ...)

2. If you have a single project

e.g. a Node app including some React views.

You have to deploy the whole app on Elastic Beanstalk or EC2.

Note: If you have a single project including two sub-projects (i.e. a folder for the React app and another one for the Node API), and if both sub-projects still work when they are separated, then you can deploy the sub-projects separately (see first part of the answer).

3. In both cases

Run your Webpack/Babel production build before deploying the React part. You can do it manually (before deploying on AWS) or automatically (in your CI/CD system).

4. If not restricted to AWS

I just answered a related question not restricted to AWS.

Questions:
Answers:

Basic Concepts

To deploy your app hassle free, you need to learn about three concepts: Microservices, containers, and process managers. I will discuss them with a bit more details and few links to get you started:

Microservices

Microservices is an architecture that allows you to divide your app into smaller services. This has multiple benefits:
1- The services are easily testable.
2- The services are replaceable.
3- The services can scale separately.

Monolith vs Microservices design

Containerization

Almost every useful app has at least dozens of dependencies. You can install dependencies on the target machines, but most certainly you’ll face few challenges. Programs like Docker allow you to create a container for your app and deploy that container on the cloud. (Regardless of the cloud provider) Learn more…

Process Managers

Process managers ensure that your app is running smoothly and all parts are healthy. If your app crashes, it can easily restart the app.

Deploying a serverless NodeJS / React Application

Note: This approach does not work if you are doing server-rendering with ReactJS. Go to the next option.

You can simply build your app and deploy it to a static S3 website. This option, works if you use microservices architecture to separate your API from your react app.

Creating a static website in S3 is really simple:

  1. Create a bucket in S3 with the exact name of the website. Example: blog.stackoverflow.com.
  2. Enable static hosting
  3. Create an A record in Route 53 and connect it to the bucket you created.

For more information check AWS handy documentation.

Deploying a NodeJS application into EC2

You can launch different EC2 instances for every microservice. (API, React app, etc.) You need to use a process manager such as PM2 to ensure your app is running smoothly.

Bonus: Use Sentry for error-handling

Ideally, you should have unit tests to prevent shipping buggy code to the production. But the world is imperfect, and it is good to receive any potential bugs that happen on the client. Enter Sentry