running a vite dev server inside a docker container

Question

I have a Vue-cli app that I'm trying to convert to vite. I am using Docker to run the server. I looked at a couple tutorials and got vite to run in development mode without errors. However, the browser can't access the port. That is, when I'm on my macbook's command line (outside of Docker) I can't curl it:

$ curl localhost:8080
curl: (52) Empty reply from server

If I try localhost:8081 I get Failed to connect. In addition, if I run the webpack dev server it works normally so I know that my container's port is exposed.

Also, if I run curl in the same virtual machine that is running the vite server it works, so I know that vite is working.

Here are the details:

In package.json:

...
"dev": "vue-cli-service serve",
"vite": "vite",
...

The entire vite.config.ts file:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    resolve: { alias: { '@': '/src' } },
    plugins: [vue()],
    server: {
        port: 8080
    }
})

The command that starts the container:

docker-compose run --publish 8080:8080 --rm app bash

The docker-compose.yml file:

version: '3.7'

services:
  app:
    image: myapp
    build: .
    container_name: myapp
    ports:
      - "8080:8080"

The Dockerfile:

FROM node:16.10.0

RUN npm install -g npm@8.1.3
RUN npm install -g @vue/cli@4.5.15

RUN mkdir /srv/app && chown node:node /srv/app

USER node

WORKDIR /srv/app

The command that I run inside the docker container for vite:

npm run vite

The command that I run inside the docker container for vue-cli:

npm run dev

So, to summarize: my setup works when running the vue-cli dev server but doesn't work when using the vite dev server.

score 32 · Accepted Answer · answered Nov 22 '21 at 15:54

32

I figured it out. I needed to add a "host" attribute in the config, so now my vite.config.ts file is:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    resolve: { alias: { '@': '/src' } },
    plugins: [vue()],
    server: {
        host: true,
        port: 8080
    }
})

answered Nov 22 '21 at 15:54

Paulie

1,940
3
20
34

what is port `8080` stands for ? frontend listening port or API server listening port? – Vivek Rahul Feb 10 '23 at 08:41
When I browse to `http://localhost:8080` then I get the website that I'm developing. – Paulie Feb 12 '23 at 00:39
port here represents the Vite server port. If you use the same port as your web server, Vite will use the next available port (8081 in your case). – Valentino Mar 13 '23 at 18:00

score 16 · Answer 2 · answered Dec 28 '21 at 23:42

You can also start your vite server with:

$ npm run dev -- --host

This passes the --host flag to the vite command line.

You will see output like:

vite v2.7.9 dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://192.168.4.68:3000/

  ready in 237ms.

(I'm running a VirtualBox VM - but I think this applies here as well.)

score 4 · Answer 3 · edited Apr 05 '22 at 21:05

4

You need to add host 0.0.0.0 to allow any external access:

export default defineConfig({
server: {
    host: '0.0.0.0',
    watch: {
        usePolling: true
    }
},})

edited Apr 05 '22 at 21:05

Skatox

4,237
12
42
47

answered Apr 05 '22 at 15:47

Xu miss.

41
1

running a vite dev server inside a docker container

3 Answers3

Linked

Related