Docker Compose with Docker Toolbox: Node, Mongo, React. React app not showing in the said adress

Question

I am trying to run Express server and React app trough docker containers. The Express server runs correctly at the given address (the one on Kitematic GUI). However I am unable to open the React application trough the given address, giving me site cannot be reached.

Running Windows 10 Home with Docker Toolbox.

React app dockerfile:

FROM node:10
# Set the working directory to /client
WORKDIR /frontend
# copy package.json into the container at /client
COPY package*.json ./
# install dependencies
RUN npm install
# Copy the current directory contents into the container at /client
COPY . .
# Make port 3001 available to the world outside this container
EXPOSE 3001
# Run the app when the container launches
CMD ["npm", "run", "start"]

Node/Express dockerfile:

# Use a lighter version of Node as a parent image
FROM node:10
# Set the working directory to /api
WORKDIR /backend
# copy package.json into the container at /api
COPY package*.json ./
# install dependencies
RUN npm install
# Copy the current directory contents into the container at /api
COPY . .
# Make port 3000 available to the world outside this container
EXPOSE 3000
# Run the app when the container launches
CMD ["npm", "start"]

Docker compose file:

version: '3'

services:
    client:
        container_name: hydrahr-client
        build: .\frontend
        restart: always
        environment: 
            - REACT_APP_BASEURL=${REACT_APP_BASEURL}
        expose:
            - ${REACT_PORT}
        ports: 
            - "3001:3001"
        links:
            - api
    api:
        container_name: hydrahr-api
        build: ./backend
        restart: always
        expose: 
            - ${SERVER_PORT}
        environment: [
            'API_HOST=${API_HOST}',
            'MONGO_DB=${MONGO_DB}',
            'JWT_KEY=${JWT_KEY}',
            'JWT_HOURS_DURATION=${JWT_HOURS_DURATION}',
            'IMAP_EMAIL_LISTENER=${IMAP_EMAIL_LISTENER}',
            'IMAP_USER=${IMAP_USER}',
            'IMAP_PASSWORD=${IMAP_PASSWORD}',
            'IMAP_HOST=${IMAP_HOST}',
            'IMAP_PORT=${IMAP_PORT}',
            'IMAP_TLS=${IMAP_TLS}',
            'SMTP_EMAIL=${SMTP_EMAIL}',
            'SMTP_PASSWORD=${SMTP_PASSWORD}',
            'SMTP_HOST=${SMTP_HOST}',
            'SMTP_PORT=${SMTP_PORT}',
            'SMTP_TLS=${SMTP_TLS}',
            'DEFAULT_SYSTEM_PASSWORD=${DEFAULT_SYSTEM_PASSWORD}',
            'DEFAULT_SYSTEM_EMAIL=${DEFAULT_SYSTEM_EMAIL}',
            'DEFAULT_SYSTEM_NAME=${DEFAULT_SYSTEM_NAME}',
            'SERVER_PORT=${SERVER_PORT}'
        ]
        ports: 
            - "3000:3000"
        depends_on:
            - mongo
    mongo:
        image: mongo
        restart: always
        container_name: mongo
        ports:
            - "27017:27017"

Running with docker-compose up -d

UPDATE 1:

I am able to run the react application using docker run -p 3000:3000 hydra-client-test after building that image.

so was the frontend supposed to serve at `:3000` or `:3001`? note that `EXPOSE` is really more for documentation - it's publishing (`ports` in dco or `-p` in docker cli) that actually connects the port onto your host machine, so ${REACT_PORT} should probably be in `ports`. — cbr, Mar 10 '20 at 13:27
The frontend is suppose to serve at ```:3001``` the ```${REACT_PORT}``` is also 3001 I just changed the ```ports:``` for visualization purposes, it his using ```${REACT_PORT}:${REACT_PORT}``` — ImInYourCode, Mar 10 '20 at 13:32
What's the address given by the GUI? Try just `localhost:3001`. — cbr, Mar 10 '20 at 13:33
Doesn't work, for what I have found with Docker Toolbox I do not have a way to use localhost and must use the address given by the GUI. Only the adress for the React app is not working. The server/api runs well on the given address, running on ```:3000``` — ImInYourCode, Mar 10 '20 at 13:37
Okay, I see. Are you sure that it's listening on 3001 though? If manually running it with `-p 3000:3000` makes it work, then whatever is running on the frontend is probably listening on port 3000, isn't it? Try `3001:3000` for the client's ports. — cbr, Mar 10 '20 at 13:40
That did it, thank you very much! After setting ```ports: - 3001:3000``` it opened. Does the image always use port 3000? Anyway if you'd like to put that as an answer I will accept it. — ImInYourCode, Mar 10 '20 at 13:55
I'm glad I could help! Whether it always uses it, that depends on what you're running in there! If that's Create-React-App that's running there, you can just set the environment variable `PORT` to whatever port you want the *development server* to listen to. Note though that you should not use the development server for production. Again, if it's CRA that you're using, you'll want to `npm run build` to produce the js/css/html files which you then serve with your backend or some other server. — cbr, Mar 10 '20 at 14:01

score 1 · Accepted Answer · answered Mar 10 '20 at 13:59

1

Since running the container with -p 3000:3000 works, the client is actually probably listening on port 3000. Try setting:

ports:
  - 3001:3000

answered Mar 10 '20 at 13:59

cbr

12,563
3
38
63

Docker Compose with Docker Toolbox: Node, Mongo, React. React app not showing in the said adress

1 Answers1