MERN With Docker container Setup[Part -2]

Hi all, its a continue part of full stack development, here we are going to dockerize the react application which we built, and also creating the containers for nodeJS backend API and mongoDB database.

We developers will be working with different projects with various versions, when switching between projects we can get conflicts/clashes between the versions, so for this we can choose NVM to resolve this issue (Applicable for only NodeJS!).

Short Note on NVM:

Why NVM? Node Version Manager — it helps you manage and switch between different Node versions with ease.

1. NVM setup.
2. To check version of NVM, use “command -v nvm”
3. Run “nvm install — lts” install latest node LTS release
4. To list all available versions, run “nvm ls-remote”
5. To install a specific node version, run “nvm install <version_number>”
6. To install latest release, run “nvm install node”
7. To list all the installed versions, run “nvm ls”
8. To switch between the versions, run “nvm use <version_number>”
9. To use latest lts version, run “nvm use — lts”

And another best way to overcome this issue with creating containers using the Docker, which allows us to work in different development and production environments. And also we can share those containers/images with others, so they need not to configure/setup, by using the shared image they can run the application easily.

For installation visit attached link: https://www.docker.com/get-started

Steps for dockerizing our projects:

Step 1: Dockerize the frontend (reactapp) by following the below steps:

1. Now create a Dockerfile and .dockerignore files in the root folder

Note: .dockerignore file is similar as .gitignore, where we are going to exclude these files and folder while creating the docker image.

1. In Dockerfile mention like below

To find any image visit https://hub.docker.com/ and pull that image into your local

2.1 FROM node: This is the base node image, which we require for running our react application doing installation of packages

2.2 WORKDIR /app: Set the container root directory

2.3 COPY package.json . : the package.json to container directory, where . points to /app

2.4 RUN npm install: To install dependency packages in container

2.5 COPY . . : Copy the rest of the files into working directory (i.e., /app)

2.6 EXPOSE 3000: Publishing the application into this port, when its get started

2.7 CMD [ “npm”, “start” ]: to run the application, we can refer the package.json ‘scripts’.

Step 2: Dockerize the backend (nodeservice) by following the below steps:

1. Navigate to nodeservice folder and run “npm init” and enter the details

2. Install the required dependencies by running these commands, “npm i express mongoose body-parser morgan — save” and devDependencies “npm i -D typescript ts-node @types/node @types/express nodemon @types/mongoose @types/body-parser @types/morgan”

3. Create tsconfig.json file in root folder and update it.

4. Update the package.json “scripts” section with start and build commands

5. Create a .gitignore file and mention like below

6. Create a index.ts file and write a basic skeleton code for backend service by using “express” and we will establish the connection between the mongoDB using mongoose.

7. Then create Dockerfile and .dockerignore files in the root folder and also pass the ENV variables

Now we are done with dockerizing the backend and frontend parts, the now major step to combine all these multiple-containers using docker-compose

Note: To manage multiple containers communication we can go with adding those containers in a same network ( — network) or by grouping them with docker-compose.

• Using Docker compose, we are going to automating multi-container setups ex: mongoDB(database), nodeJS(backend) and reactApp(frontend)
• The advantage of using docker compose, is to replace multiple docker build and run commands into one configuration file. i.e., Grouping build, start, stop, env and etc..,

https://docs.docker.com/compose/install/

Steps to install docker-compose

Creating a compose file

• Go to root directory and create docker-compose.(yml|yaml) file

• Define services in a Compose file for more details related to the compose file : https://github.com/compose-spec/compose-spec/blob/master/spec.md

https://github.com/RaghavendraNK/react-typescript-jest-cypress/blob/main/docker-compose.yaml

Note: remove node_modules and package-lock.json from both banckend and fron-end, becz from now on we are going to work with the Docker containers and not going to use these node_modules

• To build compose with image changes, run “docker-compose up — build”

• Once it completes we can check the container and image by using commands, “docker container ls” and “docker image ls”

• To start docker — compose in detached mode, run “docker-compose up -d”

And also we can see our application is running on the browser with Port:3000

• To stop docker-compose, run “docker-compose down”, use -v if you want to remove the data volumes

Part-3: Contains setup “i18next and redux, saga” and “axios” configurations. And also we are going to use Figma to create our wireframes, which we are going to develop.

Part-4: Contains Jenkins setup and connecting with nodeJS API with MongoDB to get the articles from the database and performing the CRUD operations.

Part-5: We will publish our app in heroku server using ci/cd piplines.

Please find here the complete project setup: https://github.com/RaghavendraNK/react-typescript-jest-cypress/tree/main

Thanks,