Node JS AWS Elastic Beanstalk How to Deploy React Web Apps |Video upload date:  · Duration: PT16M43S  · Language: EN

Step by step guide to prepare a Node JS backend and deploy a React web app to AWS Elastic Beanstalk with build and environment tips

If you want to shove a React frontend and a Node.js backend onto AWS Elastic Beanstalk without crying later this guide will hold your hand and tell you what to do. We will build the React production bundle, make a tiny Express server that serves that bundle and any API routes, and then deploy with EB CLI or the AWS console. No magic required, just a little patience and the correct build output.

Build the React bundle and get it ready for serving

In the client folder run your build script to produce optimized assets for fast loading and fewer surprises on launch. This is the step where development toys are packed away and real life begins.

cd client
npm install
npm run build

After the build copy the build output into the server public folder or point Express static middleware directly to the build directory. Both options work. The goal is one deployable artifact that Elastic Beanstalk understands.

Make a minimal Express server that serves the app and your API

Elastic Beanstalk wants a single Node process. Combine frontend and backend into one Express app so EB can manage it like a responsible adult.

const express = require('express')
const path = require('path')
const app = express()

app.use(express.json())
app.use(express.static(path.join(__dirname, 'public')))

app.get('/api/health', (req, res) => res.send('ok'))

app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'public', 'index.html')))

const port = process.env.PORT || 3000
app.listen(port, () => console.log('Server running on port ' + port))

Replace 'public' with the folder you copied the React build into. The wildcard route makes client side routing behave like it knows what it is doing.

Prepare package json and the start process

Make sure package json has start and build scripts and that production only dependencies are listed under dependencies not devDependencies. Elastic Beanstalk will run npm install unless you upload a full node_modules bundle.

{
  'name': 'my-app',
  'scripts': {
    'start': 'node server.js',
    'build': 'cd client && npm run build'
  }
}

If you prefer the console upload route include node_modules in the zip. If you use the EB Node platform let EB run npm install during deployment. You can also add a Procfile if you want explicit control of the start command.

Configure environment variables and platform settings

Set secrets and runtime flags via the Elastic Beanstalk console or the EB CLI. Choose the Node platform version and instance size that match your traffic expectations. Health checks and log streaming will save you a lot of guesswork when things go wrong.

Deployment options

  • EB CLI for repeatable CLI driven deploys. Use eb init then eb create or eb deploy.
  • AWS console upload if you like clicking and staring at progress bars.
  • CI CD pipeline for automatic builds and deploys from your repo when you finally trust automation.

Run it and watch the logs like a hawk

During the first deploy tail the logs and hit both frontend and backend routes. If something breaks blame package mismatch then fix dependency versions. Common issues include wrong start script, missing build files, and port mismatch.

Quick checklist before you deploy

  • React build exists in the server public folder or static middleware points to build
  • package json start script is correct
  • Environment variables are set for production secrets
  • Platform version and instance size chosen
  • Health checks enabled and logs streaming

Troubleshooting tips

If your app fails health checks check the server log for startup errors. If static files 404 double check the path used in express.static and the file layout inside the zip you uploaded. If npm install fails from EB examine your node and npm versions and lock file for problematic packages.

Deploying React and Node.js to AWS Elastic Beanstalk is mostly boring repetition with occasional thrills. Do the build, serve the files with Express, configure EB properly, and use EB CLI for reproducible results. Then open your app and enjoy the rare feeling of having control over your infrastructure for at least five minutes.

I know how you can get Azure Certified, Google Cloud Certified and AWS Certified. It's a cool certification exam simulator site called certificationexams.pro. Check it out, and tell them Cameron sent ya!

This is a dedicated watch page for a single video.