generate_react_app.md

Generate a react app with docker and vite

To generate a react app using vite, just run the following command in a shell.

docker run --rm -it --user node  -w /app -v ${PWD}:/app node:18-slim npm create vite

Then you might add the following Dockerfile.dev to the project:

FROM node:18-slim as node

LABEL maintainer="Yout Name <[email protected]>"

WORKDIR /app

RUN chown node:node -R /app

USER node

COPY --chown=node:node package* ./
RUN npm install
COPY --chown=node:node . .

EXPOSE 5173

CMD ["npm", "run", "dev"]

And if you use docker-compose you might want to add the following docker-compose.yml file to the project:

version: '3.4'

services:
  frontend:
    container_name: react-crash-course
    image: react-crash-course
    build:
      context: ./
      dockerfile: ./Dockerfile.dev
      target: node
    ports:
      - 5173:5173
    volumes:
      - .:/app
      - /app/node_modules
    tty: true

It's important to highlight that to communicate from the host to the vite server runing on docker, you need to add the --host flag to the vite command inside the package.json file as follow:

  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview"
  },

Finally you can start the project just running:

docker-compose up