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
Related
I am building a react app using cra, so the problem is the application just has the client side code which means there is no nodejs part.
I have two different environments one is development and one is production, as cra tells there is a order of preference:
.env
.env.development
.env.production
So if .env.production file is there in repo it will take that one and use that config based on the script that I give, if I use npm run build it will use .env.production and if I use npm start it will use .env.development if the file is there.
So I can add .env, .env.development, .env.production, but when I build the image in the Docker I can give only one command either it should be npm start or npm run build. So how should I solve this?
Install a local development environment; typically your only host dependency will be Node itself. Use the .env.development file there, via something like the Webpack dev server, with a command like yarn start.
Use Docker principally as a deployment mechanism. Your Dockerfile can build your application using the .env.production file, and then copy it into something like an Nginx container that doesn't need Node at all. It should follow the pattern in the CRA Creating a Production Build docs. Loosely,
FROM node:lts AS build
WORKDIR /app
COPY package.json package.lock .
RUN npm install
COPY . .
ENV NODE_ENV=production
RUN npm run build
FROM nginx
COPY --from=build /app/build /usr/share/nginx/html
# Base image provides default EXPOSE, CMD
This pattern gets around all of the difficulties of trying to make Docker act like a local development environment (filesystem permissions, node_modules not updating, live reloading being flaky, ...) by just using an actual local development environment; but at deployment time you get the benefits of a self-contained Docker image with no host dependencies.
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
I have to use an ejected React CRA, and since there's multiple react ui projects within this app I'm working on, I'm trying to build a base container for the build scripts/dependencies and then use that base container for all the frontend instances so that maintaining those react webpack scripts are easier.
Github Repo: https://github.com/StupidIncarnate/test-containers
When I have it install the package.json for the actual ui project, it seems like the react scripts get confused by the multiple node_modules and can't access the node_modules where the webpack / babel stuff live.
Docker Layered Container Structure (Linux Containers)
usr
src
package.json
node_modules
scripts
config
app
node_modules
src
public
package.json
containers/app-local/ui/Dockerfile
FROM container-ui
# 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 ./app-local/ui/package.json /usr/src/app/package.json
#COPY ./app-local/ui/package-lock.json /usr/src/app/package-lock.json
#RUN npm install
COPY ./app-local/ui/src /usr/src/app/src
COPY ./app-local/ui/public /usr/src/app/public
# set working directory
WORKDIR /usr/src
If I uncomment out the copy packages and npm install lines, when I run the react app, I get this compiler error:
CompilerError
But if I keep it commented out, I can't install packages needed just for that ui instance.
I have created a test React application and I started it with the create-react-app. I am starting it with with yarn start, but that starts the debug version of the application. I did npm run build and it created the build folder, however when I do yarn start from the /build folder, it still starts the debug version of the application. I need this for testing performance with the optimized version. How can I solve this?
You can actually use static server to run build version of your app. It's doable with serve. You can test it with:
npm run build
npx serve -s build
Navigate inside the directory of your app first.
According to the official create-react-app website. When you run npm run build or yarn build you create a build directory with a production build of your app.
After running the command above the next thing you can do to check the build version of your app is to install serve to serve your static site on the port 5000 by default.
npm install -g serve
serve -s build
This will copy the link to your clipboard that you can paste in your browser and see the build version of your app.
You're trying to move from a development build to a production build with create-react-app you need to deploy it using a web server, I would recommend using Heroku or a droplet or you can use Netlify which has a simple set up procedure using the below commands:
cd project-name
npm run build
npm install netlify-cli -g
netlify deploy
Follow command line prompts and choose yes for new project and ./build
as your deploy folder and voila you have a production React app!
You can host the app locally using apache, nginx, express
If you want to run your app in browser with build files served locally from the filesystem (i.e., without a web server), you can put this in your package.json:
"homepage": ".",
Now
build your app with npm run build.
launch <your app>/build/index.html in the browser.
Note: This solution is not suggested if your app (or some routing library) is using the HTML5 pushState history API. https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing
We have an app written in Angular
We will use an nginx container to host the angular
but the problem is where we have to perform the npm install for creating the /dist folder in angular.
Do we have to perform it in the dockerfile of our nginx-webserver or is this against the rules?
You are obviously using node as your dev server and want to use NGINX as your prod server? We have a similar setup
this is how we do it ...
in our dev environment, we have /dist on .gitignore
on a push to git we have a Jenkins job that does a build (this does the npm install inside a Jenkins build server)
on a successful Jenkins job we do a docker build (a downstream job), the docker build copies the /dist files into the docker image
we then do a docker push
the resulting docker image can be pulled from any server - hope that helps
would welcome your thoughts :)
PS The problem with doing the npm install during the docker build is that your docker container becomes messy. You end up installing loads of software inside it just for setup purposes.
All you really want in your docker image is NGINX serving up your build files.
This is why we do not do an npm install during the docker build.