Docker app won`t work but application works if not in docker

Question

I have built a react and node app and it works. I am trying to build an docker image and run it it compiles but when i try to access it thru thr browser it says This site can’t be reachedlocalhost refused to connect. This is the dockerfile that i`ve written because I think this is the problem:

# pull official base image
FROM node:13.12.0-alpine

# set working directory
WORKDIR /client

# add `/app/node_modules/.bin` to $PATH
ENV PATH /client/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install [email protected] -g --silent

# add app
COPY . ./

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




FROM node:12

# Create app directory
WORKDIR ./

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install
# If you are building your code for production
# RUN npm ci --only=production

# Bundle app source
COPY . .

EXPOSE 5000
CMD [ "node", "index.js" ]

How are you starting the container? How does the application listen on its network port? Are you on a VM-based environment like Docker Toolbox? — David Maze
– David Maze, Commented Jan 4, 2021 at 14:26

kidroca · Accepted Answer · 2021-01-04 20:46:45Z

1

First make sure you can reach your server - you app may be running locally but it doesn't use the same server as the one from your dockerfile e.g. npm start starts a local server.

Remove everything related to the react app stage from your dockerfile and just make sure you can hit your server on port 5000 and that it servers pages - you can host an index.html with <body>Hello world</body> or something. When you're able to do that it's just a matter of adding the react app bundled files to the server static (public) folder

Is your node server listening on port 5000 ? Typically with node js server you have to set a PORT and HOST env variables that are used by the server like process.env.PORT and process.env.HOST

Other issues

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

npm start is (usually) used to start a local server while you develop your react app

Instead of starting the app you should run a bundle command that will produce static files to be hosted - js html etc...
Typically npm run build

This should make a folder ./dist or ./build with all the static content you should put on the server (perhaps that's your /client folder for?)

Some tweaks

# pull official base image
FROM node:13.12.0-alpine AS builder

# set working directory
WORKDIR /client

# Copy source
COPY . .

# add `/app/node_modules/.bin` to $PATH (you probably don't need this)
ENV PATH /client/node_modules/.bin:$PATH

# install app dependencies
RUN npm install --silent
RUN npm install [email protected] -g --silent (you can move this to dependencies)

# Build bundle 
RUN npm run build

# Next stage
FROM node:12

# Create app directory
WORKDIR ./

# Copy source
COPY . .

RUN npm install
# If you are building your code for production
# RUN npm ci --only=production

# Copy js bundle
COPY --from=builder /client/dist ./public

EXPOSE 5000
CMD [ "node", "index.js" ]

This might need a little more tweaking but that's the general idea

you don't need to install react-scripts globally it can just be a local dependency - it's used by npm start and npm build to build your app so you depend on it - it should be part of package.json dependencies

Adding /client/node_modules/.bin to PATH shouldn't be needed, maybe it's a leftover or a tell that something else isn't properly setup

edited Jan 4, 2021 at 20:46

answered Jan 4, 2021 at 20:36

kidroca

3,9462 gold badges33 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SerCio Over a year ago

I tried your answear it works fine till it reaches npm run build and it gives me an error that says: missing script : build What should I do next ? Thanks

kidroca Over a year ago

That's just an example to be used as a guide. How you bundle your app depends on your own specific configuration - instead of npm run build run the script that bundles your app. For example create react app have a build script: create-react-app.dev/docs/production-build

kidroca Over a year ago

Your initial problem is reaching the server - it's not related to react but only to your nodejs server, so try to fix and reach the server and then add the part that bundles your app

Collectives™ on Stack Overflow

Docker app won`t work but application works if not in docker

1 Answer 1

Other issues

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Other issues

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related