Search code examples
dockercreate-react-app

Running React app in Docker container not running correctly

I have a small React app that I would like to run in a Docker container. I have the following Dockerfile filled out like this:

# base image
FROM node:9.6.1

# set working directory
RUN mkdir /app
WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package-lock.json /app/package-lock.json
COPY package.json /app/package.json

COPY . /app

RUN npm install

# start app
CMD ["npm", "start"]

After doing a build, I was able to correctly (I think) create an image.

>docker image list
REPOSITORY           TAG                 IMAGE ID            CREATED             SIZE
notes                latest              e4ccada07b84        18 hours ago        846MB

However, when I run on the image, it does run npm start, but not in the port I specified and if I go to the URL it provides it can't connect to anything.

>docker run -p 3030:3030  notes:latest

You can now view notes in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://172.17.0.4:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

What am I missing to get this running in a container correctly?

Solution

  • Your React app is set to run on port 3000 of the container and since you mentioned you were going to the URL in the output; I'm assuming you're attempting to reach port 3000 of your host.

    Change your command to the following; which will attach port 3000 of your host to port 3000 of the container.

    docker container run -p 3000:3000 notes:latest

    Then head on over to http://localhost:3000/ - unless you're using Docker Toolbox, in that case you'll want to use http://192.168.99.100:3000/

    I'd also recommend adding an EXPOSE 3000 into your Dockerfile as that is good practice.

    Just a note - the -p flag uses <host>:<container> for the format.