Vite+React+Docker: not working in container

Question

I'm writing a standard react app using vite.

package.json

{
  "name": "bpm",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.1.0",
    "vite": "^3.1.0"
  }
}

vite.config.js

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

export default defineConfig({
  server: {host:'0.0.0.0', port:8080},
  plugins: [react()]
})

When I run it directly in wsl (ubuntu), using yarn dev it works fine. I can point my browser at http://localhost:8080 and my app runs with no problems.

I also have this basic dockerfile which I build in the normal way:

from node:alpine3.15
workdir /app
copy package.json /app/package.json
run yarn
copy src /app/src
copy public /app/public
copy vite.config.js /app/
cmd ["yarn", "dev", "--debug"]

But, when I run this in wsl:

docker run -it --rm -p 8080:8080 bpm

The app no longer works.

What do I mean by 'no longer works'? Well, that's where it gets interesting. When the app starts the debugging output shows that vite has resolved all of its dependencies, so vite appears to be working, it reports no errors on stdout, and reports its port bindings. But, when I access the app root: `http://localhost:8080' I get a 404.

I can access the files in the app if I enter their URI's: curl 'http://localhost:8080/src/main.jsx' returns the appropriate source-code. So, this isn't a docker.networking problem.

If I navigate to `http://localhost:8080/index.html' then that page loads and the.network tab shows no problems, but the console reports an error:

@vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201
    at Toolbar.jsx:6:11

Where Toolbar.jsx is on of my component files.

Just in case, I read the docs and tried adding:

origin: 'http://127.0.0.1:8080'

To the vite server config and it hasn't helped (surprisingly).

There seem to be some other questions on this topic ( here and here ), but those questions and answers don't seem to cover the actual behaviour I'm seeing, though I have read them and applied their solutions they don't help.

I've also tried different base containers for node, and different versions of node. It doesn't seem to make any difference.

I've been banking my head against this all evening but it's getting annoying now. Any insights would be appreciated.

Answer 1

You have to set host to true in your vite config

export default defineConfig({
 plugins: [react()],
 server: {
  watch: {
   usePolling: true,
  },
  host: true, // Here
  strictPort: true,
  port: 8080, 
}