Question 309581 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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:


[email protected] 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

Tags:

2

Answers


  1. 0

    Your docker container is not accessible on "localhost". You have to find out the IP of your container and replace localhost with its IP.
    You can use this command to get the IP:

    docker inspect -f '{{range.NetworkSettings.Networks}}{{.IPAddress}}{{end}}' container_name_or_id
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search