Docker Compose Example in React & Node.js

I could start by explaining what React is. I can also talk about how to create a REST API server in Node. However, you probably already know this. If you don't, consider signing up for these courses: Backend Course and React Course😉.

So, since you are here, you are most likely wondering how to use Docker Compose… let’s jump right in!

What is Docker Compose?

To understand how Docker Compose works, let’s give a bit of a info about it. It’s a handy tool that makes it easy to run multiple Docker containers together. Instead of starting each container one by one, you can define everything in a simple file and launch it all with a single command.

TLDR; Docker Compose helps managing your applications and keep things organized in your project!

But… how to utilize it for your full stack project.

Imagine you are using React for displaying all the data that is coming from your REST API backend (90% sure you don’t have to imagine, as a full stack dev as yourself, you’ve worked on such a project).

Usually you have to have 2 terminals open, 1 for the frontend and 1 for the backend. Then you sometimes forget to run 1 of those projects, keep seeing errors, not sure why and then remember…ah…

With Docker Compose, you basically solve those issues, plus you seem like a 10x dev using a single command to set everything up. Here are the steps on HOW!

Step 1

Let’s first create our main folder and a simple Vite app. We can do that using the command:

mkdir docker-compose-showcase;
cd docker-compose-showcase;
npm create vite@latest frontend -- --template react;
# make sure you choose React
cd frontend;
npm i;
npm run dev;

To see our app in action, you can open your browser at this URL http://localhost:5173/.

Now that we have confirmed our app is working, we can create our Dockerfile.

# frontend/Dockerfile
FROM node:20-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install
COPY . .

EXPOSE 5173

CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

Step 2

Now that we have the frontend setup, let’s get the backend API server ready in our main project folder.

npx startex backend;
# input: backend
# input: JavaScript
# input: n
# input: n
# input: n
# intput: y

cd backend;
npm run dev;

These commands will get our Express.js server up and running. We can check that by going to http://localhost:8080/api/v1/example.

Now that we are sure both, our frontend and backend are a-okay, we can just add another backend Dockerfile and be off to creating the Docker compose file.

FROM node:20-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install --omit=dev

COPY src ./src

EXPOSE 8080

CMD [ "npm", "run", "dev" ]

Step 3

name: development
services:
  frontend:
    build: ./frontend
    working_dir: /app
    ports:
      - "5173:5173"
    volumes:
      - ./frontend:/app
      - /app/node_modules
    environment:

This Docker compose setup will allow us to:

• Run both servers at the same time with a single command
• Have the same development environment across all devices
• See changes in real time while developing

You might be wondering “But Adrian, if a Docker image is being built, when I change the code, how can I see the changes?”, and that is a completely valid question. As you can see, we have specified the volumes so that the code on your host machine (./frontend and ./backend) is mounted directly into the containers at /app. Even though the image was built once, the container is actually running the code from your local filesystem.

Whenever you make changes to your code, Docker immediately reflects those changes inside the container.

Some other possible use-cases:

• Spin up a copy of your app stack that mirrors production, but runs on staging servers
• Let QA teams test new features in an isolated environment
• Spin up short-lived environments on demand for feature branches

Congratulations!

Now you know how and when to utilize Docker Compose, so go out there and show your knowledge!

If you create a project using knowledge from this or any other blog, tag me; I’d love to check it out! It’s always great to see the things I share being put into real projects 😊