Running Vite + TS React in a dev container

compose.yaml

services:
  init:
    profiles: ["init"]
    build:
      context: app
      target: init
    volumes:
      - ./app:/app
      - /app/node_modules
    command: >
      sh -c "
      if [ ! -f vite.config.ts ]; then
        echo 'Creating new Vite React+TypeScript project...'
        npm create vite@latest . -- --template react-ts
      else
        echo 'Project already exists. Skipping creation.'
      fi
      "
  dev:
    profiles: ["dev"]
    env_file:
      - .env.dev
    ports:
      - "5173:5173"
    build:
      context: app
      target: dev
    volumes:
      - ./app:/app
      - /app/node_modules
    stdin_open: true
    tty: true

Dockerfile

FROM node:20-alpine AS init
RUN mkdir /app
WORKDIR /app
COPY package.json  ./

COPY . .
FROM node:20-alpine AS dev
RUN mkdir /app
WORKDIR /app
COPY package.json  ./
RUN npm install
RUN npm ci
CMD ["npm", "run", "dev"]

gistfile1.txt

1. Create a directory called /app
2. Build the environment:
   
   `docker compose run --rm init`
   
3. Run the container:

   `docker compose up dev`