Skip to main content
There are two ways to run the application locally: using Docker Compose (recommended) or running the client and server manually.

​
Quick Start with Docker Compose

Docker Compose is the recommended approach as it mirrors the production environment and requires minimal setup.
The easiest way to run the entire application is using Docker Compose:
1

Start the application

From the project root directory, run:
docker compose up
To run in detached mode (background):
docker compose up -d
2

Access the application

Once the container is running, the application will be available at:
http://localhost:5000
The Docker setup serves the built React frontend through the Express backend on port 5000.
3

View logs (if running in detached mode)

docker compose logs -f
4

Stop the application

docker compose down
The Docker Compose setup builds the React app in production mode, so you won’t have hot reloading. For active development with hot reloading, use the manual development approach below.

​
Manual Development Setup

The recommended approach for active development is to run the frontend and backend in separate terminal windows.

​
Terminal 1: Backend Server

1

Navigate to server directory

cd server
2

Start the Express server

node index.js
You should see:
✅ Server running on port 5000

​
Terminal 2: Frontend Development Server

1

Navigate to client directory

cd client
2

Start the React development server

npm start
The React app will automatically open in your browser at http://localhost:3000
The React development server includes hot module replacement (HMR), so your changes will be reflected immediately without refreshing the page.

​
Ports and URLs

Frontend (Development)

Port: 3000URL: http://localhost:3000Hot Reloading: Yes

Backend (Express)

Port: 5000URL: http://localhost:5000API Endpoint: http://localhost:5000/
The backend port can be changed by setting the PORT environment variable:
PORT=8000 node server/index.js

​
Verifying the Setup

1

Check backend is running

Open your browser or use curl to test the backend:
curl http://localhost:5000
You should see:
Hello, This is from Mini project Deployment!
2

Check frontend is running

Navigate to http://localhost:3000 in your browser. You should see the React application.
3

Verify CORS is working

The backend has CORS enabled, so the React app can make requests to the Express server without issues.CORS configuration in server/index.js:5:
app.use(cors());

​
Troubleshooting

If port 3000 or 5000 is already in use:For React (port 3000):
# Find and kill the process
lsof -ti:3000 | xargs kill -9
For Express (port 5000):
# Find and kill the process
lsof -ti:5000 | xargs kill -9

# Or use a different port
PORT=8000 node server/index.js
If you see module not found errors, ensure dependencies are installed:
# Install client dependencies
cd client && npm install

# Install server dependencies
cd ../server && npm install
If Docker Compose fails:
# Check Docker is running
docker ps

# Rebuild the image
docker compose build --no-cache

# Check logs for errors
docker compose logs

​
Development Workflow

1

Start both servers

Use the split terminal approach to run both frontend and backend simultaneously.
2

Make changes

  • Frontend changes auto-reload via React’s HMR
  • Backend changes require restarting the server (consider using nodemon for auto-restart)
3

Test your changes

Run tests frequently to catch issues early:
cd client && npm test
4

Build before deploying

Always build and test before deployment:
cd client && npm run build
docker compose up --build
Consider adding nodemon to your server dependencies for automatic server restarts during development:
cd server
npm install --save-dev nodemon
Then run: npx nodemon index.js

​
Next Steps

Testing

Learn how to run and write tests for the application

Docker Deployment

Deploy your application using Docker

Build docs developers (and LLMs) love

Get started for freeTalk to us