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

Thanks!

--

--

--

Full stack developer @Cisco, Ex-@McKinsey | Bibliophile | Coder by heart | Opinions are mine

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Wk5–6 Makers Academy: “You’re so far past the line, you can’t even see the line.

Meeting VS Code’s one and only Emmet

Testnet Guide — KYVE

Istio as an Example of When Not to Do Microservices

My Friend Larry

Python Tortoise ORM Integration with FastAPI

Spring Cloud Config| Configuring Random Values in properties.

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Siddharth Lakhara

Siddharth Lakhara

Full stack developer @Cisco, Ex-@McKinsey | Bibliophile | Coder by heart | Opinions are mine

More from Medium

Connect MongoDB to Your React Project

How to code a complete task management tool with Next.js and Altogic?

An introduction to GraphQL with Node.js

[Tip For Developer] Surfing the website that needs custom-host without manually customizing the…