Search code examples
reactjsdockerdockerfile

Unable to run a React application in a docker form

I have a small React application memegenerator application which runs marvelously in local setting without any docker properly. gitlink: https://github.com/ajahi/memegenerator.git The application structure is as such.

-dist
 -assets
 -index.html
 -vite.svg

-Dockerfile
-index.html
-node_modules
-package,json
-public
 -vite.svg
-src
 -App.jsx
 -assets
 -components
 -index.css
 -main.jsx
-vite.config.js

the package.json is as such:

{
  "name": "meme-generator",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --port=3000",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "html2canvas": "^1.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "use-react-screenshot": "^3.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.9"
  }
}

the Dockerfile is as such:

FROM node:18-alpine as builder

WORKDIR memegen

COPY ./ ./
 
#run  npm install
RUN npm install --force

EXPOSE 3000

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

in local instance after i install node modules with, "npm install" and then "npm run dev". the application runs in the localhost:3000. i tried to recreate the same steps i had done to run in my local setup in the docker container. to do that i followed these steps, in root dir:

1.docker build -t imagegene . //image is created with given Dockerfile.

2.docker run -p 3000:3000 imagegene

Response i get is:


meme-generator@0.0.0 dev
vite --port=3000


VITE v4.3.9  ready in 546 ms

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

but when i goto localhost:3000 i get nothing. enter image description here

Solution

  • Vite, per default, binds to localhost, meaning that it'll only accept connections from the local machine. In a Docker context, the local machine is the container itself. So Vite doesn't accept connections from outside the container.

    To fix it, you need to add --host to your vite command that is defined in the dev script in your package.json file.

    Right now it looks like this

      "scripts": {
    "dev": "vite --port=3000",
    "build": "vite build",

    Change it to

      "scripts": {
    "dev": "vite --port=3000 --host",
    "build": "vite build",

    and it should start accepting connections from outside the container.

    As a note, Vite is actually trying to tell you that you might need to do this. If you look in the messages from your app startup, it says Network: use --host to expose. That could be formulated better, I think, since everyone might not know what 'expose' means in this context.