How to Set Up a react-server Environment Using Docker
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
This article summarizes how to set up a development environment for the React framework called react-server using Docker.
What is react-server?
react-server
is a new React framework.
It provides only the necessary components such as React Server Components, making it a smaller framework compared to Next.js.
It uses Vite, allowing for lightweight and fast development.
Setting Up the Environment Using Docker
Here, we will proceed until we display "Hello World."
Following these steps, the development server will be available at localhost:8080
.
If you change the specified port 8080
to another number, you can use any port of your choice.
Final Directory Structure
REACT-SERVER-APP
├── docker/
│ └── app/
│ └── Dockerfile
├── react-server/
│ ├── .react-server/
│ ├── node_modules/
│ ├── App.jsx
│ ├── package-lock.json
│ ├── package.json
├── docker-compose.yml
docker-compose.yml
version: "3.7"
services:
app:
build:
context: .
dockerfile: ./docker/app/Dockerfile
container_name: react-server
ports:
- "8080:3000"
volumes:
- ./react-server:/home/node/app
environment:
- NODE_ENV=development
tty: true
stdin_open: true
docker/app/Dockerfile
FROM node:22-alpine
WORKDIR /home/node/app
RUN apk update
EXPOSE 3000
Commands
docker compose up -d
Once the container is up, run:
docker compose exec app sh
npm install @lazarv/react-server
react-server/App.jsx
export default function App() {
return <h1>Hello World</h1>
}
react-server/package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "react-server ./App.jsx --port 3000 --host 0.0.0.0", // Added
},
Running the Development Server
docker compose exec app sh
npm run dev
Access http://localhost:8080/
and if "Hello World" is displayed, the setup is successful!
Thoughts So Far
The local server starts up quickly, which feels great.
Vite is really nice.
Alternatives to Docker
Using a Node.js version management tool like Volta allows for an even easier setup.
If you want to try it out but are hesitant because you’re afraid of changing your local Node.js version, looking into Volta might be beneficial.