Vite and Docker

[louiss0]

Describe the bug

vite and docker dont seem to work well together every time i develop with both the browser reloads every minute. The browser reloads up to five time per initial load . Also the server crashes at random times during development .

Reproduction

https://github.com/louiss0/vue-2-template

System Info

docker-desktop 3.35

Used Package Manager

npm

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[akauppi]

@louiss0 's description maybe needs some editing, to be reproducible.

I'm also setting up Vite HMR with Docker Compose. The part where it still fails is HMR - I just don't get any changes to the browser, if Vite is being run under Docker. If I run it natively, HMR works like magic.

This issue: Vite hmr does not work in Docker was specifically about HMR but is now closed.

Want to help solving these issues. My work is currently uncommitted, but will be available and reproducible soon.

[paulocastellano]

It still without solution?

[JosephusPaye]

I had the same problem and was able to fix it by setting a custom HMR port and exposing that port from the docker container.

• Set Vite's server.hmr.port config option to the port you want to use for HMR:

export default defineConfig({
  server: {
    hmr: {
      port: 3010,
    },
  },
  // other options...
})

• Expose the HMR port when running the docker container: (here I'm using docker-compose)

docker-compose run \
  -p 3000:3000 \       # my dev server port (not needed if you're not using port 3000)
  -p 3010:3010 \       # the HMR port
  webservice \
  yarn dev

[louiss0]

Thanks I'll try it

On Tue, Nov 30, 2021 at 10:57 PM Josephus Paye II @.***> wrote:

I had the same problem and was able to fix it by setting a custom HMR port and exposing that port from the docker container.

• Set Vite's server.hmr.port config option to the port you want to use for HMR:

export default defineConfig({ server: { hmr: { port: 3010, }, }, // other options...})

• Expose the HMR port when running the docker container: (here I'm using docker-compose)

docker-compose run
-p 3000:3000 \ # my dev server port (not needed if you're not using port 3000) -p 3010:3010 \ # the HMR port webservice
yarn dev

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/vitejs/vite/issues/4116#issuecomment-983261927, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG5PB6IKXSJ7ZTR6PQAEPKDUOWMI7ANCNFSM47ZSB7BQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[mlaopane]

Thanks @JosephusPaye ❤️

In my case I was also overriding the host with 0.0.0.0 so I had configure it too :

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    hmr: {
      host: '0.0.0.0',
      port: 3010,
    },
  },
  // other options...
});

[louiss0]

Thanks, I'll check it out.

On Thu, Dec 16, 2021 at 7:17 PM Mickaël @.***> wrote:

Thanks @JosephusPaye https://github.com/JosephusPaye ❤️

In my case I was also overriding the host with 0.0.0.0 so I had configure it too :

export default defineConfig({

server: {

hmr: {

  host: '0.0.0.0',

  port: 3010,

},

},

// other options... })

— Reply to this email directly, view it on GitHub https://github.com/vitejs/vite/issues/4116#issuecomment-996296861, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG5PB6PWJLFZEMPW6V6MKMTURJ6R3ANCNFSM47ZSB7BQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>

[bluwy]

It's hard to "take action" on this issue as it's mostly an issue with Vite's behaviour and Docker not playing well together. It may be better to document the solutions instead. Feel free to contribute to the docs if y'all are familiar with setting Docker up with Vite!

[louiss0]

I know I wish there was a section for how to use vite with docker thanks for the help

On Wed, May 18, 2022 at 12:23 PM MonsieurLeSuisse @.***> wrote:

When running Vite on Windows Subsystem for Linux (WSL) 2 or Docker, if the project folder resides in a Windows filesystem, you'll need to set the server.watch option to { usePolling: true }. in vite.config.js. The issue is that vite doesn't watch the files for changes at all thus the HMR cannot not work. This is well docuemnted in the Vite config docs: https://vitejs.dev/config/#server-watch

In this case no other settings (hmr.port, ENTRYPOINT/npm rebuild esbuild etc) are required to enable page-auto-reload on file/code change.

— Reply to this email directly, view it on GitHub https://github.com/vitejs/vite/issues/4116#issuecomment-1130227426, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG5PB6PN4D4GMLS4A63CEPDVKUKQTANCNFSM47ZSB7BQ . You are receiving this because you were mentioned.Message ID: @.***>

[github-actions[bot]]

Hello @louiss0. We like your proposal/feedback and would appreciate a contribution via a Pull Request by you or another community member. We thank you in advance for your contribution and are looking forward to reviewing it!

[louiss0]

Happy to help! I'm fine with windicss but I'm noticing that the value in braces syntax is not working

On Sun, May 22, 2022, 8:45 AM github-actions[bot] @.***> wrote:

Hello @louiss0 https://github.com/louiss0. We like your proposal/feedback and would appreciate a contribution via a Pull Request by you or another community member. We thank you in advance for your contribution and are looking forward to reviewing it!

— Reply to this email directly, view it on GitHub https://github.com/vitejs/vite/issues/4116#issuecomment-1133888611, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG5PB6MHY55RMDJ6L6QRRPLVLIT5XANCNFSM47ZSB7BQ . You are receiving this because you were mentioned.Message ID: @.***>

[jonathan-f-silva]

I finally did it! HMR reloading with Nginx reverse proxy and Docker Compose!

• server key on vite.config.js for using port 3101 for HMR

server: {
  host: true,
  hmr: {
    port: 3101,
  },
}

• NGINX reverse proxy: add a upstream and server for the HMR port, ui being the vite server on docker compose
  • Reference: https://www.tutorialspoint.com/how-to-configure-nginx-as-reverse-proxy-for-websocket

upstream ui {
  server ui:3000;
}
upstream hmr {
  server ui:3101;
}
server {
  listen 80;
  location / {
      proxy_pass http://ui;
  }
}
server {
  listen 3101;
  location / {
      proxy_pass http://hmr;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
  }
}

• Docker Compose setup

services:
  reverse-proxy:
    build: reverse-proxy
    ports:
      - 80:80
      - 3101:3101
  ui:
    build: ui
    ports:
      - 3000
      - 3101

[louiss0]

I finally did it! HMR reloading with Nginx reverse proxy and Docker Compose!

• server key on vite.config.js for using port 3101 for HMR

server: {
  host: true,
  hmr: {
    port: 3101,
  },
}

• NGINX reverse proxy: add a upstream and server for the HMR port, ui being the vite server on docker compose

  • Reference: https://www.tutorialspoint.com/how-to-configure-nginx-as-reverse-proxy-for-websocket

upstream ui {
  server ui:3000;
}
upstream hmr {
  server ui:3101;
}
server {
  listen 80;
  location / {
      proxy_pass http://ui;
  }
}
server {
  listen 3101;
  location / {
      proxy_pass http://hmr;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
  }
}

• Docker Compose setup

version: '3.9'
services:
  reverse-proxy:
    build: reverse-proxy
    ports:
      - 80:80
      - 3101:3101
  ui:
    build: ui
    ports:
      - 3000
      - 3101

Can I get the files for this I tried setting this up myself but I'm confused and stuck

[louiss0]

Awesome! Can you send me the files plz

On Fri, May 27, 2022, 6:46 PM Jonathan Ferreira @.***> wrote:

I finally did it! HMR reloading with Nginx reverse proxy and Docker Compose!

• server key on vite.config.js for using port 3101 for HMR

server: { host: true, hmr: { port: 3101, },}

• NGINX reverse proxy: add a upstream and server for the HMR port, ui being the vite server on docker compose
  • Reference: https://www.tutorialspoint.com/how-to-configure-nginx-as-reverse-proxy-for-websocket

upstream ui { server ui:80; }upstream hmr { server ui:3101; }server { listen 80; location / { proxy_pass http://ui; } }server { listen 3101; location / { proxy_pass http://hmr; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } }

• Docker Compose setup

version: '3.9'services: reverse-proxy: build: reverse-proxy ports: - 80:80 - 3101:3101 ui: build: ui ports: - 3000 - 3101

— Reply to this email directly, view it on GitHub https://github.com/vitejs/vite/issues/4116#issuecomment-1140086315, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG5PB6MNCW4ZUBMKID7HYQLVMFGE3ANCNFSM47ZSB7BQ . You are receiving this because you were mentioned.Message ID: @.***>

[jonathan-f-silva]

@louiss0 I made a repo with a example explaining it on https://github.com/jonathan-f-silva/vite-docker-hmr-dev-base. Feel free to ask anything if unclear! :+1:

[koyadume]

I have been running vite dev server behind nginx proxy on docker and kubernetes for a long time without facing any of the issues which have been described in various threads. I even documented some suggestions in https://github.com/vitejs/vite/discussions/8780 to make life of a developer easy for running vuejs apps in docker / kubernetes.

There is no reason why hmr should use a different host / port than the values used to access the application on the browser side. If vuejs/vite uses location.host and location.port for hmr host and port respectively then whole hmr section can be eliminated.

[aspiiire]

Any update? I don't want to add Nginx

[torenware]

I have been running vite dev server behind nginx proxy on docker and kubernetes for a long time without facing any of the issues which have been described in various threads. I even documented some suggestions in #8780 to make life of a developer easy for running vuejs apps in docker / kubernetes.

Having looked at this a bit: it would be helpful if you posted a working configuration somewhere. I looked at #8780; I was not able to get that approach to work.

[tony19]

Checkout the examples at https://github.com/sapphi-red/vite-setup-catalogue

[torenware]

Checkout the examples at https://github.com/sapphi-red/vite-setup-catalogue

These diagrams are very useful, thank you.

I just got the reverse proxy working with websockets and SSL, and will write it up soon. I also needed to add polling for bind mounts, since Vite doesn't notice otherwise that the bind mount has changed.

[torenware]

I've spent the last week working on this issue, and have a demo repo up. I've also written this up in a series of Medium articles. In general, people who commented in this issue here helped me a lot in getting things to work.

[iamjohnmills]

I was having this issue with Docker/vite. Here's what worked for me in my vite.config.ts file:

  server: {
    port: 3000,  // exposed docker image port
    host: true,
    hmr: {
      port: 3001, // exposed docker image port
      clientPort: 5001, // mapped docker container port
    },
  },

I didn't really want to put the docker container port in the config, but it does work now.

[louiss0]

Ok, thanks.

On Fri, Aug 19, 2022, 7:39 PM John Mills @.***> wrote:

I was having this issue with Docker/vite. Here's what worked for me in my vite.config.ts file:

server: { port: 3000, // exposed docker image port host: true, hmr: { port: 3001, // exposed docker image port clientPort: 5001, // mapped docker container port }, },

I didn't really want to put the docker container port in the config, but it does work now.

— Reply to this email directly, view it on GitHub https://github.com/vitejs/vite/issues/4116#issuecomment-1221171454, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG5PB6KVXPQFPEMM63VLYWLV2ALLRANCNFSM47ZSB7BQ . You are receiving this because you were mentioned.Message ID: @.***>

[4iloveg]

I have tried many combinations. This worked for me: server: { port: 3000, host: true, hmr: { host: 'localhost', }, },

Docker-compose: ports: - "3000:3000"

[akauppi]

I still think a better explanation of the bug / problem is needed.

My config (below) works without needing to define hmr. I don't use any Nginx proxy in between. If that is part of the problem, it should be mentioned in the title / description. @louiss0 changing the title to "Vite and Docker and Nginx" would be a start.

server: {
  host: true,   // needed for the DC port mapping to work
  strictPort: true,
  port: 3000
}

• Vite 3.1.0-beta.1
• Docker Desktop for Mac 4.11.1

[louiss0]

Thanks for the tip!

On Sun, Jun 26, 2022, 11:48 PM Shailendra Singh @.***> wrote:

I am running vuejs apps behind docker and kubernetes for a long time without facing any of the issues which has been described in various threads. I even documented some suggestions in #8780 https://github.com/vitejs/vite/discussions/8780 to make life of a developer easy for running vuejs apps in docker / kubernetes.

There is no reason why hmr should use a different host / port than the values used by the application. If vuejs uses location.host and location.port for hmr host and port respectively then whole hmr section can be eliminated.

— Reply to this email directly, view it on GitHub https://github.com/vitejs/vite/issues/4116#issuecomment-1166805855, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG5PB6O5IGWRBUWTMSCGPGDVREQCPANCNFSM47ZSB7BQ . You are receiving this because you were mentioned.Message ID: @.***>

[torenware]

Interesting. I’m essentially using the “With Proxy” set up. I’ve made some progress, since I have the websocket getting upgraded through an SSL proxy. Took a while.

So HMR is up, but it doesn’t pick up changes in the bound file system. In the docker-compose.yaml file I have:

    volumes:
      - consistency: cached
        source: ./sample-program/frontend
        target: /app/frontend
        type: bind

This binds, but HMR ignores changes in the file system. I’ve verified that the changed files are visible to the container, but Vite’s HMR does not send the changes on to the browser.

Any advice on how best to mount a development file system into a container so that Vite will notice it?

On Jul 22, 2022, at 4:57 PM, Tony Trinh @.***> wrote:

Checkout the examples at https://github.com/sapphi-red/vite-setup-catalogue https://github.com/sapphi-red/vite-setup-catalogue — Reply to this email directly, view it on GitHub https://github.com/vitejs/vite/issues/4116#issuecomment-1193011537, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACOUZMBGSRXRJ7WUQC2EXDVVMYNJANCNFSM47ZSB7BQ. You are receiving this because you commented.

[louiss0]

I decided to just accept the fact that I will be able to just deal with reloading

On Mon, Jul 4, 2022 at 12:47 PM Aspiiire @.***> wrote:

Any update? I don't want to add Nginx

— Reply to this email directly, view it on GitHub https://github.com/vitejs/vite/issues/4116#issuecomment-1173999990, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG5PB6NJGQPB5MPBT6FHALLVSMIRTANCNFSM47ZSB7BQ . You are receiving this because you were mentioned.Message ID: @.***>

[louiss0]

Awesome, thanks!

On Tue, Oct 11, 2022, 4:46 AM Rob Thorne @.***> wrote:

Interesting. I’m essentially using the “With Proxy” set up. I’ve made some progress, since I have the websocket getting upgraded through an SSL proxy. Took a while.

So HMR is up, but it doesn’t pick up changes in the bound file system. In the docker-compose.yaml file I have:

volumes:
- consistency: cached
source: ./sample-program/frontend
target: /app/frontend
type: bind

This binds, but HMR ignores changes in the file system. I’ve verified that the changed files are visible to the container, but Vite’s HMR does not send the changes on to the browser.

Any advice on how best to mount a development file system into a container so that Vite will notice it?

On Jul 22, 2022, at 4:57 PM, Tony Trinh @.***> wrote:

Checkout the examples at https://github.com/sapphi-red/vite-setup-catalogue < https://github.com/sapphi-red/vite-setup-catalogue> — Reply to this email directly, view it on GitHub < https://github.com/vitejs/vite/issues/4116#issuecomment-1193011537>, or unsubscribe < https://github.com/notifications/unsubscribe-auth/AACOUZMBGSRXRJ7WUQC2EXDVVMYNJANCNFSM47ZSB7BQ . You are receiving this because you commented.

— Reply to this email directly, view it on GitHub https://github.com/vitejs/vite/issues/4116#issuecomment-1274328403, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG5PB6IK3YF5CBYOQYEM3ATWCUSMTANCNFSM47ZSB7BQ . You are receiving this because you commented.Message ID: @.***>

[johnsonjo4531]

My problem was that Vite uses chokidar and chokidar doesn't notice updates from docker unless you provide the usePolling: true option:

usePolling (default: false). Whether to use fs.watchFile (backed by polling), or fs.watch. If polling leads to high CPU utilization, consider setting this to false. It is typically necessary to set this to true to successfully watch files over a network, and it may be necessary to successfully watch files in other non-standard situations. Setting to true explicitly on MacOS overrides the useFsEvents default. You may also set the CHOKIDAR_USEPOLLING env variable to true (1) or false (0) in order to override this option. Chokidar docs

To fix this I added the server.watch.usePolling option:

watch: {
  usePolling: true,
},

This should be a minimum viable config:

export default defineConfig({
  server: {
    watch: {
      usePolling: true,
    },
    host: true, // needed for the DC port mapping to work
    strictPort: true,
    port: 3333,
   }
 });

[louiss0]

I'm done