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

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

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

Answer 2

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
},