i'm new with node, i have to deploy my first application.
this is my package.json:
{
"name": "tbcw",
"description": "TheBestCollectors",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"truffle-compile": "truffle compile",
"truffle-serve": "truffle serve",
"truffle-test": "truffle test --network test"
},
"dependencies": {
"vue": "^2.4.4",
"vue-draggable-resizable": "^1.5.1",
"vuex": "^2.4.1",
"web3": "^1.2.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.7.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"ejs": "^2.5.7",
"ejs-compiled-loader": "^2.2.0",
"eslint": "^4.8.0",
"ethereumjs-testrpc": "^4.1.3",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.7",
"node-sass": "^4.9.4",
"null-loader": "^0.1.1",
"sass-loader": "^5.0.1",
"truffle": "^3.4.11",
"truffle-contract": "^1.1.6",
"vue-loader": "^12.1.0",
"vue-template-compiler": "^2.4.4",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.9.1"
}
}
in local with dev mode everything works correctly.
Now I would like to publish my app on heroku.
after uploading the files with herokuCLI, when i run the app, I get an error page.
reading them via the command "heroku logs --tail"
based on different attempts i got different errors, like webpack not found, start script not found, cross-env not found...
how can i proceed?
Please let me know if you need more info.
thank you for all the replies
Looking at your package.json, it seems your are working on a client-side application. Such applications run in the client's browser, rather than in Node. Heroku is for running server-side applications, so it's probably not the right place to deploy your app.
Take a look at something like Vercel or Netlify instead. They provide tools to automatically build and deploy client-side applications to edge networks with only a few clicks.
Heroku, by default, doesn't install devDependencies. It seems your cross-env and webpack are listed as devDependencies. And you don't even have a start script.
Related
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.
So I'm working on some projects within my work space and I notice that a lot of my dependencies are roughly 3 years old, including React itself. The thing I'm worried about is that if I run npm install or npm update that things might break and I could run into a plethora of issues. In my scenario I would like to know if it is better for me to do an npm install, npm update, or just leave it the way it is? (which I'm sure no one would recommend).
Here is our package.json file
{
"name": "my-app",
"version": "0.0.2",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "node src/entry",
"start-dev": "npm-run-all --parallel build babel-node",
"serve": "live-server public/",
"build-linux": "clear && webpack && clear && yarn build-server && clear && yarn start",
"build-windows": "cls && webpack && cls && yarn build-server && cls && yarn start",
"build-server": "babel src/server -d src",
"dev-server": "webpack-dev-server",
"babel-node": "nodemon --exec babel-node src/server.js"
},
"dependencies": {
"aws-sdk": "^2.358.0",
"axios": "^0.19.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "7.1.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.2",
"core-js": "^2.5.3",
"css-loader": "0.28.4",
"express": "latest",
"file-loader": "^1.1.5",
"fs": "0.0.1-security",
"google-maps-react": "^1.1.4",
"html2canvas": "^1.0.0-rc.3",
"image-webpack-loader": "^4.6.0",
"immutability-helper": "^2.4.0",
"jquery": "^3.4.1",
"jsonwebtoken": "^8.1.0",
"jspdf": "^1.5.3",
"lodash": "^4.17.14",
"moment": "^2.22.2",
"node-sass": "^4.11.0",
"nodemailer": "^4.7.0",
"normalize.css": "7.0.0",
"npm": "^6.10.1",
"promise-mysql": "^3.1.0",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-csv": "^1.0.14",
"react-dom": "^16.0.0",
"react-router-dom": "4.2.2",
"react-scripts": "^2.1.3",
"sass-loader": "6.0.6",
"socket.io": "^2.0.3",
"style-loader": "0.18.2",
"table2csv": "^1.1.1",
"twilio": "^3.24.0",
"validator": "8.0.0",
"webpack": "^3.12.0",
"webpack-dev-middleware": "^3.5.0",
"webpack-dev-server": "^3.1.14"
},
"devDependencies": {
"concurrently": "^3.5.0",
"npm-run-all": "^4.1.1"
}
}
I already tried updating my react and react-dom versions to the latest, but I started getting warnings about componentWillMount and componentWillReceiveProps being outdated. I tried updating react-router-dom to get rid of some of those warnings, considering they were pointing to things like Link, Route, Switch, but that did not suppress them.
If anyone knows what the best way for me to go about this would be, and what the effects of npm install vs npm update would do to my system that would be great. I know what each of them is capable of doing, but I'm just trying to be cautious and want to know which one would be better in my scenario. Thanks.
When you run npm install on a project, npm installs latest versions satisfying the semantic versioning ranges defined in your package.json. After initial install, re-running npm install does not update existing packages since npm already finds satisfying versions installed on the file system.
When you run npm update it freshen already installed packages. When you run npm update, npm checks if there exist newer versions in the repository that satisfy specified semantic versioning ranges and installs them.
I would say "bite the bullet" and update them to latest. It will be a tedious task but if you are looking to maintain this for longer run, it is your best bet.
Updating stuff can break things or some dependencies will be deprecated after an update. I would not update anything unless it is necessary.
I am new to reactjs and trying to run code but showing error. I m not getting proper solution about this error.
I newly install reactjs , node js and running first time on xampp localhost. I tried
npm install #babel/core --> this installed #babel/core 7.4.4
npm install babel-core --save-dev --> this set babel/core to 6.26
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.4.1"
},
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0"
}
}
I already run npm command from command prompt to update babel/core and expecting upgradation but every time same version and showing error.
highlighted area in image with blue color is main error to solve
its not an option for you to use react from cdn?
https://reactjs.org/docs/cdn-links.html
How you are a rookie, i recommend to use cdn and "web server for chorme", chorme extention. After get some experience you can jump to node stuff.
I've made a web app using create-react-app which works fine, and I usually run it using npm start but now I have to deploy it and make it work with nodejs forever module.
If I do node src/index.js it will give a syntax error and to fix this I used babel to transpile es6 to es5, but again I get the following syntax error when importing the css file:
/client/src/stylesheets/menu.css:1
(function (exports, require, module, __filename, __dirname) { header {
^
SyntaxError: Unexpected token {
This is my package.json file:
{
"dependencies": {
"async": "^2.5.0",
"axios": "^0.16.2",
"classnames": "^2.2.5",
"date-diff": "^0.1.3",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.4",
"react": "^15.6.1",
"react-bootstrap": "^0.31.2",
"react-bootstrap-table": "^4.0.2",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.12",
"react-select": "^1.0.0-rc.5",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"shortid": "^2.2.8",
"validator": "^8.1.0"
},
"scripts": {
"start": "react-scripts-with-stylus start src/stylesheets/menu.styl",
"build": "react-scripts-with-stylus build src/stylesheets/menu.styl",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:8081",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"create-react-app-stylus": "^1.1.1",
"webpack": "^3.5.5"
}
}
To sum up the answer to this question:
If you need to deploy it, you should make a build, not run your application directly.
run npm run build and it will generate build files into a new folder.
You should not try to run the application with npm at all. You should copy all the files from the build folder into the root of your server and when a user opens the page it will be shown index.html file.
If your code has changed and is ready for production you can rebuild it, or you can automate this process with some CI tool.
You should only have React client files on your Git repository, build files should be generated during the build process on your server.
I'm trying to deploy a nodejs app to heroku and I am getting the following error when I check the heroku logs,
sh:1: npm-run-all : not found
My package.json looks like this
{
"name": "web-training",
"version": "1.0.0",
"description": "web-training",
"scripts": {
"prestart": "babel-node tools/startMessage.js",
"start": "npm-run-all --parallel open:src lint:watch test:watch",
"open:src": "babel-node tools/srcServer.js",
"lint": "node_modules/.bin/esw webpack.config.* src tools",
"lint:watch": "npm run lint -- --watch",
"test": "mocha --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch",
"clean-dist": "npm run remove-dist && mkdirp dist-server/dist",
"remove-dist": "node_modules/.bin/rimraf ./dist-server/dist",
"build:html": "babel-node tools/buildHtml.js",
"prebuild": "npm-run-all clean-dist test lint build:html",
"build": "babel-node tools/build.js",
"postbuild": "babel-node dist-server/server.js"
},
"author": "Cory House",
"license": "MIT",
"dependencies": {
"babel-polyfill": "6.8.0",
"bootstrap": "3.3.6",
"compression": "^1.6.1",
"express": "^4.13.4",
"install": "^0.8.4",
"jquery": "2.2.3",
"material-ui": "^0.16.7",
"npm": "^4.0.5",
"open": "0.0.5",
"rd-react-overlay": "^1.4.2",
"react": "15.0.2",
"react-dom": "15.0.2",
"react-native-search-bar": "^2.16.0",
"react-native-vector-icons": "^4.0.0",
"react-redux": "4.4.5",
"react-router": "2.4.0",
"react-router-redux": "4.0.4",
"react-skylight": "^0.4.1",
"react-tap-event-plugin": "^2.0.1",
"redux": "3.5.2",
"redux-thunk": "2.0.1",
"toastr": "2.1.2"
},
"devDependencies": {
"axios-mock-adapter": "^1.7.1",
"babel-cli": "6.8.0",
"babel-core": "6.8.0",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-register": "6.8.0",
"colors": "1.1.2",
"compression": "1.6.1",
"cross-env": "1.0.7",
"css-loader": "0.23.1",
"enzyme": "2.2.0",
"eslint": "2.9.0",
"eslint-plugin-import": "1.6.1",
"eslint-plugin-react": "5.0.1",
"eslint-watch": "2.1.11",
"eventsource-polyfill": "0.9.6",
"expect": "1.19.0",
"express": "4.13.4",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.8.5",
"jsdom": "8.5.0",
"mocha": "2.4.5",
"nock": "8.0.0",
"npm-run-all": "1.8.0",
"open": "0.0.5",
"react-addons-test-utils": "15.0.2",
"react-search-component": "^1.1.2",
"redux-immutable-state-invariant": "1.2.3",
"redux-mock-store": "1.0.2",
"rimraf": "2.5.2",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.0",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.10.0"
},
"repository": {
"type": "git",
"url": "https://github.com/XXX/YYY"
}
}
When I run my app locally with npm run build in the command line, it works perfectly.
Any suggestions?
I'm adding Procfile content:
web:npm run build
I'm not sure that's ok.
You'll need npm-run-all added to your "dependancies" and not on your "devDependancies" in your package.json.
This is because on deploying to Heroku, npm prunes your "devDependancies" when making a production build.
Just wanted to share my experience since I had a similar issue when deploying to Heroku using npm-run-all.
It seems like Heroku runs the start script by default when building the application and is unable to run npm-run-all successfully (I found out after running heroku logs in my terminal). I originally had my scripts like this (notice how I'm using npm-run-all in my start script) and encountered an application error.
I simply changed the start script back to just node server.js and created a new script to run npm-run-all, like this. This worked for me.
(Sorry about the image links. SO won't let me post images unless I have at least 10 reputation.)
Hope this helps anyone else encountering the same problem.
· Firstly make your account in git and heroku
· Install git and heroku on your system..if your using windows must install git bash
· Make your repository in git
· Now find out command below
-git init
-git clone {git repository url}
-cd {repository folder name}
· Copy your code on your local git repository folder
· Open terminal go to your repository folder then apply below commands
-git init
-git add *
-git commit -m "your comment"
-git status
-git push origin master
· Check your git repository on git cloud
· Open new terminal apply below commands
-git clone {repository url}
-cd {repository url}
-heroku login
-heroku create {name of your application on heroku}
-git remote(to verify heroku)
-git push heroku master
-heroku open
**Please follow above steps for deploy your code in heroku*
You can make demo node js project for heroku deployment by using below commands
express {name of project} --ejs
cd {name of project}
npm install
npm start