Could not find a required file. Name: index.html in react with docker compose

Question

I have my react app set up with create-react-app and I was trying to run it with Docker container and Docker compose. However, I got the following error when I ran it with Docker compose.

web_1     | Could not find a required file.
web_1     |   Name: index.html
web_1     |   Searched in: /usr/src/app/web_client/public

I am using Windows 10 and Docker quickstart terminal

Here is my folder structure:

vocabulary-app
   |
    web_client
         |
          node_modules/
          public/
          src/
          package.json
          package-lock.json
          Dockerfile
          yarn.lock
    docker-compose.yml

Here is the content of docker-compose.yml

  ### Client SERVER ###
  web:
    build: ./web_client
    environment:
      - REACT_APP_PORT=80
    expose:
      - 80
    ports:
      - "80:80"
    volumes:
      - ./web_client/src:/usr/src/app/web_client/src
      - ./web_client/public:/usr/src/app/web_client/public
    links:
      - server
    command: npm start

Here is the Dockerfile

FROM node:9.0.0

RUN mkdir -p /usr/src/app/web_client
WORKDIR /usr/src/app/web_client

COPY . .

RUN rm -Rf node_modules

RUN npm install

CMD npm start

I also tried to explore the file system in docker and got the following result:

$ docker run -t -i vocabularyapp_web /bin/bash
root@2c099746ebab:/usr/src/app/web_client# ls
Dockerfile  node_modules       package.json  src
README.md   package-lock.json  public        yarn.lock
root@2c099746ebab:/usr/src/app/web_client# cd public/
root@2c099746ebab:/usr/src/app/web_client/public# ls
favicon.ico  index.html  manifest.json

This one basically means that the index.html file is there, so I got more confused about the error message.

Does someone have solution to this?

Answer 1

I had this same issue when working deploying a React App using Docker on an Ubuntu 18.04 server.

The issue was that I missed the step of copying the contents of the entire previous build to the working directory (/app) of the application.

Here's how I solved it:

Add this below as a step after the RUN npm install and before the RUN npm run build steps:

COPY . ./

My Dockerfile:

# Set base image
FROM node:latest AS builder

# Set working directory
WORKDIR /app

# Copy package.json and install packages
COPY package.json .
RUN npm install

# Copy other project files and build
COPY . ./
RUN npm run build

# Set nginx image
FROM nginx:latest

# Nginx config
RUN rm -rf /etc/nginx/conf.d/default.conf
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf

# Static build
COPY --from=builder /app/public /usr/share/nginx/html

# Set working directory
WORKDIR /usr/share/nginx/html

# Start Nginx server
CMD ["/bin/bash", "-c", "nginx -g \"daemon off;\""]

My docker-compose file:

version: "3"

services:
  web:
    image: my_app-frontend
    build:
      context: .
      dockerfile: Dockerfile
    environment:
      REACT_APP_API_URL: ${REACT_APP_API_URL}
    expose:
      - "3000"
    restart: always
    volumes:
      - .:/app

Nginx for serving static files:

Create a directory called nginx and then under the directory create a file called default.conf. The file will have the following configuration:

server {
  listen 80;
  add_header Cache-Control no-cache;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    expires -1;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

My .env

Create a .env file where you will store your environment variables:

REACT_APP_API_URL=https://my_api

That's it.

I hope this helps

Answer 2

I don't have a docker-compose file, but I was able to get a similar react app to run with the docker command

docker run -v ${PWD}:/app -v /app/node_modules -p 3001:3000 --rm app-name:dev

I was then able to access my react app from localhost:3000