CODEWITHSUNDEEP
reactjsdockervite
Software Engineer
Software Engineer

Reputation: 16100

Vite+React+Docker: not working in container

I'm writing a standard react app using vite and yarn. I'm new to 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 banging my head against this all evening but it's getting annoying now. Any insights would be appreciated.

Note

I can vite build the app and serve it in nginx, and it works, but that really doesn't help during development.

Upvotes: 8

Views: 20978

Answers (4)

SoonersBaby
SoonersBaby

Reputation: 31

As of 1/2025 just adding the below to the devcontainer.json fixed the issue for me:

"forwardPorts": [5173]"

Upvotes: 0

parsecer
parsecer

Reputation: 5106

I'm using Vite with Vue, had the same issue.

Changed vite.config.js:

...
export default defineConfig(
{
    plugins: [vue()],

    server:  {
        port: 8080,
        host: '0.0.0.0'
    },

    host: true,
...

Added host: '0.0.0.0' and host: true.

Upvotes: 0

Rahul Vishwakarma
Rahul Vishwakarma

Reputation: 55

What i learned from some of open source projects

 // https://vitejs.dev/config/
   export default defineConfig({
  plugins: [react()],
  server: {
    // watch: {
    //  usePolling: true,
    // },
    host: true, // Here
    // strictPort: true,
    // port: 5000
  }
})

If you want to run your application on vite default port (5173), you have to make host:true and if you want on some other port you can mention that under server object as i have given a reference code

# Official Image using node 20 alphine
FROM node:20-alpine  

# working directory 
WORKDIR /app/fronted

# Changes in package* . json file 
COPY package*.json ./

# Install Dependencies
RUN npm install

# Copy all changes on fronted
COPY . .

# expose the app on port 5173
EXPOSE 5173

# Start your frontend application
CMD [ "npm", "run", "dev", "--", "--host", "0.0.0.0"]

Dockerfile

Upvotes: 3

Fateh Mohamed
Fateh Mohamed

Reputation: 21357

I reproduced the same error. You have to set host to true in your vite config and you have to copy all files in your dockerfile, those inside and outside src folder, index.html is outside your src folder and you are not copying it

Compared to CRA using vite your index.html have to be on your root directory in dev mode. If you want to serve it from public directory you have to add some middleware for that, but it's more like a workaround, I don't advice you doing this since the public directory is for assets like robots.txt file ...

https://vitejs.dev/guide/assets.html#the-public-directory

-vite config file

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

-Dockerfile file

FROM node:alpine
WORKDIR /app
COPY package.json .
RUN yarn
# copy all files
COPY . .
cmd ["yarn", "dev", "--debug"]

And if you copy everything (COPY . .) Don't forget to add a .dockerignore file

.git
.vscode
.dockerignore
.gitignore
.env
config
build
node_modules
docker-compose.yaml
Dockerfile
README.md

Try to build your image again and run and let me know if it solves your problem

Upvotes: 28

Related Questions