Docker-compose for React, changes reflect real-time inside a container

4 min readJun 16, 2021

Build the docker image and run the container with a single command.

Previously we learned how to use Dockerfile to create docker images and then run docker containers. In this article, we will learn how to use a single file (called docker-compose) to build and run dockerized react application.

Docker Compose:

A Docker compose is a tool that is built on top of the docker engine. It makes it incredibly easy to start applications with multiple containers. With a single docker-compose.yml file, you can start, stop and rebuild services. You can also view the status of running services and stream the log output of the running services.
Docker Compose basically involves the following three steps:

Define the application environment with a Dockerfile so it can be reproduced anywhere.
Define the services that are used by your application in a docker-compose.yml file so they can be run together in an isolated environment.
Run docker-compose up to run your entire application.

One of the downsides of running the docker container with the docker image(that we have done previously) is the ridiculously long docker run command that we have to execute at the terminal. So, the main purpose of docker-compose is to make executing docker run easier.

Install Docker Compose:

First, we have to download and install docker-compose on our local machine. Follow the below link:

Install Docker Compose

Once you install the docker-compose, you can verify by typing the following command in your terminal:

docker-compose -v

If docker-compose is installed successfully, you will get the version like below:

Writing docker-compose file:

First, go to the same react project that we have developed previously. There you have the Dockerfile.dev file which we created. We will use the same file to build the docker image. Now, I will write the docker-compose file first and then will explain to you every line. So, at the root of the project, create a new file named docker-compose.yml:

Docker-compose file for react application.

version: “3.7”Docker uses different versions to make docker images and run docker containers. You can check the list.
services define what different containers we will be using/launching under the specific docker service. Currently, we only have one service named web.
webis the name of docker service.
container_name is the docker container name that will be launched when we execute this docker-compose file.
build object contains two properties, context, and docker file. The context is used for the location (path)of the docker file and the other is for the docker-compose filename. If you use Dockerfile (not Dockerfile.dev) that you only need to write build .
ports array is used for port mapping. 3000:3000 means host machine port:Docker container port.
volumes array is used for volume mapping. On line 12, it explains not to copy the node_modules folder. On line 13, it explains to copy all files and folders to the docker container inside the app folder.