node.jsreactjsdockerdocker-composedocker-toolbox

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


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.


Solution

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

    ports:
      - 3001:3000