Would you like to build a scalable full-stack app? React (frontend) + Express (backend) is a modern and robust approach. Add Docker, and your app is suddenly portable, easy to deploy, and not dependent on a specific environment.
In this tutorial, we will build a simple full-stack application with React and Express using Docker. The result will be a containerized web app that can run efficiently on both the client and the server.
Tools & Technologies
| Component | Technology Used |
|---|---|
| Frontend | React.js (Vite or Create React App) |
| Backend | Node.js with Express |
| Containerization | Docker & Docker Compose |
| Language | JavaScript (ES6+) |
Folder Structure
Create the following directory structure:
my-fullstack-app/ ├── client/ # React frontend ├── server/ # Express backend ├── docker-compose.yml
A Step-by-Step Guide for Developers
Step 1: Create the React Frontend
npx create-react-app clientInside client/src/App.js, replace with:-
importReact, { useEffect, useState } from’react’;
functionApp() {
const [message, setMessage] = useState(”);
useEffect(() => {
fetch(‘/api’)
.then(res => res.json())
.then(data => setMessage(data.message));
}, []);
return <h1>{message || ‘Loading…’}</h1>;
}
exportdefaultApp;
Step 2: Setup Express Backend
Inside the server directory, create the basic structure:-
mkdir server && cd server
npm init -y
npm install express
Then create index.js:
constexpress = require(‘express’);
constapp = express();
constPORT = 5000;
app.get(‘/api’, (req, res) => {
res.json({ message: “Hello from Express backend!” });
});
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
Step 3: Dockerize the Application
Dockerfile for React (client/Dockerfile)
FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD [“npx”, “serve”, “-s”, “build”]
You’ll need
serveas a static file server. Add it to your client package:npm install serve
Dockerfile for Express (server/Dockerfile)
At the root (my-fullstack-app/docker-compose.yml):
version: “3”
services:
client:
build: ./client
ports:
– “3000:3000”
depends_on:
– server
server:
build: ./server
ports:
– “5000:5000”
Step 5: Run Your Full Stack App
Navigate to your root directory and run:
docker-compose up --buildNow visit:
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000/api
You should see the message from Express on your React UI!
Final Thoughts:-
Docker is what you can use to containerize your React/Express full stack app and run it anywhere just like that. Today, whether you’re shipping to a cloud server, Kubernetes, or your local machine, Docker makes it all easy.
This setup is perfect for MVPs, production apps, or learning projects. Are you ready to ship it to the cloud? Check out our upcoming blog post about deploying full stack apps on AWS or DigitalOcean with Docker!
Read also:-
