Join JS Mastery Pro to apply what you learned today through real-world builds, weekly challenges, and a community of developers working toward the same goal.
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!
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!
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"]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: ycd 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" ]name: development
services:
frontend:
build: ./frontend
working_dir: /app
ports:
- "5173:5173"
volumes:
- ./frontend:/app
- /app/node_modules
environment:
- CHOKIDAR_USEPOLLING=true
command: npm run dev -- --host 0.0.0.0
backend:
build: ./backend
volumes:
- ./backend:/app
- /app/node_modules
ports:
- "8080:8080"This Docker compose setup will allow us to:
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:
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 😊