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

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! client#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#0.1.0 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
> client#0.1.0 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.

Answer 1

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