Containerize Your Full Stack Web Application (MERN) with Docker Compose

Hi everyone!?

Welcome to our comprehensive guide on Containerizing a full stack Web MERN (MongoDB, Express.js, React, Node.js) application using Docker Compose involves creating separate containers for each component of the application & defining their configurations in a docker-compose.yml file.?

What do we want to do??

For the dockerize a full stack web MERN application using docker-compose we create separate ‘Dockerfile’ for the frontend (client) & backend (server) to create a docker image and we use MongoDB official docker imager for containerizing and defining their configurations in a docker-compose.yml file. in these configurations, we know variation topics of Docker and docker-compose like Docker environment, volume, etc.?

Demo from Docker Composer for Running Container?

?? Steps Overview:?

We have a few steps above the solution:?

1. Create a ‘Dockerfile’ for the frontend (client).?

2. Create a ‘Dockerfile’ for the backend (server).?

3. Create a ‘docker-compose.yml’, and set the variable.?

4. Finally, see the ‘demo ’accessing URL (localhost)

??Section 1:?

Create a ‘Dockerfile’ for the frontend (client).?

Create a docker file on the client folder.

To write a Dockerfile follow the step:?

1. Select a base image using ‘FROM’.?

2. Create a directory & switch the directory using ‘WORKDIR’.?

3. Copy necessary or package dependency file like ‘package.json’.?

4. Install the package from the file.?

5. Copy the other code from the local machine to the docker image.

6. Build the package or start the container.?

7. If we use ‘Stage-2’ copy the necessary file from ‘Stage-1’.

8. Expose the ‘port ’for the open port to run this container on this port.

9. Start the server on the container using the “CMD” command.?

??Section 2:?

Create a ‘Dockerfile’ for the backend (server).?

Create a docker file on the server folder.?

Write a Simple Dockerfile Smartly?

1. Choose a Base Image: Start with an appropriate base image that suits your application’s requirements. Use official images whenever possible, as they are usually well-maintained and secure.?

2. Use a Minimal Base Image: Opt for a minimal base image to reduce the size of your final Docker image. For example, instead of using a full operating system, consider using Alpine Linux as it’s lightweight.?

3. Copy Only Necessary Files: Only copy the necessary files into the Docker image. Use a ‘.dockerignore’ file to exclude unnecessary files and directories.

4. Combine Steps: Minimize the number of layers in your image by combining multiple commands into a single RUN instruction.?

??Section 3:?

At this stage, our two docker file is ready for the ‘frontend & backend’ also other docker official images ‘MongoDB ’ will be downloaded from the ‘Docker Hub’.?

Now write a ‘docker-compose.yml’ file on the root directory of the project folder to run all containers in one commend ‘docker-compose up -d’.?

All code in GitHub can be cloned here.?

Now, go to the root directory of the project folder, open the terminal then commend ‘docker-compose up -d’ to run docker composer and create three containers ‘backend, frontend, mongodb_server’.?

1. On the ‘docker-compose.yml’ file define the services which services we want to use using the ‘services’ keyword.?

2. Then we define which services we want to use like ‘server’, ‘client’, ‘mongodb’.?

3. Then select the ‘Dockerfile’ location and ‘file name’.?

4. We can also define the container name using the ‘container_name’ keyword.?

5. Also, ‘ports ’ are used for port forwarding between the ‘host machine port’ and ‘container port’.?

6. Which services are run first then other services are run is defined using the ‘depends_on’ keyword.?

7. Set environment variable on a ‘.env’ file and this file set using the ‘env_file’ keyword.?

8. The ‘volumes’ keyword is used for backup data from the container to the host machine because if the container is ‘dead’ we can ‘backup ’our important data. it's most important in database services.

9. Finally, define the ‘volumes’ that we want to use.?

10. We use a ‘default ’ network so, we can not discuss ‘Docker Network’. If you are interested go here to learn more about this. otherwise, we discuss another article.?

11. Here ‘docker-compose up -d’, the ‘-d’ command in docker is a shorthand for the ‘ — detach’ option. when you run a container with the ‘-d’ flag, it starts the container in the background and immediately returns you to the command prompt without blocking the terminal.?

After that, we see that the Docker Desktop container is running. ? ? Docker Desktop is running Docker containers?

Now, we access the localhost address on the browser and see the output.?

If any issue ‘add user’, stop the docker-compose using ‘docker-compose down’, delete the cache volumes, and again ‘docker-compose up -d’ to run the docker image.

Run from Docker Compose?

Finally, we get the output after adding the user, the first time homepage is blank because no data was added, after adding the user we see the user on the homepage.?

On this docker-compose file, if we stop the container and remove the image from the ‘host machine ’ then again we create a container image and run that container, we see the old user because our old data is ‘backup’ using volumes.?

??Congratulations!!??, We have successfully containerized your full stack web application MERN (MongoDB, Express.js, React, Node.js) with ‘docker-compose’.