Dockerizing a full stack JS app

Docker is a tool designed to make it easier to create, deploy, and run applications by using containers. Containers allow a developer to package up an application with all its dependencies, and ship it all out as one package.

In this blog, I will show how I containerised a full stack JS application using docker. You can find the full code here on Github. The tech stack of app is as follows:

• Frontend- ReactJs
• Backend- HapiJs
• Database- Postgres

Pre requisite

This post assumes that you have basic knowledge of docker and node. Also, you should have docker setup in your local

Let’s Get Started

1 - Folder structure

Project folder structure

2 - Creating docker file

The first step for us is to create a dockerfile to containerise our frontend and backend projects

2.1- Creating docker file in backend

Create a file named dockerfile in the backend folder, and put following code in it

# Base image
FROM node

# Make folder to put our files in
RUN mkdir -p /usr/src/app
RUN mkdir -p /usr/src/app/backend
# Set working directory so that all subsequent command runs in this folder
WORKDIR /usr/src/app/backend
# Copy package json and install dependencies
COPY package*.json ./
RUN npm install
# Copy our app
COPY . .
# Expose port to access server
EXPOSE 8080
# Command to run our app
CMD [ "npm", "start"]

The above code will create a docker container for our backend project.

2.2- Creating docker file in frontend

Create a file named dockerfile in the frontend folder, and put following code in it

# Base image
FROM node
# Make folder to put our files in
RUN mkdir -p /usr/src/app
RUN mkdir -p /usr/src/app/frontend
# Set working directory so that all
# subsequent command runs in this folder
WORKDIR /usr/src/app/frontend
# Copy package json and install dependencies
COPY package*.json ./
RUN npm install
# Copy our app
COPY . .
# Expose port to access server
EXPOSE 3000
# Command to run our app
CMD [ "npm", "start" ]

The above code will create a docker container for our frontend project.

3 - Create docker compose file

Now that we have create dockerfile for our frontend and backend projects, we will move on to our next step. In this step, we will create docker compose file. This file will tell docker the configuration of our docker container that we need. We will create a docker-compose.yml. Put the following code in the file:

version: '3'
services:
  # Create frontend container
  frontend: # Name of our service
    build: ./frontend # path to dockerfile
    ports: # Port binding to host from docker container
      - "3000:3000" # Bind port 3000 of host to 3000 of container
    container_name: frontend-docker
    restart: always # What to do if container crashes
    links:
      - backend
  # Create backend container
  backend:
    # Create backend container  
    build: ./backend
    ports:
      - "8080:8080"
    container_name: backend-docker
    restart: always
    links:
      - db
  # Create database container
  db:
    image: postgres:11.6-alpine
    ports:
    - "5432:5432"
    container_name: database-docker
    restart: always

The above code will create 3 containers for frontend, backend and database respectively. For creating database container, we are using postgres image which is available on docker hub.

4 - Creating containers

Now that we have all the configuration in place. We will now go ahead and create the containers. To achieve this, we will run the following command in our root folder:

docker-compose up --build

5 - Ping container from another

At this point, we have all our containers up and running. But, you might wonder, how one container can talk to another container?

Docker compose creates a network in which all our containers will reside. In other words, the heavy lifting has already been taken care of by docker. In case we want to ping a container. Lets say, our frontend container wants to use backend API, we can use our service name as the host. For eg, our backend service name is backend. So, it can be accessed by the url: http://backend/. You will see this same URL in proxy section of front end package.json .

Wrapping it up

In this blog I showed how, we can create a docker container for full stack application. If you have any doubts, you can put them in comment. I will answer them as soon as possible. The complete code can be found at my GitHub repo

siddharth-lakhara/full-stack-docker

Thanks!