MERN App

This repository contains a simple MERN app as part of the Deploying a Production ready React-Express App on EC2 with CI/CD gist tutorial which you can find here

Table of Contents

• Project Layout
• Setting up the Mern-app project
• Setting up the Mern-app project with Docker
  • Install Docker
  • Build and Run the Container
  • Cleaning up the Container and Image
• Setting up the Mern-app project manually
• Authors

Project Layout

Here is the project layout:

mern-app
 |__ client/ (React App Frontend)
    |__ public/
    |__ src/
 |__ scripts/
 |__ app.js (Express Backend)
 |__ package.json
 |__ Dockerfile
 |__ docker-compose.yml

Project Structure

The app simply displays the default React app components. However, I have added a simple API which the frontend calls to confirm that the API call is successfull.

I will be using a generic MERN (MongoDB, Express, React, Node.js) stack app which uses a proxy with the Express server.

What this means is that instead of having two separate servers running (One for the frontend (React) and the other for the backend (Express)) we will build our React project into a directory of static files which Express will then serve.

The benefit of this is this allows you to manage the project in one collective repo/project and it removes the barrier of having to deal with any CORS issues of your backend not recognizing the frontend requests.

Setting up the mern-app project

Start by cloning the project with the command:

$ git clone https://github.com/rmiyazaki6499/mern-app.git

Setting up the mern-app project with Docker

For those that are not interested in setting up the project manually or would simply not have to worry about downloading node.js and its dependencies, I have created a Dockerfile and docker-compose.yml file to help create a container with everything you would need to run the mern-app.

Install Docker

To make this as easy as possible, we will be using Docker Compose to creat our container.

• If you do not have Docker yet, start by downloading it if you are on a Mac or Windows: https://www.docker.com/products/docker-desktop

• Or if you are on a Linux Distribution follow the directions here: https://docs.docker.com/compose/install/

• To confirm you have Docker Compose, open up your terminal and run the command below:

$ docker-compose --version
docker-compose version 1.26.2, build eefe0d31

• Go into the project directory to build and run the container with:

$ cd mern-app/
$ docker-compose up --build

This may take a few moments

Navigate to http://localhost:5000 to view the site on the local server. It should look something like this:

Cleaning up the Container and Image

• To stop the container from running, use <Ctrl-C> twice.
• To close down the container use the command:

$ docker-compose down

• Then to clean up the container and image which we are no longer using use the command:

$ docker system prune -fa

• Confirm that the container and image is no longer there with:

$ docker system df -v

Setting up the mern-app project manually

• If you either did not want to use Docker or was curious to build the mern-app manually follow the directions below.

• Start by installing the dependencies for both Express and React:

$ cd mern-app/
$ npm install
$ cd client/
$ npm install

Let's first check to see what our React frontend looks like.

• To run the React server use the command in client directory:

$ npm start

• Now if you go to http://localhost:3000, you should see something like this:

The API is not working because well, we are not running our backend yet! Let's do that now.

• In another terminal session run the command npm start at the root directory of the project as we did with the frontend. It should look something like this:

You can see that we have the express server running on port 5000.

• Now switch back to the http://localhost:3000 and refresh the page. You should see the Message at the bottom be updated!

We have two servers running, one for the React frontend and one for the Express backend. If your project set up is essentially two separate projects between the frontend and backend this would be as far as we would need to check. However, I have set this project set up so that rather than running two servers, we run a reverse proxy for React through Express and will serve the frontend through the Express server.

Because we will not be running the React server for our project, go ahead and stop the React server.

• In the client directory run the command:

$ npm run-script build

React then will create a build directory with a production build of your app which is where our Express server will use to serve the frontend.

• Now if you go to http://localhost:5000 you should see the same React page from earlier!

Back to Table of Contents

Author

Created by:

• Ryuichi Miyazaki