Software engineering notes

React.js

Develop react.js without node.js

1 ) Initialize a react app

Run a node container to install react app. It’s important to mount the current work space to container volume so that the created react app folder will be in local folder as well.

Run docker container run -it -v "$(pwd):/app" -w /app node:22 bash

Then you will enter the container.

Next, we are going to use the vite to create react app. Please follow below:

Run npm create vite@latest in the container and finish below

  1. Project name: react-app-demo
  2. Select a framework: React
  3. Select a variant: TypeScript

Run:

cd react-app-demo
npm install
npm run dev

Once you see something like below in the console, it means that the react is running successfully and you can quit the container.

  VITE v5.4.7  ready in 124 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

2 ) Create docker files in react app folder

Dockerfile:

FROM node:22
WORKDIR /app
COPY . .
RUN npm install
EXPOSE 5173
CMD ["npm", "run", "dev", "--", "--host"]

The default port of the app is :5173. Let’s not change it for now to keep it simple.

docker-compose.yml:

services:
  react-app:
    build: .
    ports:
      - "5173:5173"
    volumes:
      - .:/app

Run docker compose up

Open your browser and enter http://localhost:5173/

If you see Vite + React in the page, it means that you are running react on your local successfully.