I am trying to run my react web app in docker container, building the image works just fine but running the container gives me this error:
Starting the development server...
Failed to compile
./src/App.js
Module not found: Can't resolve './componenents/Navbar/NavBar' in 'usr/src/app/src'
As far as i know it should work but it doesn't, this is my dockerfile:
FROM node:10.16.3
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]
what am i doing wrong?
NOTE: all my stuff for the web application itself including the dockerfile is in a folder called client, i changed the build context on dockerhub to make this work.
Alright i fixed it, apperantly i renamed a file on my pc, but it was not renamed on github, so that's why docker couldn't find the file
Related
Hi I am working in react application. I have deployed app in kubernetes. I have below folder structure in react app
Below is my Dockerfile
# Fetching the latest node image on apline linux
FROM node:alpine AS development
# Declaring env
ENV NODE_ENV development
# Setting up the work directory
WORKDIR /al.web
# Installing dependencies
RUN pwd
RUN ls
COPY ./al.web/package.json /al.web
RUN npm install
# Copying all the files in our project
COPY . .
# Starting our application
CMD npm start
When I run the application in kubernetes I get below error
I am not sure what configuration is wrong here. Can someone help me to fix the the issue. Any help would be appreciated. Thanks
if you want your react app to start use npm start in the project folder if your project root folder isn't installed properly use npx create-react-app appname
I'm trying to npm run start a React application which was created with --template typescript.
Typescript is therefore installed (as a React dependency) but my Docker container complains with a generic error message that TypeScript wouldn't be installed. I'm therefore unable to start the application inside a Docker container.
Everything works, when I start the application (with the same package.json) outside the container.
Error
> frontend#0.1.0 start /app
> react-scripts start
It looks like you're trying to use TypeScript but do not have typescript installed.
Please install typescript by running npm install typescript.
npm ERR! Exit status 1
I added TypeScript via npm install typescript and rebuilded the Docker container. But it still shows the error message.
Even after adding typescript manually as a dependency (even inside the container with a direct call to npm install typescript there!), the container complained about not being able to find TypeScript (which doens't seem to be true as I can validate that TypeScript was installed inside the container as tsc -version shows me the correct output).
Code
My Dockerfile looks like this:
FROM node:15.4.0-alpine3.12
# set working directory
ARG app_path=/app
WORKDIR ${app_path}
# add `node_modules/.bin` to $PATH
ENV PATH ${app_path}/node_modules/.bin:$PATH
# set Docker port
EXPOSE 3000
# copy configs, no need to copy src files as they get bind mounted later on (see docker-compose)
COPY package*.json ./
COPY tsconfig.json ./
# install all app dependencies
RUN npm install --silent
# validate typescript installation
RUN tsc --version
My docker-compose.yaml file looks like this:
version: '3.8'
services:
frontend:
build:
context: ./frontend
dockerfile: ../Dockerfile
image: frontend:dev
container_name: dev_frontend_react
ports:
- 4000:3000
command: ['npm', 'run', 'start']
volumes:
- ${HOST_PROJECT_PATH}/frontend:/app
# add a virtual volume to overwrite the copied node_modules folder as the
# container installs its own node_modules
- node_modules:/app/node_modules
environment:
- NODE_ENV=development
restart: unless-stopped
volumes:
node_modules:
name: frontend_node_modules
Same question, non working solution
I found another solution to the same question here on StackOverflow:
Asked to install Typescript when already installed when building Docker image
But this solution is hard-copying the project into the container and creating an actual build. But that solution is not acceptable for me as it prevents the hot reload feature of React from working.
During Docker image build (i.e. in the Dockerfile) you are installing the dependencies in to the node_modules folder inside the container (RUN npm install --silent). Type script (tsc --version) works as it gets installed there.
Later, in the docker-compose file, you are replacing the node_modules folder with a folder from the host machine. So, effectively, the commands from the Dockerfile have no effect.
I'm not sure what your goal is, but I can see several options:
if you want the docker container to install dependencies into the folder on the host machine (?), you need to do it when the container is being started, not when the image is being build
if you just want to use dependencies from the host folder, make sure that the typescript is there
if your goal is to run the app on docker but still be able to edit and hot-reload the app, try mounting the src folder alone (but then you won't b able to add new dependencies)
UPDATE:
Actually your solution should work. Docker-compose should copy files from the node_modules inside the container into the mounted volume. There is one gotcha though: it does it only when the volume is newly created (see populate a volume using a container). So, to solve the problem, try removing the volume and rerun docker compose:
docker volume rm frontend_node_modules
Unfortunately you need to do it every time there are any changes to the dependiences. Alternatively you can use:
docker-compose down -v
which will remove volumes as well (by default docker-compose down does not remove volumes, thus the -v switch)
everyone. Have been banging my head against this for a while, and maybe someone else has a better idea of what my issue is. I have a react and lb4 application and I want to host it on our kubernetes cluster. I build the react project and put it into a build folder in my lb4 project and serve those files while using the lb4 backend also for APIs. I put everything in a docker container, and when I run the container locally, it works as I would expect. When I put the container on kubernetes, I am able to hit the APIs from the loop back project but get a 404 when trying to hit the GUI.
In my LB4 project, I have this to serve the static files:
constructor(options: ApplicationConfig = {}) {
super(options);
// Set up the custom sequence
this.sequence(MySequence);
// Set up default home page
this.static('/',path.join(__dirname, '../build'));
// Customize #loopback/rest-explorer configuration here
this.bind(RestExplorerBindings.CONFIG).to({
path: '/explorer',
});
this.component(RestExplorerComponent);
this.projectRoot = __dirname;
and here is my docker file that I'm using:
RUN mkdir -p /src/app
COPY . /src/app
WORKDIR src/app
ARG env_name
ENV NODE_ENV=env_name
ENV PUBLIC_PATH "/"
RUN npm install
RUN npm run build:client
COPY /src/client/build /src/server/
EXPOSE 3001
CMD ["npm", "run", "start"]
Anyone notice anything that might be the issue? Would appreciate it greatly. Thanks.
Edit: Kind of found the issue, I think. Looks like the copying of the static files at the copy step in my dockerfile doesn't quite work as I intended, so I think it's looking at an empty folder on the kubernetes cluster. Now just to see why that isn't working.
I have seen this question asked different ways on SO. However, I have not been able to find an answer that works for me. Perhaps I haven't done the right search. So here I go. I'm brand new to docker and have deployed a simple react app using docker. I am able to hit the react app when I run it locally on my host, but when I try to access it from the host while running in the container, my luck runs out.
I understand that the issue is that the container is listening on its loopback interface, but it should listen on all intefaces (0.0.0.0). My issue is that I am not sure how to do that. I've seen instructions on how to do it for a node js app, for python http.server, etc. But not for a react app.
My app is super straightforward. I've created an app using create-react-app. I am able to run it locally and see the react page (http://localhost:3000). I've create a standard Dockerfile for a react app:
FROM node:12.15.0-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]
I then built and ran it using the following commands:
docker build -t sampleapp .
docker run -p 3000:3000 -d sampleapp
And as mentioned am not able to see the app on http://localhost:3000
Any help would be ver appreciated. Thanks in advance.
Try adding this to your .env.development
PORT=3000
If you don't have .env.development then make it and add this env var and see if it works.
Without using NodeJs to serve the static file, I am trying to build Docker image for create react app with the below folder structure
sampleapp -
client
src
...
DockerFile
So client is build by create-react-app client, the application is just consuming services and rendering it.
Dockerfile:
FROM node:10.15.1-alpine
COPY . /var/panda/client
WORKDIR /var/panda/client
RUN npm install --no-cache && npm run build
EXPOSE 4000
CMD ["npm", "start"]
How can I start the Docker container in local and prod, and is the above Docker script is fine for running the application in production build?
If you're asking how to run an image, you simply do docker build -t client ., and then docker run client. Your Dockerfile is not fine for a prod environment because it runs as root. You should add the following lines just before the last line.
RUN adduser -D user
USER user
Once you've run npm run build you will have a set of static files you can serve. Anything that serves static files will work fine. One typical setup is to use a multi-stage build to first build the application, then serve it out of an Nginx image:
FROM node:10.15.1-alpine AS build
COPY . /var/panda/client
WORKDIR /var/panda/client
RUN npm install --no-cache && npm run build
FROM nginx:1.17
COPY --from=build /var/panda/client/build /usr/share/nginx/html
For day-to-day development, just use the ordinary CRA tools like npm run start directly on your desktop system. You'll get features like live reloading, and you won't have to mess with Docker volumes or permissions. Since the application ultimately runs in the browser it can't participate in things like Docker networking; except for pre-deployment testing there's not really any advantage to running it in Docker.