In modern software development, deploying backend and frontend components simultaneously is necessary for seamless application delivery. Over the years, running both backend and frontend software involved using different services which can sometimes reduce software productivity and maintenance.

In this tutorial, you will learn how to run concurrent backed and frontend applications using Docker Compose. By reading this tutorial, I assume you have Docker installed on your computer and have basic knowledge of Docker.

What is Docker Compose?

Docker Compose is a tool used for defining and managing multi-container Docker applications. It lets developers describe a complex application setup consisting of multiple services, networks, and volumes in a simple declarative YAML (Yet Another Markup Language) file.
With Docker Compose, you can define the services your application needs, specify how they should be connected, and configure their individual settings. These services can be built from Docker images or utilize pre-existing images from public or private registries.

Setting up the applications

To demonstrate how we can run applications concurrently using Docker Compose, we will clone a GitHub project that contains a backend application built with Node.js and a frontend application built with Vue.js.
To clone the application, open your terminal and run the following commands.

git clone https://github.com/popoolatopzy/tutorial

After cloning the application, you will notice that the tutorial folder is divided into two parts: the backend, which is the Node application, and the frontend, which is the Vue application.
To install all the necessary dependence for the application on the terminal, navigate to both the backend and frontend folder and run the following command respectively:

cd tutorial
npm install

After installing all the needed dependencies for the application, open the project folder in your code editor.

Backend Dockerfile configuration

A Dockerfile contains a specific set of instructions on how to build a Docker image. It defines the environment, dependencies, and configuration of a Docker container.

In your application working directory, you must set the application environment, install necessary dependencies, and configure the application. Inside the backend folder, create Dockerfile with no extension and add the following code to the file:

FROM node:alpine
WORKDIR /backend/
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "node", "app.js" ]

The Dockerfile above sets up a Node.js environment based on the Alpine Linux distribution, installs dependencies specified in package.json using npm install, copies the application code and files to the working directory, exposes port 3000, and executes the app.js file using the node command when the container is launched.
You can test that the above docker code is correct by running the following docker build command.

docker build -t backend .

After building the docker image, run the docker image using the command below and the backend application will be up and running.

docker run -p 3000:3000 backend 

Frontend Dockerfile configuration

To run the application using Docker, you also need to create a Dockerfile in the frontend folder of your application. To do this, navigate to the src folder inside the frontend folder, create a Dockerfile file (with no extension), and add the following code.

# Use an official Node.js runtime as the base image
FROM node:alpine
RUN npm install -g http-server
# Set the working directory in the container
WORKDIR /frontend
COPY package*.json ./
# Install the application dependencies
RUN npm install
# Copy the entire application to the container
COPY . .
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist" ]

The Dockerfile above sets up a containerized environment for a frontend application(Vue), installs dependencies, builds the application, exposes port 8080, and runs an HTTP server to serve the built application from the dist directory.

Run the following docker build command to test that the above docker code is correct.

docker build -t frontend .

Next, run the command below to start the docker image, and the application will be up and running.
Creating docker-compose.yml File
So far, you created a Docker image for both the backend and frontend applications and then ran the Docker run command to start the applications, respectively. Managing more than one docker container can be hard sometimes. With Docker Compose, you can easily configure and manage multi-container with that stress using docker-compose.yml.

A docker-compose.yml file is a YAML (YAML Ain't Markup Language) configuration file used by Docker Compose, a tool for defining and running multi-container applications.
In the application root directory, create a docker-compose.yml file and add the following configuration.

version: "3"
services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - 3000:3000
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - 8080:8080

The Docker Compose configuration above represents a multi-container application comprising a backend service and a frontend service. Let's break it down:

version: "3" specifies the version of the Docker Compose file format in use.
services: defines the services within the application. In this case, there are two services: backend and frontend.
build: specifies the build configuration for each service.
context: ./backend and ./frontend set the build context to the respective directories containing the source code and Dockerfile for building each service.
dockerfile: Dockerfile specifies the name of the Dockerfile for building each service.
ports: configures port mappings for each service, allowing access to specified ports on the container from the host machine.

Running the application

Once you are done with the docker-compose.yml configuration, the you all set to running the to application using docker compose. You need to run the build command using the command below.

docker compose build

After build the docker image using compose, then you need to start the two application containers using the command below:
docker compose up
Now you show have your two servers up and running.

Conclusion

In this tutorial, you learned how to develop multiple concurrently running services. You were able to run both a Node.js application and a Vue.js application concurrently using Docker Compose.

Docker Compose is a powerful tool that enables developers to run multiple applications concurrently. By defining the services and their dependencies in a YAML file, developers can easily spin up and manage their applications in a containerized environment. This approach provides numerous benefits, including simplified development workflows, efficient resource utilization, and consistent deployment across different environments.