ホーム > react-server > How to Set Up a react-server Environment Using Docker
react-server

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.

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.

https://react-server.dev/

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.

Decided: Node.js Version Management with Volta

Please Provide Feedback
We would appreciate your feedback on this article. Feel free to leave a comment on any relevant YouTube video or reach out through the contact form. Thank you!