Overview

In my previous two blogs. I have discussed docker basics and docker-compose.
Docker (Part - 1): Introduction and Basic Commands
Docker (Part - 2): Write a docker-compose to setup Postgres and Pgadmin

In this tutorial, We will see how to create our own docker image and build it. We will also setup a MERN stack application with docker.

Docker for React

To dockerize a react application we need to create a react app or we can use our existing react app. you can also dockerize your vue, angular, svelte or any other application you want with the same steps

create react app

npx create-react-app my-app

now we need to create Dockerfile in the root directory of our react application and paste below code.

Dockerfile

FROM node:lts-alpine

WORKDIR /usr/app

COPY package.json ./

RUN npm install

COPY . .

EXPOSE 8000

CMD ["npm", "start"]

Let's see what we have written

FROM - instruction specifies the base image that the image will be built on. In this case, the base image is node:lts-alpine.

WORKDIR - instruction specifies the working directory inside the image. This is the directory where the commands in the RUN instruction will be executed and the files in the COPY instructions will be copied to.

COPY instruction copies files from the host machine to the image. In this case, the package.json file is copied to the working directory. This file is used by npm to install the dependencies for the Node.js application.

RUN instruction runs a command in the image build process. In this case, the npm install command is run to install the dependencies for the Node.js application.

COPY instruction copies all the files from the current directory to the working directory in the image. This includes the Node.js application code.

EXPOSE instruction exposes a port on the container so that it can be accessed from the outside. In this case, the port 8000 is exposed.

CMD instruction specifies the command that will be run when the container is created from the image. In this case, the npm start command is run, which starts our applications.

Now we need to build our application

docker build -t <image_name> .

Replace <image_name> with the name of the image that you want to create. The . at the end of the command tells Docker to build the image from the current directory.

Our docker image is ready to run. Let's run our image

docker run <image_name>

yeahhh! our application is running.

Docker for Node server

Again create a node application and in the root file we need to create Dockerfile for our image

Dockerfile

FROM node:lts-alpine

WORKDIR /usr/app

COPY package.json ./

RUN npm install

COPY . .

EXPOSE 8000

CMD ["npm", "start"]

docker build -t <image_name> .

docker run <image_name>

Steps are almost same as both are running on node server.

Create docker-compose

In our previous blog, we saw how to create a Postgres database using docker-compose we will use the same concept to create a Mongo database to connect with our server. Also, we will build and run our client and server application from the docker-compose.

docker-compose.yml

version: '3'
services:
  server:
    build:
      dockerfile: Dockerfile
      context: "./server"
    depends_on:
      - mongo
    ports:
      - "8000:8000"

  client:
    stdin_open: true
    build:
      dockerfile: Dockerfile
      context: ./client-react
    ports:
      - "8082:8082"

  mongo:
    image: mongo
    restart: always
    ports: 
      - "27017:27017"
    environment:
      - MONGO_INITDB_ROOT_USERNAME=admin
      - MONGO_INITDB_ROOT_PASSWORD=password

  mongo-express:
    image: mongo-express
    restart: always
    depends_on:
      - mongo
    ports:
      - "8081:8081"
    environment:
      - ME_CONFIG_MONGODB_ADMINUSERNAME=admin
      - ME_CONFIG_MONGODB_ADMINPASSWORD=password
      - ME_CONFIG_MONGODB_SERVER=mongo

version: '3' - line specifies the version of the Docker Compose file. The current version is 3.

services: - section defines the services that will be created. Each service has a name, a build configuration, and a set of ports that will be exposed.

server: - service defines a server that will be built from the Dockerfile in the server directory. The server will depend on the mongo service, which means that the mongo service will be started before the server service. The server will expose the port 8000.

client: - service defines a client that will be built from the Dockerfile in the client-react directory. The client will expose the port 8082.

mongo: - service defines a MongoDB database that will be used by the other services. The database will be restarted always, which means that it will be restarted if it crashes. The database will expose the port 27017.

mongo-express: - service defines a MongoDB management tool that will be used to interact with the MongoDB database. The tool will depend on the mongo service, which means that the mongo service will be started before the mongo-express service. The tool will expose the port 8081.

Other commands we have discussed in our previous blogs.

Now, If we run our MERN application

docker-compose up

See our application is running after building or pulling all the images! It may take some time and our application will run on the port we have mentioned.

###