0

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

Die
  • 1
  • 1

2 Answers2

0

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
},
nubinub
  • 1,898
  • 2
  • 15
  • 23
  • You have correctly restarted the docker container ? – nubinub Feb 05 '19 at 10:50
  • Tried both the option with no luck. – Die Feb 05 '19 at 10:51
  • Yeah, I ran the build command again. Whats the best way to restart a container? – Die Feb 05 '19 at 10:54
  • I don't know, the only thing i am sure is that your application is currently starting on port 8080 and not 3000. The line 3000:3000 is designed to map the port 3000 of your localhost to the port 3000 of your docker container. Since your application is currently starting on 8080, there is at least something wrong here. – nubinub Feb 05 '19 at 10:56
  • There is something wrong thats the reason, I have posted asked, I am bagging my head since two days. Have tried almost everything on the internet. – Die Feb 05 '19 at 11:02
  • What I meant by saying there is something wrong here, was not there is something wrong with your setup as I am pretty much aware of that. I meant there is something wrong with your port configuration. It might not have solved your overall problem but I am pretty confident on the fact that your port configuration is wrong, and that the solution I described is an improvement toward solving your overall issue. – nubinub Feb 05 '19 at 13:15
0

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

Sarasa Gunawardhana
  • 1,099
  • 3
  • 14
  • 34
  • I want to set this up for dev environment, building for production and serving it has no issues. – Die Feb 05 '19 at 11:13