I'm developing an application with this stack (main things): Django, Vuejs.
I write code both from my personal computer which runs Windows and my working one which has Ubuntu.
It used to be working similarly until I decided to upgrade some of the libraries of the frontend of my application from my working laptop (Ubuntu). Everything was working fine and since I run my application with docker-compose, I supposed it would work the same on my Windows computer (since the application is running with Docker..eh...).
I kept working from my pro laptop (Ubuntu) and one day I decided to code from my personal one. And at that moment I realized that the frontend was kinda broken...
The problems are :
- Hot reload of my vuejs application no longer work when running under docker on Windows (Docker Desktop last version and WSL 2 latest stable release 1.0.0).
- It takes ages for my application to start under development server (when running
npm run serve).
Whereas on my Ubuntu laptop it's still smooth and hot reload works.
The thing is that, when upgrading the frontend, I scaffolded a new project with Vue CLI to have a clean structure and dependencies, just reinstalled what I needed and moved my code (it was working..). But now I have no idea what could be the root cause because, again, it's working with my Ubuntu machine !
For more information here is my package.json, maybe there is something in it that is well known to cause issues :
{
"name": "frontend",
"version": "0.4.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@mdi/font": "^5.8.55",
"@tiptap/extension-highlight": "^2.0.0-beta.199",
"@tiptap/extension-image": "^2.0.0-beta.199",
"@tiptap/starter-kit": "^2.0.0-beta.199",
"@tiptap/vue-2": "^2.0.0-beta.199",
"apexcharts": "^3.26.0",
"axios": "^0.21.1",
"core-js": "^3.8.3",
"echarts": "^5.3.3",
"vue": "^2.7.10",
"vue-apexcharts": "^1.6.0",
"vue-axios": "^3.2.4",
"vue-echarts": "^6.2.3",
"vue-moment": "^4.1.0",
"vue-multiselect": "^2.1.6",
"vue-router": "^3.5.1",
"vue-smooth-dnd": "^0.8.1",
"vuetify": "^2.6.10",
"vuetify-dialog": "^2.0.14",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-e2e-cypress": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-unit-jest": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/test-utils": "^1.1.3",
"@vue/vue2-jest": "^27.0.0-alpha.2",
"babel-jest": "^27.0.6",
"cypress": "^9.7.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"prettier": "^2.4.1",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"vue-cli-plugin-vuetify": "~2.5.8",
"vue-template-compiler": "^2.6.14",
"vuetify-loader": "^1.7.0"
}
}
Also here is my Dockerfile :
FROM node:16.17
WORKDIR /frontend
COPY package*.json /frontend/
RUN npm install
COPY . .
CMD ["npm", "run", "serve"]
And the docker-compose part related to my frontend :
frontend:
container_name: app_dev_frontend
build:
context: ./frontend
dockerfile: Dockerfile.dev
environment:
- CHOKIDAR_USEPOLLING=true
volumes:
- ./frontend:/frontend
ports:
- 8081:8080
depends_on:
- db
- mailhog
- backend
If someone has hints for me to look at, or things I should check,... you are very welcome because I feel a bit lost on this issue. For me running things under Docker should not lead to such problems. If it works on my Ubuntu machine, running my docker-compose application should work on another machine, even if the host is running another operating system. It's the purpose of Docker right ?
Thanks in advance for your help.
