Docker Compose Example in React & Node.js

I could start by explaining what React is or how to create a REST API server in Node. But you probably already know this! (If not, consider checking out 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 start with a quick overview. It’s a handy tool that lets you run multiple Docker containers together effortlessly. Rather than starting each container one by one, you can define everything in a single file and launch it all with one command.

Docker Compose helps manage your applications and keeps things organized in your project!

But… how do you use it for a full-stack project?

Imagine using React to display data coming from your REST API backend - though, as a full-stack developer, you’ve probably already worked on a project like this!

Usually, you need two terminals open - one for the frontend and one for the backend. Sometimes you forget to run one of them, keep seeing errors, and only later realize… ah, that’s why!

With Docker Compose, you can solve all those issues - and you’ll even feel like a 10x dev, setting everything up with a single command.

Here’s 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 the app in action, 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
# input: y        

cd backend;
npm run dev;        

These commands will get our Express.js server up and running. You can verify it by visiting http://localhost:8080/api/v1/example.

Now that we’ve confirmed both our frontend and backend are A-okay, we can add another backend Dockerfile and move on 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" ]        

Would you like to see how it all comes together? Continue with Step 3 on our blog! 🚀