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

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

> test-vite-one@0.0.0 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

> test-vite-one@0.0.0 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
    }
})