I have a project that I want to dockerize. I run npm install and npm build with no problem on my computer, but it has some problems when I build with Docker.
Docker output:
Sending build context to Docker daemon 56.96MB
Step 1/7 : FROM node:12.2.0-alpine
---> f391dabf9dce
Step 2/7 : WORKDIR /app
---> Using cache
---> b50a8efbf074
Step 3/7 : ENV PATH /app/node_modules/.bin:$PATH
---> Using cache
---> 3358967a13ab
Step 4/7 : COPY package.json /app/package.json
---> Using cache
---> 851ac31a0adb
Step 5/7 : RUN npm install
---> Running in 8cc36a435cec
npm WARN deprecated core-js#1.2.7: core-js#<2.6.8 is no longer maintained. Please, upgrade to core-js#3 or at least to actual version of core-js#2.
It is stuck in this here:
Dockerfile:
# base image
FROM node:12.2.0-alpine
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install
RUN npm install react-scripts#3.0.1 -g --silent
# start app
CMD ["npm", "start"]
I have done this with other dockerfiles, but the result was the same.
package.json:
{
"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"express": "^4.17.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-scripts": "2.1.8"
},
"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"
]
}
So, this might be a temporary solution till this is properly addressed, but you can use
npm config set registry http://registry.npmjs.org/
I have used it for docker environment and it worked fine.
when ever you run docker run my-image it will run in a new container and previous container remain unused,
we can use docker build location-of-the-Dockerfile --no-cache switch to not using cached images but it didn't work for me
in my case, removing unused containers and images fixed the problem ,
remove all containers > docker rm $(docker ps -aq)
remove all images if you want >> docker image rm $(docker images -q)
I had the same issue. I just waited for 1 hour and it went to the next step.
Edit :
While building the npm install downloads all the packages and it takes time to do that, it depends on the size of your application how long will it take.
Related
I've been stuck with this problem for a couple of days now. I am trying to dockerize a django REST API + react (create-react-app) application. The react application uses craco for building since I am using tailwindcss. I followed the this guide to integrate Tailwind with the React app and it's working when I run yarn start locally.
Guide: https://tailwindcss.com/docs/guides/create-react-app
The problem is it is throwing /bin/sh: craco: not found error when I run it using docker-compose. I even tried adding RUN yarn add #craco/craco -g after RUN yarn in the frontend Dockerfile but it is showing the same error.
Error when running docker-compose up --build:
...
Step 8/9 : COPY . /app/frontend/
---> 19e0247cde64
Step 9/9 : EXPOSE 3000
---> Running in 43f7d970d460
Removing intermediate container 43f7d970d460
---> a20ae2148d4b
Successfully built a20ae2148d4b
Successfully tagged react_frontend:latest
Creating react_frontend_container ... done
Attaching to react_frontend_container
yarn run v1.22.15
$ craco start
frontend_1 | /bin/sh: craco: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
react_frontend_container exited with code 127
Frontend Dockerfile:
FROM node:16-alpine
WORKDIR /app/frontend
COPY package.json .
COPY yarn.lock .
RUN yarn
COPY . /app/frontend/
EXPOSE 3000
docker-compose.yml:
version: '3.8'
services:
... (postgres db and django api services)
frontend:
build: ./frontend
command: ["yarn", "start"]
stdin_open: true # docker run -i
tty: true # docker run -t
volumes:
- ./frontend:/app/frontend
- node-modules:/app/frontend/node_modules
container_name: react_frontend_container
ports:
- "3000:3000"
volumes:
node-modules:
package.json:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.4.3",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^9",
"postcss": "^7",
"tailwindcss": "npm:#tailwindcss/postcss7-compat"
}
}
The issue is that you map your host directory and volume onto the directories in the image that contain the node modules and the app files.
Try removing this section in the docker-compose file. That way you won't overwrite what's in the image and craco will be available.
volumes:
- ./frontend:/app/frontend
- node-modules:/app/frontend/node_modules
One thing to be aware of when you use docker-compose to both build and run your image, is that the volumes are only mapped during the run phase and not during the build.
#Hans Kilian answer solves the problem but when you edit, your code changes don't reflect.
With the anonymous volume ('/app/frontend/node_modules'), the node_modules directory wouldn't be overwritten by the mounting of the host directory at runtime
By changing your volumes section, you solve your issue and keep the fast development feedback loop
volumes:
- ./frontend:/app/frontend
- /app/frontend/node_modules
You can read more here
I had the same issue and solved by doing above ^
I am extremely new to React, I successfully push my code in Heroku at https://react-heroku-juvie.herokuapp.com/ ,but I'm still stuck at this
Edit src/App.js and save to reload.
What I did is
npx create-react-app react-heroku
cd react-heroku
npm run build
npm i -g heroku (...login creds)
heroku create react-heroku-juvie
git remote add heroku
git add.
git commit -m "Initial Commit"
git push heroku master
I want my app to function and display. How do I do this? Here's my src code https://github.com/juvielone/pocketNote.git
I had the same problem but in fact after running your app locally you are supposed to produce a build, see https://create-react-app.dev/docs/deployment/
I don't know how to proceed with Heroku, you could begin with the command:
$ npm run build
I guess it's quite complicated with heroku, so I suggest you try with Github Pages.
Here is what I did with github pages: I began with the command:
$ npm install --save gh-pages
(in the main directory of my app).
After that in my package.json file I added 3 lines: 1 for my homepage (line 5) and 2 for the "predeploy" and "deploy" scripts in the scripts section (lines 15 and 16), as here (it's the beginning of my package.json file):
{
"name": "client",
"version": "0.1.0",
"private": true,
"homepage": "https://SebastienBosca.github.io/defi3w",
"dependencies": {
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-bootstrap": "^2.2.3",
"react-dom": "^17.0.2",
"react-scripts": "3.2.0",
"web3": "^1.6.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
After that I ran
$ npm run deploy
(which runs npm run build and gh-pages -d build); I am asked my Username (put your email or usernam on github) and my password (here, putting your Personnal Access Token is mandatory, you password won't work).
That's all !
I'm trying to build several Docker services in my docker-compose.yml file that would launch my Django/MySql backend as well as my React client application. I have this section in my docker-compose.yml to deal with the React portion ....
client:
build:
context: ./client
volumes:
- ./client:/app
ports:
- '3001:3000'
restart: always
container_name: web-app
environment:
- NODE_ENV=development
- REACT_APP_PROXY=http://localhost:9090
depends_on:
- web
Then I have built the following client/Dockerfile to configure the React container ...
FROM node:10-alpine AS alpine
# A directory within the virtualized Docker environment
# Becomes more relevant when using Docker Compose later
WORKDIR /app/
# Copies package.json and package-lock.json to Docker environment
COPY package*.json ./
# Installs all node packages
RUN npm install
# Finally runs the application
CMD [ "npm", "start" ]
But when my container starts up, it dies with the below error ...
web-app | Failed to compile.
web-app |
web-app | ./node_modules/react-tag-input/dist-modules/components/ReactTags.js
web-app | Module not found: Can't resolve 'react-dnd' in '/app/node_modules/react-tag-input/dist-modules/components'
I thought my "RUN npm install" above would save the day, but I guess not. Is there a way to somehow detect what modules aren't installed and install them when my container launches?
Edit: package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"bootstrap": "^4.4.1",
"jquery": "^1.9.1",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.17",
"react-device-detect": "^1.12.1",
"react-dom": "^16.12.0",
"react-hamburger-menu": "^1.2.1",
"react-native-flash-message": "^0.1.15",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1",
"react-tag-input": "^6.4.3",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "NODE_ENV=development react-scripts build",
"build:prod": "NODE_ENV=production react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"proxy": "http://localhost:8000",
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Two things are happening here:
Your volumes: directive overwrites everything in the /app tree, including node_modules.
Your Dockerfile doesn't actually COPY the application code into the image (so you need the workaround of using volumes: to put it there).
You can fix this by updating your Dockerfile
FROM node:10-alpine
WORKDIR /app/
COPY package*.json ./
RUN npm install
# Actually copy the application code in
COPY . ./
CMD ["npm", "start"]
If you don't already have a .dockerignore file, create it containing the line node_modules, to keep that host directory from being built into the image.
Finally, delete the volumes: from your docker-compose.yml file.
If you change your front-end code, you will need to docker-compose up --build to cause the image to be rebuilt.
If you want a live-development environment, you can use Node directly on the host, even if most of the rest of your stack is running in Docker. This is especially true for front-end code: since the code that's being served actually runs in the end user's browser, it can't directly communicate with Docker networking or otherwise really take advantage of being in Docker at all.
# Start everything besides the front-end
docker-compose up -d web
# Start a dev server in the usual way
export NODE_ENV=development
export REACT_APP_PROXY=http://localhost:9090
npm start
I followed this youtube tutorial to deploy my react app to github pages. I made my react app in codesandbox and exported my sandbox to my github. I downloaded node.js, npm, and git.
My folder structure:
Users > test > package-lock.json + andair-master > (inside andair-master) node_modules + build > (inside build) public + src + package.json
I downloaded my github project "andair-master" and copied and pasted its contents into an empty folder "test".
I opened Git Bash and changed directories until I was in "andair-master". I did "git init" then "git remote add origin https://github.com/develijahlee/andair.git" then I tried "npm run deploy". I realized I was missing a "build" folder so I made one within the "andair-master" folder. Then I put my "src" and "public" folders inside the "build" folder and tried running "npm run deploy". Still not working. I notice that my github is missing a gh-pages branch. I am not sure how to make a gh-pages branch or why "npm run deploy" is not working. If anyone could tell me if I'm missing a step, that would be greatly apprecitated. Thank you.
There are a few missing dependencies in your create-react-app project. This probably happened because you tried to export the project from codesandbox (I'm not sure though)
You have to fix those first.
Dependency 1 (react-scripts):
npm install react-scripts --save-dev
Dependency 2 (node-sass because you are using scss in your project)
npm install node-sass --save
Dependency 3 (gh-pages)
npm install gh-pages --save-dev
After the above steps are completed, verify your package.json to match below structure
{
"name": "and-air",
"version": "1.0.0",
"description": "",
"keywords": [],
"main": "src/index.js",
"homepage": "https://develijahlee.github.io/andair/",
"dependencies": {
"#fortawesome/fontawesome-svg-core": "1.2.25",
"#fortawesome/free-regular-svg-icons": "5.11.2",
"#fortawesome/react-fontawesome": "0.1.5",
"node-sass": "^4.13.0",
"react": "16.9.0",
"react-dom": "16.8.6"
},
"devDependencies": {
"gh-pages": "^2.1.1",
"react-scripts": "^3.2.0",
"typescript": "3.3.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Now you can run the deploy script
npm run deploy
After this step, verify that a new branch created with name gh-pages
Click on the settings tab in github
Scroll down to the GitHub Pages section and switch your branch to gh-pages branch.
You should get a success message when the page is live.
Here is what deploy script in your code:
"deploy": "gh-pages -d build"
Which is means gh-pages tool use build directory to make it deploy, so you need two things in order to make it work
Create a build folder properly with the following command:
npm run build
now install gh-pages tool for your add locally:
npm i gh-pages
Now you can run deploy command, and it'll work.
I hope this can be helpful to you.
how to run npm start
Bhanukas-MacBook-Pro:Shopping Card Admin Panel bhanukaisuru$ npm start
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in: npm ERR!
/Users/bhanukaisuru/.npm/_logs/2019-05-01T05_42_52_916Z-debug.log
package.json file
{
"name": "shopping-cart-admin-panel",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:3000"
}
I can see you do have "start" script in your package.json
"scripts": {
"start": "react-scripts start", <--- here
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
react-scripts is a set of scripts from the create-react-app starter pack.
You need to run npm start command in your terminal in order to run the app.
In common apps, the start script looks like so:
"start": "npx node index.js"
Where index.js can be also the server.js file
it is because of global installation of create-react-app or your node.js is not updated.follow the below steps
uninstall react from global
----> npm uninstall -g create-react-app
Then try to update the npm and all the packages.
----> npm install -g npm#latest
Now create your new react app
----> npx create-react-app yout-app-name
I had this same problem at an early stage. Getting the error:
npm ERR! missing script: start
For starters, make sure that you are in the "client" (cd client) or whichever name that you chose to build your creat-react-app 's client side.
It seems as if you already have your start and react-scripts, so hope this helps.
I had the same issue and spent a whole day trying to fix it, only to realize that the root folder in which I created the react app had a "&" sign in it. npm has looked up the start script on an invalid folder path by omitting the characters before and including the &. Once I moved the project to a no-nonsense folder path, everything worked flawlessly. Hope this helps out a Node/React newbie like me.
Suggestions -->
-sometimes , if you install yarn specifically using $ npm install -g yarn., this blocks all sort of scripts and react dom to install and it creates yarn.lock file which blocks it creating the scripts .
So uninstall yarn using
$ npm uninstall -g yarn
and then delete all specific folders that were created previously on the project.
And run
$npx create-react-app my-app
Happy Hacking!
ERR: Script missing
For a solution follow these steps in PowerShell
uninstall react from global
npm uninstall -g create-react-app
Then try to update the npm and all the packages.
npm install -g npm#latest
Now create your new react app
npx create-react-app yout-app-name
consider you checked any app from git
open your package.json
under the scripts section, you will have the field called start
for the create react app,this will be like "start": "npx node index.js
But for your app, you may have customized scripts something like
"start:env": "some env configs"
just try to run cmd in your terminal npm run start:env
Dear Guys in most of our cases everything is Ok!
The most common that we do in fact, is that we start the same path in our code editor that we have already choosen for already existing folders. So while working with react make sure that you have open the right folder with right path in you code editor and then simply!
----npm start"--
It would almost in all cases if you take this little caution, Otherwise all your codes will be useless if apply this on wrong path or folder.