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

Active3 hr before
Viewed126 times

10 Answers


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.,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., yes, both public folder and src needs to be copied to the docker image. – MjZac Mar 11 '20 at 5:13

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"]
load more v

Ran in my docker container to ensure the output is accurate.,Run in docker container, Sponsor Sponsor facebook/create-react-app

Recreating core - ui_web_1...done
Attaching to core - ui_web_1
web_1 |
   web_1 | > core - ui @0 .1 .0 start / app
web_1 | > react - app - rewired start
web_1 |
   web_1 | ℹ「 wds」: Project is running at http: //
   web_1 | ℹ「 wds」: webpack output is served from
web_1 | ℹ「 wds」: Content not from webpack is served from / app / public
web_1 | ℹ「 wds」: 404 s will fallback to /
   web_1 | Starting the development server...
   web_1 |
   core - ui_web_1 exited with code 0
load more v

After development was finished, we decided to containerize the app with Docker. To do this, we created Dockerfiles for both the frontend and backend applications and then used docker-compose to aggregate the two Dockerfiles and deploy the containers on the same network. For the frontend, the Dockerfile looks like this:,After completing the development of the application, we used Dockerfiles to containerize the frontend and backend and docker-compose to run the frontend and backend containers on our local computer under one network.,Finally, after the two Dockerfiles are written we can create the docker-compose.yml file in the root of our project directory. Here is what this file looks like:

We follow most of the same steps as in the previous Dockerfile, with the exception of the port we expose (5000) and the command we run on startup:

node backend.js
load more v

Run the docker-compose up command to start the container. The React development server will be running inside the container and will be watching the src folder.,After copying the custom Nginx configuration file we need to build and run the docker image again.,The application should be running fine on http://localhost:3000. Now let's verify if the client-side routing is working fine or not. For that, we need to install the react-router-dom to the application.

 Pretag team - issue, fix, solve, resolve

Container development with Visual Studio,Visual Studio Container Tools GitHub repository,With Visual Studio, you can easily build, debug, and run containerized ASP.NET Core apps, including those with client-side JavaScript such as React.js single-page app, and publish them to Azure Container Registry (ACR), Docker Hub, Azure App Service, or your own container registry. In this article, we'll publish to ACR.

Add the following lines before FROM … base

FROM / powershell AS downloadnodejs
SHELL["pwsh", "-Command", "$ErrorActionPreference = 'Stop';$ProgressPreference='silentlyContinue';"]
RUN Invoke - WebRequest - OutFile - UseBasicParsing "";
Expand-Archive -DestinationPath C:\; `
Rename - Item "C:\node-v10.16.3-win-x64"
c: \nodejs
load more v

Innovate by collaborating with team members and other developers and by easily publishing images to Docker Hub.,Integrate with your favorite tools throughout your development pipeline - Docker works with all development tools you use including VS Code, CircleCI and GitHub.,Get a head start on your coding by leveraging Docker images to efficiently develop your own unique applications on Windows and Mac.  Create your multi container application using the Docker Compose CLI. 

 Pretag team - issue, fix, solve, resolve

Finally, running npm start command to run dev env , Now, we have a dockerfile with all instructions that we need in order to create our docker image. Let's now define and create our container using docker-compose-local.yml file. Open your terminal window and create docker-compose-local.yml file with following contents: , Now, that we have our local environment all set we need to get our production environement ready. Let's now create following two files:

I assume that you already have docker installed on your local machine. Moving on let's now install react-create-app cli tool. Open your terminal window and type following commands:

# install create - react - app
npm install - g create - react - app

let 's create a sampler react app
create - react - app reactjs - example

let 's head into our project dir
cd reactjs - example
load more v

The docker run command creates and runs a new container instance from the image we just created.,If you run into an "ENOENT: no such file or directory, open '/app/package.json". error, you may need to add an additional volume: -v /app/package.json.,Updated the docker run commands to account for changes in react-scripts v3.4.1.

$ npm install - g create - react - app @3 .4 .1
load more v

In this article, we’ll run a full-stack application built using Spring Boot, React, and MySQL.,In this tutorial, you'll learn how to use Spring Boot and STOMP over WebSocket with SockJS fall back to build a fully fledged group chat application from scratch.,In this article, you'll learn how to create docker hosts using Docker machine, initialize a Swarm cluster, and deploy a multi-container app on the cluster using Docker stack.

# # # # Stage 1: Build the application
FROM openjdk: 8 - jdk - alpine as build

# Set the current working directory inside the image

# Copy maven executable to the image
COPY mvnw.

# Copy the pom.xml file
COPY pom.xml.

# Build all the dependencies in preparation to go offline.
# This is a separate step so the dependencies will be cached unless
# the pom.xml file has changed.
RUN. / mvnw dependency: go - offline - B

# Copy the project source
COPY src src

# Package the application
RUN. / mvnw package - DskipTests
RUN mkdir - p target / dependency && (cd target / dependency; jar - xf..

      #### Stage 2: A minimal docker image with command to run the app 
      FROM openjdk:8-jre-alpine

      ARG DEPENDENCY=/app/target/dependency

      # Copy project dependencies from the build stage
      COPY --from=build ${DEPENDENCY}/BOOT-INF/lib /app/lib
      COPY --from=build ${DEPENDENCY}/META-INF /app/META-INF
      COPY --from=build ${DEPENDENCY}/BOOT-INF/classes /app

      ENTRYPOINT ["java","-cp","app:app/lib/*","com.example.polls.PollsApplication"]
load more v

The Web App for Containers allows the creation of custom Docker container images, easily deploy and then run them on Azure. Combination of Azure DevOps and Azure integration with Docker will enable the following:,Deploy and run the images inside the Docker Containers, Deploy and run the images inside the Docker Containers

  az group create --name DockerRG --location <region>
load more v

Other "compose-docker" queries related to "ReactJS + Docker-Compose ERROR | “Could not find a required file”"