This article of dockerize the MERN stack application with 1 file
This Articles Contents
What is the MERN stack?
We can have better understanding One by One
MongoDB: A document database which can perform cross platform operation
Express: A web application framework for backend
Express is a platform for a web application for Node.js, another part of MERN. Developers use Express to minimize the process of writing application code instead of writing complete web service code by hand on Node.js directly
React was initially developed by a Facebook software developer, and was later open-sourced. For generating views made in HTML, the React library may be used. In a way, it’s the stack ‘s defining function.
Let’s dockerize the MERN stack application
You can get a sample MERN stack application from this link. I hope you’ve already installed Dockers on your machines.
You can check docker is install and running by the following the command
You got this as output
To understand docker terminology you can refer this post
Let’s do Backend Server Dockerization
We’re going to need a file called .dockerignore. Build the following inside and paste:
node_modules .gitignore .git
You will need a docker file to create a docker image. Build a Dockerfile-like file inside the back-end folder:
FROM node:10.19.0 # Create app directory inside docker file WORKDIR /usr/src/app COPY package*.json ./ # Bundle app source code COPY . . RUN npm install EXPOSE 3000 CMD [ "npm", "start" ]
This file tells docker to download version 10 of Node.js, build an application directory, copy package.json files, run npm update for node modules, specify which port this software will like to use, and then run it with npm start.
Now we can simply build the docker image of our express app with this command.
docker build -t backend .
Using this command to validate your docker images:
If this image is to be deleted, run:
docker rmi < image_id/image_name >
Finally run the docker container
It’s time to run a container (our application in an isolated environment) based on our file. The main thing is that dockers need to be told how to navigate the harbor. We’re now operating a container and converting port 5000 to port 4000.
docker run -p 4000:5000 -d backend
-p is used to map the port and -d to run the container in the background. We can also assign ports as -p 5000:5000. I used different ports so that you won’t get confused.
To run a container with an interactive terminal in the foreground, use:
docker run -it -p 4000:5000 backend
Now we can now access the app by this URL http://localhost:4000/
There is another very useful command to see all running containers:
To see all containers running and stopped :
docker ps -a
Let’s do Frontend Server Dockerization
Initialize a react-app within the node docker directory using npxx
npx create-react-app client cd client
Let’s run the app :
This will launch at port 3000 with a development server. At http:/localhost:3000, you can access the browser:
Build all the requisite frontend components now by listening to your backend needs. And when you’re done, it’s time to dock the frontend as well. Attach a file called .dockerignore. Build the following inside and paste:
node_modules .gitignore .git
Create a file named as Dockerfile inside client directory
FROM:node:10.19.0 # Create app directory WORKDIR /usr/src/app COPY package*.json ./ # Bundle app source COPY . . RUN npm install EXPOSE 3000 CMD [ "npm", "start" ]
Let ‘s start using the command to construct our container:
docker build -t frontend:v1 .
To confirm if all is good, we use the command: to run our newly developed container:
docker run -p 3000:3000 myapp-react:v1
Visit http:/localhost:3000 now to verify that our container works great. Okay, our wonderful client is OK! We have both our client and server separate containers, but they are not actually communicating with each other.
By using docker-compose, let’s solve this problem.
Lets check your docker-compose version:
Using Docker Compose to connect client and server
At the root(node docker) of our project, let’s build a new docker-compose.yml, which will connect with the client and server ‘s individual Dockerfiles and create a network between these containers:
├── / backend ├── / client └── docker-compose.yml version:'2' services: frontend: build: ./client ports: - "3000:3000" depends_on: - backend backend: build: ./backend ports: - "5000:5000"
To create our linked containers, use this command from the root folder:
Now run the magic command again in the docker to start anything.
Now both application is running application http://localhost:3000/