Do YOU want your MERN app to be deployed for the world to see? So do we, let's get started.

Prerequisites

This guide assumes you:

Make your Express App Deployment Ready

Dynamic Ports

First, we will use dotenv to add an environment variable for the port our Express app runs on. The reason we can't just hard code it is because Azure sets the port dynamically and we would get a 500 error when trying to access our app.

So first, add it as a dependency to your project. Run:

npm i --save dotenv

Then, create a .env file at the root level of your project. Add this to the .env file:

PORT=3000

This is optional, but highly recommended. If this is all you are using it for, then you don't have to add it to the gitignore. Having environment variables is a great way to add layers of security, and developers use the .env file to store keys and secrets. If you do use it in this way, make sure to add .env to the gitignore (developers will have to manually add the keys and secrets to their local version of .env )

Now, add these to your server.js file (entry file for your Express app):

app.set('port', process.env.PORT || 5000);
require('dotenv').config();

This tells the Express app to grab the port number from an environment variable and uses dotenv to configure it.

Preparing the Frontend

Navigate to the client (frontend) folder inside of the Express app and run: