How to access react app which is ran in docker container?

Question

Dockerfile

FROM node:alpine
WORKDIR '/app'
COPY package.json .
RUN npm install
COPY . .
CMD ["npm", "run", "start"]

docker-compose.yml

version: "3"
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - /app/node_modules
      - .:/app
    command: ["npm", "start"]

Commands which I fired to get this up

docker-compose -f docker-compose.yml up --build

After this I went to https://localhost:3000 and this project did not load. Here is reproducible repo https://github.com/reyanshmishra/My-Portfolio-ReactJS

Thanks

Answer 1

From webpack-dev-server documentation :

Either method will start a server instance and begin listening for connections from localhost on port 8080.

I guess you can modifiy docker-compose.yml to :

ports:
      - "3000:8080"

And then you should be able to access your app using http://localhost:3000 .

OR

You can modify your webpack config to use port 3000 instead of the default 8080 :

devServer: {
    contentBase: path.join(__dirname, "src"),
    hot: true,
    inline: true,
    historyApiFallback: true,
    stats: {
      colors: true
    },
    port: 3000
},

Answer 2

You can't run the react project by building like this. You have to add this line into Dockerfile like this to run your application,

# Install `serve` to run the application.
RUN npm install -g serve

Example Dockerfile

FROM node:alpine
WORKDIR '/app'
COPY package.json .

# Copy all local files into the image.
COPY . .

RUN npm install
RUN npm audit fix

# Build for production.
RUN npm run build --production

# Install `serve` to run the application.
RUN npm install -g serve

# Set the command to start the node server.
CMD serve -s build

# Tell Docker about the port we'll run on.
EXPOSE 5000

You can run image like this (your app will run port 5000 by default. so you have to change docker-compose.yml file as well):

**$ docker run -p 5000:5000 <image name>** 

• if you need to access the image without running the container,

  How to access a docker image?

• if you need to access the running container

  $ docker exec -ti bash