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
-w /app
= WORKDIR /app
-v "$(pwd):/app"
= volumes .:/app
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
- Project name: react-app-demo
- Select a framework: React
- 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.