Prerequisites

This guide assumes that you have a working MERN app set up.

We also assume that you keep your frontend and backend separate from each other in separate folders on your local machine. If this is not the case, please move your backend code and frontend code to separate folders.

We will be using Vercel to deploy our frontend and using your GitHub account to supply the repository to Vercel, so if you don't already have a GitHub account, create one now.

Deploy the Backend

We will be using AWS Elastic Beanstalk to deploy our backend. Beanstalk automatically handles server setup, capacity provisioning, load balancing, scaling, and application health monitoring for your application. With Beanstalk, you no longer need to manually setup all the varying AWS services that your app needs to run securely and efficiently. All you have to do is upload the code, after making doing some initial setup.

In order to use Elastic Beanstalk, you must have the Beanstalk CLI setup on your machine. Follow the instructions on https://github.com/aws/aws-elastic-beanstalk-cli-setup to install it. Alternatively, follow the instructions on https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/eb-cli3-install-advanced.html to install the Beanstalk CLI if the former setup scripts are not compatible with your development environment.

After you have installed the Elastic Beanstalk CLI (known hereafter as EB), verify that it works by running the command eb --version . You should get a line outputted on your terminal with the following text

EB CLI (Version)

with the Version being at least 3.18.1.

After verifying that you have successfully installed EB, cd into the folder that contains your backend code.

Configure your Express app for Elastic Beanstalk

There are some slight modifications that you need to commit in order to get your Express app working in a plug and play fashion on EB.

  1. cd $yourProjectRoot && mkdir bin
  2. curl [<https://gist.githubusercontent.com/mdesilva/a35edf166d98b3d91f333063791fd30b/raw/48c461b4d8b197c22b119c5db616269bfe0f7984/www.js>](<https://gist.githubusercontent.com/mdesilva/a35edf166d98b3d91f333063791fd30b/raw/48c461b4d8b197c22b119c5db616269bfe0f7984/www.js>)--output bin/www.js

This www.js file instantiates a server object that will serve your Express app on port 80 (the default http port) on the remote server that Beanstalk will provision for you on AWS.

  1. Add the following line to your app.js file in your root directory, so that www.js can import it.

module.exports = app

  1. Finally, add the following to the scripts object within your package.json file.

"start": "node ./bin/www"

Your package.json should look similar to this after adding the script to the scripts section.

{
  "name": "mernbe",
  "version": "1.0.0",
  "description": "A tutorial for deploy a mern backend to Elastic Beanstalk",
  "main": "index.js",
  "scripts": {
    "start": "node ./bin/www"
  },
  "author": "Manuja DeSilva",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1"
  }
}