Im having a problem building docker for my nuxtjs app hot reload not working

user_10082280 0
Viewed 1816

Im having a problem building docker for my nuxtjs app

Im building a docker for develop my nuxt app but hot reload not working in container, shared volumes are working fine the only problem is the hot reload

my system is a windows using docker on a wsl

I added my dockerfile, docker compose and package.json files below

This is my Dockerfile

WORKDIR /usr/src/app
COPY . ./
RUN yarn install
EXPOSE 3000
ENV HOST=0.0.0.0
ENV PORT=3000
CMD [ "yarn", "dev" ]

and my docker-compose.yml

version: "3"
services:
  aplication:
    working_dir: /usr/src/app
    build:
      context: .
    volumes:
      - ./src/:/usr/src/app/src/
    image: wetrack-nuxt
    environment:
      - CHOKIDAR_USEPOLLING=true
      - NODE_ENV=development
    ports:
      - 3000:3000

This is my package.json

{
  "name": "minton",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^22.0.0",
    "@ckeditor/ckeditor5-vue": "^1.0.2",
    "@fullcalendar/bootstrap": "^5.3.0",
    "@fullcalendar/core": "^5.3.0",
    "@fullcalendar/interaction": "^5.3.0",
    "@fullcalendar/list": "^5.3.0",
    "@fullcalendar/timegrid": "^5.3.0",
    "@fullcalendar/vue": "^5.3.0",
    "@nuxtjs/axios": "^5.13.6",
    "apexcharts": "^3.20.0",
    "bootstrap": "^4.5.0",
    "bootstrap-vue": "^2.15.0",
    "c3": "^0.7.20",
    "chart.js": "^2.9.3",
    "chartist": "^0.11.4",
    "firebase": "^7.19.1",
    "nuxt": "^2.14.0",
    "nuxt-i18n": "^6.15.0",
    "simplebar-vue": "^2.0.0-beta.4",
    "sweetalert2": "^9.17.1",
    "v-click-outside": "^3.1.0",
    "v-mask": "^2.2.3",
    "vue-apexcharts": "^1.6.0",
    "vue-c3": "^1.2.11",
    "vue-chartist": "^2.3.1",
    "vue-chartjs": "^3.5.1",
    "vue-count-to": "^1.0.13",
    "vue-draggable": "^2.0.6",
    "vue-easy-lightbox": "^0.14.0",
    "vue-form-wizard": "^0.8.4",
    "vue-knob-control": "^1.6.0",
    "vue-multiselect": "^2.1.6",
    "vue-number-input-spinner": "^2.2.0",
    "vue-quill-editor": "^3.0.6",
    "vue-slide-bar": "^1.2.0",
    "vue-string-filter": "^2.1.0",
    "vue-switches": "^2.0.1",
    "vue-tour": "^1.5.0",
    "vue2-datepicker": "^3.6.2",
    "vue2-dropzone": "^3.6.0",
    "vue2-google-maps": "^0.10.7",
    "vuelidate": "^0.7.5",
    "vuex": "^3.5.1"
  },
  "devDependencies": {
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.1"
  }
}
nuxt.js docker-compose docker
2 Answers

This is my docker-compose as an example, I just need to set volumes right and it worked

services:
  nuxt-app:
    build: .
    container_name: nuxt-app

    restart: unless-stopped
    ports:
      - '3333:3333'
    environment:
      - NUXT_PORT=3333
    command: 'yarn dev'
    volumes:
      - ./:/app
    networks:
      - nuxt-network
networks:
  nuxt-network:
    driver: bridge

My Dockerfile:

FROM node:14.17.5

ENV NODE_ENV=development

WORKDIR /app

EXPOSE 3333

COPY package.json yarn.lock* ./

RUN yarn

ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3333

ENV PATH=./node_modules/.bin/:$PATH

COPY . .

CMD ["yarn", "dev"]
user_100718390

I solved my problmem removing

 build: {
    babel: {
      compact: true
    }
  }

form my nuxt.config.js

user_100822800
Related