npm run build does not update the react components - node.js

i have a react project with the following package.json :
{
"name": "commonsensev2.0",
"version": "0.1.0",
"private": true,
"homepage": "http://localhost:9080/server/react",
"dependencies": {
"all": "0.0.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"chart.js": "^2.7.3",
"moment": "^2.23.0",
"node-sass-chokidar": "0.0.3",
"npm-run-all": "^4.1.5",
"popper.js": "^1.14.6",
"react": "^16.7.0",
"react-bootstrap": "^0.31.5",
"react-bootstrap-table": "^4.3.1",
"react-chartjs2": "^1.2.1",
"react-dom": "^16.7.0",
"react-localize-redux": "^2.17.5",
"react-moment": "^0.7.9",
"react-redux": "^5.1.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.0.14",
"redux": "^3.7.2"
},
"scripts": {
"build-css": "node-sass-chokidar src/sass/App.scss -o src/css/",
"watch-css": "npm run build-css && node-sass-chokidar src/sass/App.scss -o src/css/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"postbuild": "((ROBOCOPY build ../react /MIR) ^& if %ERRORLEVEL% lss 8 set ERRORLEVEL = 0)",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"bootstrap-toggle": "^2.2.2",
"datatables.net": "^1.10.19",
"numeral": "^2.0.6"
}
}
when i do npm run build i cannot see the changes on the html pages, i m using node 8.11.1 i downgraded it because i found somewhere that it maybe the reason why it does not work i'm also using "node-sass-chokidar": "0.0.3"
and the backend is a java server

I had the same issue, I deleted the old build folder on my local environment and ran npm run build again to generate a new build folder.

Just a wild guess here but I think you are running the wrong command. Because build is typically when you want to build code for a purpose like putting it on a server.
What you need to do is to npm run start, as that has the watch, that watches for changes and updates.
Just a minor thing, I would rename the start script to dev or serve. Generally more used I would say.

Related

Error during uploading mern stack project into heroku

In Procfile:
web: node Backend/server.js
In package.json of backend, I am using post build for react app. its saying cannot find module /app/backend/server.js.
{
"name": "ecommerce",
"version": "1.0.0",
"description": "",
"main": "Backend/server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node backend/server.js",
"dev": "nodemon backend/server.js",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm install --prefix frontend && npm run build --prefix frontend"
},
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"cloudinary": "^1.28.1",
"cookie-parser": "^1.4.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-fileupload": "^1.2.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.0.10",
"nodemailer": "^6.7.0",
"nodemon": "^2.0.13",
"stripe": "^8.197.0",
"validator": "^13.6.0"
}
}
My project is laid out like this:
Backend/
frontend/
Procfile
package-lock.json
package.json
Your start script tries to run node backend/server.js, but your file is actually at Backend/server.js. Heroku's filesystem is case-sensitive. You can use either option, but you must be consistent.
Here is one solution. Rename your directory:
git mv Backend backend
And update your Procfile:
web: node backend/server.js
Then commit and redeploy.

Heroku Deployment Continues to Fail at "Pruning devDependencies" Step

I continue to have issues deploying to Heroku and I can't find out what is going wrong for the life of me. The Heroku error log tells me this after it successfully builds my react app:
-----> Caching build
- node_modules
-----> Pruning devDependencies
npm ERR! Cannot read property 'match' of undefined
Here is my package.json
{
"name": "test",
"version": "1.0.0",
"homepage": "./",
"description": "test",
"main": "server.js",
"node": "v12.13.1",
"npm": "6.13.7",
"scripts": {
"heroku": "node server.js",
"client-install": "npm install --prefix client",
"build": "cd client && react-scripts build",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "John Doe",
"license": "MIT",
"dependencies": {
"#material-ui/core": "^4.8.0",
"axios": "^0.19.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"classnames": "^2.2.6",
"concurrently": "^5.1.0",
"date-fns": "^2.8.1",
"debug": "^4.1.1",
"depcheck": "^0.9.1",
"eslint-plugin-flowtype": "^4.6.0",
"express": "^4.16.4",
"fibers": "^4.0.2",
"growl": "^1.10.5",
"heroku": "^7.35.1",
"history": "^4.10.1",
"is-empty": "^1.2.0",
"jquery": "^3.4.1",
"jsonwebtoken": "^8.3.0",
"jwt-decode": "^2.2.0",
"material-table": "^1.54.2",
"material-ui": "^0.20.2",
"minimatch": "^3.0.4",
"moment": "^2.23.0",
"mongodb": "^3.5.3",
"mongoose": "^5.8.9",
"mongoose-global": "^1.0.1",
"morgan": "^1.9.1",
"node-sass": "^4.13.0",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"plaid": "^4.6.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-ga": "^2.7.0",
"react-plaid-link-button": "0.0.4",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"react-slick": "^0.25.2",
"react-stripe-elements": "^6.0.1",
"react-vis": "^1.11.7",
"redux-thunk": "^2.3.0",
"sass": "^1.24.0",
"slick": "^1.12.2",
"slick-carousel": "^1.8.1",
"typescript": "^3.7.4",
"update-mongo": "0.0.4",
"validator": "^12.2.0",
"vis": "^4.21.0-EOL"
},
"devDependencies": {},
"engines": {
"node": "12.x"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
What is perhaps most frustrating, is that I was able to deploy successfully once the other day but I am not sure what changed. Going back through my git I can't see anything that would have made any difference.
Things I have tried:
removing package.json
adding "devDependencies": {} to my package.json (although I
deployed successfully without it)
updating node and adding the engines section to my package.json to
match.
running npm prune locally
ensuring that all packages are updated and referenced appropriately in package.json
Things that I suspect could be the issue:
Maybe somehow the current version of my app that is actively deployed on heroku is interfering with my new deployment? That being said i have tried scaling down dynos and deploying. Additionally the npm ERR! Cannot read property 'match' of undefined seems to indicate something else?
Just run into this after my deploys inexplicably started failing after a number of successful ones.
Stopping heroku from caching node_modules seemed to do the trick for me.
heroku config:set NODE_MODULES_CACHE=false
Then git push heroku master
I don't have package-lock.json committed after hearing Heroku doesn't get on well with lockfiles, but wondering if that's the problem.
Please rm -rf node_modules && npm i
also be sure to track package-lock.json file
And as long as you are there, is not related but may be a good idea to add a .nvmrc file
node -v >> .nvmrc
Let us know if it helped
In the scripts section in package.json, only keep the start key and remove others.
Your scripts in the package.json should be,
"scripts": {
"start": "node server.js"
},
Also before deployment, build the react app manually.
Heroku messed up with all these build scripts.

Please install sqlite3 package manually after electron-packager on linux for windows

I am trying to package my app with electron-packager. My app have as dependencies sqlite3 and sequelize.
here is my package.json file :
{
"name": "electronjs_base",
"version": "1.0.0",
"description": "Projet de base Electron JS",
"main": "main.js",
"scripts": {
"start": "electron main.js",
"test": "echo \"Error: no test specified\" && exit 1",
"postinstall": "install-app-deps",
"rebuild": "electron-rebuild -f -w sqlite3"
},
"author": "Aurélien Colombet & Steven Servanton",
"license": "ISC",
"devDependencies": {
"electron": "^4.0.3",
"electron-builder": "^20.38.5",
"electron-packager": "^13.0.1",
"electron-rebuild": "^1.8.2"
},
"dependencies": {
"cors": "^2.8.5",
"ejs": "^2.6.1",
"electron-reload": "^1.4.0",
"express": "^4.16.4",
"formidable": "^1.2.1",
"fs": "0.0.1-security",
"path": "^0.12.7",
"sequelize": "^4.42.0",
"sqlite3": "^4.0.6"
}
}
I am on linux and I am trying to build my app for windows. I use electron-packager for that, with that command :
electron-packager . gamemaster_interface --overwrite --platform=win32 --arch=x64 --out=release-builds
My app works well on linux when I launch it with npm run start, but when I am trying to run it on windows with the executable file created by electron-packager I have a javascript error :
I don't know how to solve that problem, I have trying multiple things like adding sqlite3 in devDependencies instead of dependencies in the package.json but I still have the error.
Thank you for reading me and I hope someone have the solution :).
Have a nice day !

GatsbyJS blog not compiling anymore after "npm update"?

If it's a Gatsby, webpack or npm issue i don't understand yet.
I did these commands in terminal and they seem to have started the issue, trying to fix a material-ui "Popper" module that had a "could not find module" error.
npm install react-popper#next --save
npm install avj
npm install --save-dev webpack
npm install & npm update
Terminal:
error There was a problem loading the local develop command. Gatsby
may not be installed. Perhaps you need to run "npm install"?
Error: Cannot find module 'webpack/lib/removeAndDo'
package.json
{
"name": "auto-club-reviews",
"description": "Auto Club Reviews Blog",
"version": "1.0.0",
"author": "Sofianu Alin",
"dependencies": {
"#material-ui/core": "^1.4.3",
"#material-ui/icons": "^1.1.0",
"gatsby": "^1.9.277",
"gatsby-link": "^1.6.46",
"gatsby-plugin-feed": "^1.3.25",
"gatsby-plugin-google-analytics": "^1.0.31",
"gatsby-plugin-offline": "^1.0.18",
"gatsby-plugin-react-helmet": "^2.0.11",
"gatsby-plugin-react-next": "^1.0.11",
"gatsby-plugin-sharp": "^1.6.48",
"gatsby-plugin-typography": "^1.7.19",
"gatsby-remark-copy-linked-files": "^1.5.37",
"gatsby-remark-images": "^1.5.67",
"gatsby-remark-responsive-iframe": "^1.4.20",
"gatsby-remark-smartypants": "^1.4.12",
"gatsby-source-contentful": "^1.3.54",
"gatsby-source-filesystem": "^1.5.39",
"gatsby-transformer-remark": "^1.7.44",
"gatsby-transformer-sharp": "^1.6.27",
"lodash": "^4.17.10",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-helmet": "^5.2.0",
"react-hover": "^1.3.2",
"react-popper": "^1.0.2",
"typeface-roboto": "0.0.54"
},
"devDependencies": {
"eslint": "^5.3.0",
"eslint-plugin-react": "^7.10.0",
"gh-pages": "^1.2.0",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.14.2",
"webpack": "^4.16.5",
"webpack-command": "^0.4.1",
"webpack-dev-middleware": "^3.1.3",
"webpack-dev-server": "^3.1.5"
},
"homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
"keywords": [
"gatsby"
],
"license": "MIT",
"main": "n/a",
"repository": {
"type": "git",
"url": "git+https://github.com/gatsbyjs/gatsby-starter-blog.git"
},
"scripts": {
"dev": "gatsby develop",
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
"test": "echo \"Error: no test specified\" && exit 1",
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js' 'src/**/*.md'",
"develop": "gatsby develop",
"build": "gatsby build",
"deploy": "gatsby build --prefix-paths && gh-pages -d public",
"fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix gatsby-node.js"
}
}
Also tried to:
delete node_modules then npm install;
uninstall "webpack-cli": "^3.1.0" and install webpack-commander;
uninstall extract-text-webpack-plugin that seemed to be complained about in terminal;
Any ideas comrades?
Have you been experimenting with Gatsby v2? Your package.json shows React v16, which is a peerDependency of Gatsby v2, but not of Gatsby v1. In Gatsby v1 (which is what you have in package.json) you should not install React directly, it's installed as a dependency of Gatsby.
Webpack is also (both v1 and v2) a dependency of Gatsby. I don't think you should have it in package.json as a top level dependency.
I would recommend starting with a clean Gatsby starter, then copying your gatsby-node.js, gatsby-config.js, components, content, etc, into that project. Leave the package.json file. Then run npm install --save for every package that you explicitly import or require. Hopefully that gets you back to a working site.
Sidenote, personally, I would also recommend yarn over npm.
Gatsby clean-cache
Then delete node modules
and then
yarn start/npm install

Deploying angular 2 App (angular cli) to heroku

I built and angular 2 app with angular cli
ng build command works totally fine, it creates the dist folder.
In order to deploy it I followed this tutorial
Deploy angular 2 app to heroku
When I follow all the steps, I type heroku open but I get an app error
ng: not found
log
here is my package.json file if you want to see it
It seems that is problem of angular-cli and his command ng
but here in my package.json i have it
`{
"name": "rusticstock",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "http-server",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor",
"preinstall": "npm install -g http-server",
"postinstall": "ng build && mv dist/* ."
},
"private": true,
"dependencies": {
"angular-cli": "1.0.0-beta.16",
"#angular/common": "2.0.2",
"#angular/compiler": "2.0.2",
"#angular/core": "2.0.2",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.2",
"#angular/platform-browser-dynamic": "2.0.2",
"#angular/router": "3.0.0",
"core-js": "^2.4.1",
"bootstrap": "^3.3.6",
"ng2-bs3-modal": "^0.10.4",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23",
"#types/jasmine": "^2.2.30",`enter code here`
"codelyzer": "~0.0.26",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "2.0.2"
},
"devDependencies": {
},
"engines": {
"node": "6.6.0",
"npm": "3.10.3"
}
}
`
One more thing, when I'm deploying I see installing components like #angular/common ... but no all of them.
any suggestion would be appreciated.
looks like your heroku app instance does not have angular-cli installed.
I found a way to get it installed.
In your package JSON, add preinstall command like this
"scripts": {
"start": "http-server",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor",
"preinstall": "npm install -g angular-cli",
"postinstall": "ng build && mv dist/* ."
},
This will get angular-cli installed on heroku server and you will not get ng command not found related errors.
While "git push heroku master" is going on, heroku runs the package.json file.
By default, however, Heroku will only install the packages listed in the dependencies object and will ignore those in devDependencies. Since we want the application build step to take place on the server rather than on our local machine, we need to adjust the package.json file a bit.
Angular CLI apps put the #angular/cli module itself as a dev dependency, meaning that we won't be able to access any ng commands on the server. To get around this, we need to move it to dependencies.
// package.json
"dependencies": {
// ...
"#angular/cli": "7.3.9",
},
My problem was that I was working in another branch and heroku only was taking the progress made in the master branch

Resources