Skip to main content
This guide will help you set up your development environment to work with the React + Express DevOps Mini Project.

​
Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js 18+

Required for running both frontend and backend

Docker

Optional, but recommended for containerized development

npm/yarn/pnpm

Package manager for installing dependencies

Git

For cloning the repository
This project uses Node.js 18 Alpine in its Docker configuration. We recommend using Node.js 18 or higher for local development.

​
Cloning the Repository

1

Clone the repository

Clone the project to your local machine:
git clone <repository-url>
cd react-express-devops-mini
2

Verify directory structure

Ensure you see the following structure:
.
├── client/          # React frontend
├── server/          # Express backend
├── Dockerfile
├── docker-compose.yml
└── Jenkinsfile

​
Installing Dependencies

The project has two separate directories with their own dependencies: client (React frontend) and server (Express backend).
1

Install frontend dependencies

Navigate to the client directory and install dependencies:
cd client
npm install
This will install the following key dependencies:
  • React 19.2.0
  • React Scripts 5.0.1
  • Testing Library packages (@testing-library/react, @testing-library/jest-dom)
  • Web Vitals
2

Install backend dependencies

Navigate to the server directory and install dependencies:
cd ../server
npm install
This will install the following key dependencies:
  • Express 5.1.0
  • CORS 2.8.5
3

Verify installation

Verify that both node_modules directories were created:
ls client/node_modules
ls server/node_modules

​
Docker Setup (Optional)

If you prefer to use Docker for development:
1

Verify Docker installation

Ensure Docker and Docker Compose are installed:
docker --version
docker compose version
2

Build the Docker image

From the project root directory:
docker compose build
This builds a multi-stage Docker image that:
  1. Builds the React frontend
  2. Installs backend dependencies
  3. Creates a production-ready image

​
Environment Configuration

The application uses default configurations that work out of the box:
The React app runs on the default Create React App development server:
  • Port: 3000 (default)
  • Hot reloading: Enabled
  • Proxy: Not configured (CORS enabled on backend)
The Express server uses the following configuration:
  • Port: 5000 (configurable via PORT environment variable)
  • CORS: Enabled for all origins in development
  • Environment: Uses process.env.PORT || 5000

​
Next Steps

Running Locally

Learn how to run the application in development mode

Testing

Understand the testing setup and how to run tests

Build docs developers (and LLMs) love

Get started for freeTalk to us