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?

Seeing as this is still only a month old I hope you somehow found an answer. I am currently coping with the same issue. — Tea_Lover_418
– Tea_Lover_418, Commented Aug 13, 2019 at 11:32

Promise Preston · Accepted Answer · 2020-07-28 00:03:31Z

11

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

edited Jul 28, 2020 at 0:03

answered Mar 23, 2020 at 22:16

Promise Preston

29.9k18 gold badges176 silver badges173 bronze badges

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

3 Comments

peyo Over a year ago

Thanks for adding this answer. What does your docker-compose.yml look like? For the working directory, if there are front and back-ends, would the WORKDIR be WORKDIR /app/frontend?

Promise Preston Over a year ago

Hi @peyo, I have updated my answer with my docker-compose.yml file and some other relevant configurations. If you have a frontend and backend then most times they are often dockerized separately and made to communicate with each other via API calls. You can give your WORKDIR any name of your choice anyways. It does not have to be *app, it can be web, website, application or any name of yours. Just ensure that you reference it appropriately wherever it is needed.

Bradley Barfoot Over a year ago

Please be aware, despite adding restart: always to your docker-compose file, it may seem as though your project is running, but in reality it can be crashing and restarting constantly.

rmrf · Accepted Answer · 2019-08-21 20:35:51Z

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

answered Aug 21, 2019 at 20:35

rmrf

2,0231 gold badge25 silver badges45 bronze badges

Comments

Dong Pak · Accepted Answer · 2020-03-18 15:29:27Z

0

I did an explict COPY ./public/index.html and this problem went away but similar error generated for index.js and index.css. Doing same for these fixed it.

answered Mar 18, 2020 at 15:29

Dong Pak

1

Comments

Ashutosh Suthar · Accepted Answer · 2023-11-06 07:18:43Z

0

Most probably not all the files were copied to WORKDIR Check it by running,

docker exec <CONTAINER ID> ls <path/to/WORKDIR>

answered Nov 6, 2023 at 7:18

Ashutosh Suthar

11 bronze badge

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related