Step by Step Introduction to Multi-Container Docker Application with React and NodeJs as Frontend and Backend

Hi Folks! 👋🏻

We can always relate sometimes how difficult it gets to get started with new techs, so this story will focus on how we can set up a multi-container docker wrapper for your application.

Since the story is focused on helping beginners, I will try to keep things simple and easy to set up.

Source Code:

[GIT LINK]
It's always lazy for me to set up a git repository for such sample apps, so this time Muhammad Ata helped me out to make this possible… 😁

Step 1

In order to formulate an example close to real life. I will divide different application layers into docker nodes, where I will use Angular for the front-end and NodeJs for the backend,

So at first let's set up a folder structure, As said earlier we are going to divide the front and back end of the application so I am going to have two different folders for that…

The product-crud is the name of my application..

Step 2

Keep your application backend in the “product-crud-backend” (You can call it anything… am just referring to my naming convention)

Once you have moved all your backend (NodeJs) code to this then it should look something like this…

Verify your APIs are working fine in this directory before moving to the next step… 👉🏻

Step 3

Repeat Step 2 but for “product-crud-frontend” and move your frontend (React) code to this folder… again the naming convention of the folder can be anything..

Once done your “product-crud-frontend” should look something like this…

We are done with setting up the folder structure to segregate our frontend and backend.. 🙏🏻

The folder structure should look something like this…

Let's move…

Step 4

It’s time to make Dockerfile, We are going to make two Dockerfiles to keep things simple,

[4-A]
Create a Dockerfile under the “product-crud-frontend” directory and place the following code

FROM node:13.12.0-alpine
WORKDIR /crud-app-frontend
COPY package*.json /crud-app-frontend/
RUN npm install
COPY . /crud-app-frontend
CMD ["npm", "start"]

[4-B]
Create a Dockerfile under the “product-crud-backend” directory and place the following code

FROM node:13.12.0-alpine
WORKDIR /crud-app-backend
COPY package*.json /crud-app-backend/
RUN npm install
COPY . /crud-app-backend
CMD ["npm", "run", "dev"]

Step 5

It’s time to create a “docker-compose.yml” which is the most important part of this tutorial. We will link frontend and backend Dockerfile here so is important to create this file in the root directory with the same name “docker-compose.yml”

The folder structure should look like this…

ignore that .gitignore 😁

Step 6

Once you have created a “docker-compose.yml” place the following code in the file.. the indentation is important so I would recommend installing YML plugin in your IDE (VSCode in my case).

version: "3"
services:
  crud-frontend:
     container_name: product-frontend
     build: ./product-crud-frontend
     environment: 
       NODE_ENV: development      
     ports:
        - 8080:3000
  crud-backend:
     container_name: product-backend
     build: ./product-crud-backend
     environment:
       NODE_ENV: development
     ports:
        - 8081:3000
  db:
     container_name: mongo_database
     image: mongo
     ports:
        - 27017:27017

Let’s walk through our “docker-compose.yml”, take a look at the build keyword we have specified in the frontend and backend directory path where our Dockerfile resides so this way the docker-compose will create a single wrapper with multiple containers...

We have hosted our database on the node db which is using the dedicated image of mongo-db to keep the database container isolated like the rest of all containers…

What’s next? Nothing we’re good folks! 🤓