ReactJS + Docker-Compose ERROR | "Could not find a required file"

Question

I have a ReactJS application which has been dockerized. The application is built into a docker image and run on a container for development also using docker-compose tool. This works well when I use it with Docker for Windows. Below is the package.json, it is a very old reactjs scaffolding.

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.2",
    "react-listbox":"^1.2.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16": "^1.7.1"
  }
}

Folder Structure of the Client Code (Approximate Idea) -

client
  -- public
    - index.html
  -- src
    - App.js
  package.json

Dockerfile

# base image
FROM node:11.6.0-alpine

# set working directory
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install

# start app
CMD ["npm", "start"]

docker-compose-dev.yml

version: '3.7'

services:
  client:
      build:
        context: ./services/client
        dockerfile: Dockerfile
      volumes:
        - './services/client:/usr/src/app' #(map)  outside: inside the docker 
        - '/usr/src/app/node_modules'
      ports:
        - 3007:3000
      environment:
        - NODE_ENV=development

But when I try to push this docker image to a repository and then use it to deploy into a cloud container (possibly, a unix based system), the deployment fails with NPM ERR (as described below).

STDERR


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-03-11T03_53_28_432Z-debug.log

STDOUT

> [email protected] start /usr/src/app
> react-scripts start

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

It fails saying the index.html is not found when I am quite sure, the file is under /public/ which gets mounted to the dockerized image.

NOTE - I know the fact that this is not the way the reactjs code should be deployed on server. It should be through a web server like nginx. But the legacy team had little knowledge about the front end development. Please help regardless.

Probably you are missing the COPY step in docker file. Can you post the contents of Dockerfile? Are you copying the public folder to docker image? — MjZac
– MjZac, Commented Mar 11, 2020 at 4:18
@MjZac On your suggestion, I have added the Dockerfile and docker compose config in the question description. Does the public folder need to be copied specifically to the docker image? — Satyajit Patnaik
– Satyajit Patnaik, Commented Mar 11, 2020 at 4:44
yes, both public folder and src needs to be copied to the docker image. — MjZac
– MjZac, Commented Mar 11, 2020 at 5:13
As per your suggestion @MjZac I implemented the changes, but it cropped up a new issue, please find the logs in the comment below your answer. — Satyajit Patnaik
– Satyajit Patnaik, Commented Mar 11, 2020 at 6:35

MjZac · Accepted Answer · 2020-03-11 05:15:58Z

3

You are mounting client folder as a volume in the docker image. So, where ever you deploy the docker image, it will expect the volume to be mounted. Instead, you can copy the folder to docker image and make it self contained.

FROM node:11.6.0-alpine

# set working directory
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY public /usr/src/app/public
COPY src /usr/src/app/src
COPY package.json /usr/src/app/package.json
RUN npm install

# start app

CMD ["npm", "start"]

your docker-compose-dev.yml will be:

version: '3.7'

services:
  client:
      build:
        context: ./services/client
        dockerfile: Dockerfile
      ports:
        - 3007:3000
      environment:
        - NODE_ENV=development

edited Mar 11, 2020 at 5:15

answered Mar 11, 2020 at 5:10

MjZac

3,5541 gold badge20 silver badges30 bronze badges

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

4 Comments

Satyajit Patnaik Over a year ago

The issue that is mentioned in the description is not seen anymore, but another issue has cropped up. Please find the logs in the description.

Satyajit Patnaik Over a year ago

The logs after your suggestion -

> [email protected] start /usr/src/app > react-scripts start  Attempting to bind to HOST environment variable: 10.248.40.124 If this was unintentional, check that you haven't mistakenly set it in your shell. Learn more here: CRA-advanced-config  Could not find an open port at 10.248.40.124. Network error message: listen EADDRNOTAVAIL: address not available 10.248.40.124

MjZac Over a year ago

That seems like another issue. possible solution is replacing HOST environment variable to localhost or 127.0.0.1. medium.com/@choy/…

Satyajit Patnaik Over a year ago

The solution thereafter still did not solve the next issue. The changes in the docker files did move the logs further. We can keep this question open while I keep trying to fix the issue. Thank you for the help.

Collectives™ on Stack Overflow

ReactJS + Docker-Compose ERROR | "Could not find a required file"

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related