How to deploy a React + NodeJS Express application to AWS? - javascript

I have a React + Webpack/Babel + Node/Express application and I want to deploy it on AWS.
Would I have to deploy React and Node/Express separately? Or could they be deployed together at once?

1. If you have two distinct projects
e.g. a React single-page app and a Node/Express API.
a. You can deploy both separately
the frontend (the React app) on S3 and CloudFront (tutorial)
the backend (the Node API) on Elastic Beanstalk (recommended) or EC2
Another option is to deploy both parts together at once on Elastic Beanstalk or EC2. However, you'll 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.
Another benefit of deploying separately: For organizations with different teams for the frontend and backend, it's easier for each team to be able to deploy their side of the application on their own without depending on the other team.
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 Node/Express API
app.domain.com for the React 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 build before deploying the React part. You can do it manually (before deploying on AWS) or automatically (in your CI/CD system). If you bootstrapped your app with create-react-app (CRA), just run yarn build or npm run build at the root of the project and upload the content of the "build" folder to your S3 bucket.
4. Tools
Official AWS S3 CLI - Manage S3 buckets and objects using high-level aws s3 commands.
Official AWS Elastic Beanstalk CLI - Manage and deploy your backend using eb commands.
S3-deploy - CLI utility for deploying files to S3.
5. If not restricted to AWS
I answered a related question not restricted to AWS.

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.
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.
1. 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:
Create a bucket in S3 with the exact name of the website. Example: blog.stackoverflow.com.
Enable static hosting
Create an A record in Route 53 and connect it to the bucket you created.
For more information check AWS handy documentation.
2. 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.
Continuous Delivery (Automating deployment)
To create an automatic deployment, I prefer to use Terraform in combination with Ansible. Terraform is very declarative. You describe how the cloud infrastructure should look like and Terraform build it for you.
Ansible, on the other hand, is very procedural and is perfect for provisioning a new server.
Error handling and reporting: Sentry
Ideally, you should have unit tests to prevent shipping buggy code to the production. (Use Jest with supertest, Enzyme for shallow rendering). But the world is imperfect, and it is good to receive any potential bugs that happen on the client. Enter Sentry

Both react and node code can be combined and deployed at once
you can more information here:
How to deploy reactjs and node typescript on elastic beanstalk using eb cli

Related

Can svelte be compiled prior to deploying to AWS Cloudfront?

I already have API endpoints on AWS API Gateway. My use case is static delivery of an SPA built in Svelte. AWS Cloudfront would deliver the SPA to users and user behavior therein would trigger Fetch to ping the established endpoints. Under the hood, my server side APIs are all serverless, typically on Lambda. I don't want to maintain state on the server, hence the interest in an SPA.
But first things first, how do I compile Svelte into vanilla JS so that I can ship that JS bundle to Cloudfront?
From this post, there is no CLI tool to trigger compilation of Svelte->JS. I'm starting to think that I just ship the Svelte code to Cloudfront and the compilation happens under the hood...? Though this seems wrong

How can I deploy a MERN app? Is a shared server on Hostgator not enough?

I currently have a React-only app deployed on Hostgator (I used npm run build then just uploaded the files to cPanel) because it is just a front-end landing page. However, I am planning to add things like logging in and a user dashboard, which will "require" me to use Node.js, Express and MongoDB Atlas.
In this scenario, will it still be possible to deploy the website onto shared hosting on cPanel? It seems to me, from looking online, that this is not possible. In this case, what are my options for other hosting to deploy a MERN stack app on, and what are my options for backend hosting on cPanel that are not Node.js-Express-MongoDB? Do they have their own backend services?
Thank you!
I had the same query and the only solution that I could find was that it is not possible to deploy your MERN app on shared hosting and you need a dedicated server for your applications.
The best and cheaper way to do this is, wrap your application inside a container using Docker and deploy the docker image on a VPS (Virtual Private Server).
Or,
You can also use a separate service for everything that you have to configure yourself and then deploy your app. Kubernetes is the best tool to manage distributed systems.
I hope this helped you.

ReactJS Production Deployment

I currently have production web app (PHP+AngularJS) & Java/Spring backend. Basically it is a web app making lots and lots of REST Api calls to Java backend and rendering that data on web forms. I use Apache Web 2.0 to host the frontend and Tomcat for the backend
Planning to migrate to ReactJS, Java/Spring will still be the backend. I need some guidance on following
Best Web Server to use to deploy React (Build/Deploy controlled through CD/CI, Jenkins)
Any specific frameworks and/or components that needs to be added and installed to support this web app.
Best Testing framework to use for React which will work with the CI/CD pipeline.
Can all this be containerized (docker/kubernetes) ?
Thanks in advance
Any server that servers static files (express, apacha, nginx, etc) can handle a react app.
You'll need webpack to build the project (transpile/minify/optimise)
You'll need a test runner (i suggest jest from facebook) and a library to test/render you application on each unit test. Use react-testing-library (simple, dynamic and easy to use).
Totally!

Create one heroku app from two git repositories

my issue: I have server written using Spring Boot, Spring Data, MongoDB and postgreSQL. My client is written with React/Redux. I keep them in two separated git repos. Now I’d like to deploy them to Heroku. I already deployed back end but now I’m not sure how to add frontend. I’d prefer to have it as one app because then I wouldn’t have to worty about csrf.
what solutions I was thinking about: As far as I’m concerned I see two solutions:
1) deploying front end as a separated app and make calls to backend (already deployed app)
2) somehow making it into one app. I read a couple of solutions and one suggested making a Procfile, but in that question there was one git repo. Deploy two separate heroku apps from same git repo
I’m using Maven and Yarn.
If your client project is also a maven project, you can make it a dependency of your server project.
You can then make the build copy your client artifact into the src/main/resources/static folder and have your server application serve the client as static content.
Update: This link is a good guide how to do it: https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/
It describes a multi module maven project with a spring rest backend- and an angularjs frontend module. But I am certain that the principle will work also with a react/redux frontend in a separate project.
It will require some tweaking though:)

Build SAPUI5 App with Grunt/Gulp and deploy form Eclipse with ABAP Team Provider

I am trying to optimize an existing UI5 application which resides in SAP BW as BSP Application and runs from SAP Portal (You press on the link and the UI5 application opens in a new Tab).
My main concern is with the amount of calls between Client and Back-end system. Especially calling all the library.css/library-preload.js/etc files AND custem controller.js and view.js files.
I found possible solutions involving grunt/gulp or deploying from SAP WebIDE. I trying building and deploying the App with SAP WebIDE, but after opening the App, Network still shows a lot of traffic + there is no Component-preload.js call. I'm guessing it has something to do with where the app is launched or I still have some configuring to do on the back-end?
I would like to build my App with either grunt/gulp since I can involve other plugins like lints, compression (for js, html, css), test, and many more. The problem is that the App resides not in OS, but somewhere in DB.
So I want to build my App with all those Grunt/Gulp tasks and deploy to ABAP AS (in BW as BSP application) using ABAP Team Provider and ensure that when I call the app from Portal, the files will be compressed/minified and, what is more important, that all the relevant .js files will be loaded as a single request.
Is what I imagine even possible? And if yes, then what are the steps required to accomplish this?
NOTE: I checked SCN and unfortunately I can't use your typical npm grunt or grunt-openui5 etc since the App resides somewhere in the DB :/
If you have a build configuration inside your WebIDE project, WebIDE will reate a DIST folder containing the distribution package.
Inside DIST there is an autogenerated Component-preload.js

Categories

Resources