Search code examples
reactjsnode.jsdockerdockerfile

Encountering errors while running Dockerfile for React and can't able to resolve them and run the docker image,

I created a Dockerfile in my React Project created via Vite,

My Dockerfile for react

FROM node:22-alpine
 
WORKDIR /usr/src/app
 
COPY package*.json ./
 
RUN npm install
 
COPY . .

CMD ["npm","run","dev"]

When I run the Dockerfile

I keep on getting the Error as below but when I used "localhost:5173" its showing nothing

> [email protected] dev
> vite

(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.

  VITE v5.3.5  ready in 253 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

So after some investigation I found that I need to do below modifications inside vite.config.js file and I tried giving some port as you see 1002 and when I run normally its running well and good using react run dev on port 1002 then I tied again building docker image and run it but still I'm getting the above same error with the same port 5173

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

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

so I commented the complete server section from the above file and then I tried below one too in package.json but no use,

 "scripts": {
    "dev": "vite --host 0.0.0.0",
}

after more searching I found below content to add in my docker file

CMD ["npm", "run", "dev", "--host", "0.0.0.0"]

but this time I encountered some other error as

> [email protected] dev
> vite 0.0.0.0

error when starting dev server:
Error: ENOENT: no such file or directory, realpath '/usr/src/app/0.0.0.0'
    at realpathSync.native (node:fs:2767:18)
    at getRealPath (file:///usr/src/app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:45614:16)
    at getFsUtils (file:///usr/src/app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:45359:68)
    at preAliasPlugin (file:///usr/src/app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:47634:19)
    at resolvePlugins (file:///usr/src/app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:48329:5)
    at resolveConfig (file:///usr/src/app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:66071:28)
    at async _createServer (file:///usr/src/app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:62432:18)
    at async CAC.<anonymous> (file:///usr/src/app/node_modules/vite/dist/node/cli.js:735:20)

I want to run my dockerfile for react app for which I keep getting the errors. Is there any way to find out where I'm wrong and what corrections needed to be in my image/config or anything,

Solution

  • below content in vue.config.js resolves the issue, but what does the resolve above plugins does?

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

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