Is there a better way to setup a local docker env. for local development?

[ohmeow]

So its been awhile since i've spun up quasar within docker for local development. After battling things for a few hours ... this is what I came up with. But I'm wondering ... is there a better way (and why in the hell do i have to include index.html for things to work :))?

Dockerfile.dev:

FROM node:22-alpine
WORKDIR /app

# install project dependencies
COPY package*.json quasar.config.ts .npmrc index.html  ./
RUN npm i

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# configre default/required environmental variables
ENV PATH /app/node_modules/.bin:$PATH

CMD ["npx","quasar", "dev"]

docker-compose.dev.yaml

frontend:
    container_name: gp-frontend-vue
    image: gp/frontend-vue:latest
    pull_policy: never
    env_file:
      - .env
    build:
      context: ./frontend-vue
      dockerfile: Dockerfile.dev
    volumes:
      - ./frontend-vue:/app:cached
      - /app/node_modules
    ports:
      - "8080:8080"
      - "9229:9229"
    environment:
      - NODE_ENV=development
    command: ["npx", "quasar", "dev", "-p", "8080"]

If anyone has any thoughts on how to improve this I'd love to hear. Thanks much!

[TobyMosque]

i don't think u need to copy quasar.config.ts and index.html.

anyway, u're running the quasar dev command twice, so probably u'll wanna to refactory u dockerfile to something like that:

frontend-vue/.Dockerfile

FROM node:lts-alpine as global-deps-stage
RUN npm i --location=global @quasar/cli@latest

FROM global-deps-stage as develop-stage
WORKDIR /src
COPY package.json yarn.lock ./
COPY . .

FROM develop-stage as local-deps-stage
RUN yarn

FROM local-deps-stage as build-stage
CMD ["quasar", "build"]

FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /src/dist/ssr /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

dev compose

services:
  app:
    build:
      context: .
      dockerfile: frontend-vue/.Dockerfile
      target: develop-stage
    volumes:
      - ./frontend-vue:/src
    env_file:
      - .env
    ports:
      - "8080:8080"
      - "9229:9229"
    command: /bin/sh -c "yarn & quasar dev"

prod compose

services:
  app:
    build:
      context: .
      dockerfile: frontend-vue/.Dockerfile
      target: production-stage
    volumes:
      - ./frontend-vue:/src
      - frontend-vue:/app
    env_file:
      - .env
    ports:
      - "80:80"
    
volumes:
  frontend-vue:

[ohmeow]

Yah I tried taking it out but no glory. I have to include all those files to get things running correctly in docker for a local environment where i need hot reloading, etc... It's really weird why those files have to be copied over first for things to work but I guess that is what it is :)

The command in the docker-compose file overrides the CMD in the Dockerfile so I don't think that is the issue.

Thanks for the reply btw!