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

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


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


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 imageFROM node:latest AS builder# Set working directoryWORKDIR /app# Copy package.json and install packagesCOPY package.json .RUN npm install# Copy other project files and buildCOPY . ./RUN npm run build# Set nginx imageFROM nginx:latest# Nginx configRUN rm -rf /etc/nginx/conf.d/default.confCOPY ./nginx/default.conf /etc/nginx/conf.d/default.conf# Static buildCOPY --from=builder /app/public /usr/share/nginx/html# Set working directoryWORKDIR /usr/share/nginx/html# Start Nginx serverCMD ["/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


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