Dockerizing a full stack JS app
By: Siddharth Lakhara
Tags: Postgres, Hapi, Docker, Full Stack, React

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

Thanks!