MERN Application Deployment On Digital Ocean With Docker — Part 1

5 min readAug 10, 2021

Complete tutorial about how to dockerize MERN application in development environment and how to deploy it on digital ocean

We can easily deploy our web application to the digital ocean by using docker. I split the tutorial into different parts. so you can easily follow each part.

You can also watch my tutorials on youtube about how to deploy the MERN application on the digital ocean with docker

Prerequisite for this series

You should know about the basics of Docker container and Docker Image

Learning Outcomes

1- How to use docker in the development phase?

2- How to deploy a MERN application with free SSL encryption on the digital ocean with docker?

The complete source code is available on Github.

https://github.com/mahmedyoutube/mern-application-deployment-tutorial

In this first tutorial, we will set docker in the development environment, and in the next tutorial, we will deploy our application.

Dockerizing A MERN Application In Few Steps

This is the Short Summary of the whole procedure. So you can get an overall idea of how to dockerize complete MERN application

1- Dockerize node.js app

2- Dockerize React.js project

3- Make Sure both folders are present in the same root directory

4- Create a docker-compose.dev.yml file in the root directory

5- Create Nginx folder in the same root directory where you create docker-compose.dev.yml and put the given files in it

6- Copy paste the given docker-compose code

7- Run Commands and now you’re good to go

Step 1 — Dockerize Node.js app

1- Create “Docker.dev” file in the same directory in which the package.json file is present

2- Copy paste the below code

3- Run the commands to check everything is working

Dockerfile.dev Code

Make Sure the following things

1- npm i nodemon ( without -g command)

2- Add “dev” command in your package.json file
“dev”: “nodemon index.js”

3- Your Node.js app must be listening on port 5000

Run the following commands on terminal


docker build -f Dockerfile.dev -t dev-node .
docker run -p 5000:5000 dev-node

If mongoose throws any error, you can skip this, but make sure there is no error other than mongoose error

Yahoo! we successfully dockerize our node.js application.

Step 2 — Dockerize React.js Application

1- Create “Docker.dev” file in the same directory in which the package.json file is present

2- Copy paste the below code

3- Run the commands to check everything is working

Dockerfile.dev Code

Run the following commands on terminal

docker build -f Dockerfile.dev -t dev-react .
docker run -p listeningport:listeningport dev-react

Yahoo! we successfully dockerize our react.js application.

Step 3 — Example

Step 4 — Docker-compose file

Create a docker-compose.dev.yml file in the root project.

Example

Step 5 — nginx folder setup with files

Steps to setup nginx folder in the dockerize application

1- Create default.dev.conf file in nginx folder

2- create Dockerfile.dev file in nginx folder

3- Copy paste the given code in respective files

Code for default.dev.conf

Code for Dockerfile.dev

Step 6 — Docker-compose.dev.yml Code

Step 7 — Run Commands

To start the applicationdocker-compose -f docker-compose.dev.yml up --buildTo Completely stop the application, Run both commands- CTRL+C
 - docker-compose -f docker-compose.dev.yml down

Congratulations, You have successfully containerized the project to run in a development environment

Optional Part

If you want to understand the Dockerfiles code in more detail, then you would read this. Otherwise, you can skip this part if you are already familiar with docker already

First, I will explain to you Node.js And React.js Dockerfile file

# Node.js dockerfile
# get latest image of node.js from docker hub
FROM node:latest# set "/app" is our working directory 
WORKDIR '/app'# We need to run npm install only when we add new dependencies, otherwise we need to skip npm install command so we will use docker cache approach, docker will automtically handle this, so you only need to copy your packages file in app folder and run npm ci command"COPY package.json package-lock.json ./# npm ci installs dependencies directly from package-lock.json you can read more about npm ci from https://stackoverflow.com/questions/52499617/what-is-the-difference-between-npm-install-and-npm-ciRUN npm ci#Now copy everything from current folder to "app folder"
COPY . .#when everything done successfully, Now run the command to run our app
CMD ["npm", "run", "dev"]

React.js dockerfile is similar to node.js dockerfile and there is the only difference in command

Explanation of the docker-compose.dev.yml file

Why do we need Nginx in the docker environment?

In Simpler meaning, Nginx helps us to proxy request on different services.

Nginx setup in Docker environment

We need to modify the default Nginx conf file. In order to do this, we will write a custom conf file and overwrite this to the existing default.conf file of the Nginx.

As this tutorial is not related to Nginx but I will try to summarize all of the content which you will need to run your application on Nginx server.

Necessary Requirements for Nginx default.conf file

1- conf file requires server block distinguished by ports

2- Once Nginx decide which server block processes a request, then URI which is present in request’s header, Nginx test it against the location directive which is present inside the server block

Now, I will explain the default.dev.conf file which is in rootFolder/nginx/default.dev.conf

Conclusion

We learn how to dockerize MERN application
why we need Nginx, how to set up it in the docker environment

If you understand this well, Kindly leave your comment. Or you can add me on LinkedIn

https://www.linkedin.com/in/m-ahmed-mushtaq

Thanks 😊