My react app fails to start when running in Heroku. I am using Luke McDonald's startup page located here: https://github.com/lukemcdonald/holly-react
Here is what my package.json scripts section looks like:
"scripts": {
"build": "npm run build:css && vite build",
"build:css": "postcss styles/tailwind.css -o src/assets/styles.css",
"dev": "concurrently \"npm run dev:css\" \"vite\"",
"dev:css": "postcss styles/tailwind.css -o src/assets/styles.css --watch",
"preview": "vite preview",
"predeploy": "npm run build",
"start": "concurrently \"npm run dev:css\" \"vite\"",
"deploy": "gh-pages -d dist"
},
When I push to heroku, the build succeeds. But it to fail to start:
app[web.1]: /tmp/start-497558d9.sh: 1: concurrently: not found
heroku[web.1]: Process exited with status 127
heroku[web.1]: State changed from starting to crashed
I added concurrently to my dependencies, to no avail
"dependencies": {
"clsx": "^1.1.1",
"firebase": "^9.9.3",
"gh-pages": "^4.0.0",
"postcss-import": "^14.1.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router-dom": "^6.3.0",
"scrollreveal": "^4.0.9",
"concurrently": "^7.3.0"
},
"devDependencies": {
"#tailwindcss/forms": "^0.5.2",
"#tailwindcss/typography": "^0.5.2",
"#vitejs/plugin-react": "^1.3.2",
"autoprefixer": "^10.4.7",
"concurrently": "^7.3.0",
"eslint": "^8.16.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0",
"postcss": "^8.4.14",
"postcss-cli": "^9.1.0",
"prettier": "^2.6.2",
"prettier-plugin-tailwindcss": "^0.1.11",
"tailwindcss": "^3.0.24",
"vite": "^2.9.9"
}
Don't try to run concurrently \"npm run dev:css\" \"vite\" on Heroku. That command is intended for development environments (such as your local machine).
You are likely trying to serve the production build of your app, which does not require concurrently at all. Just run npm run preview, which runs vite preview, which -- as of Vite 3 -- uses sirv to serve the build output directory.
However, you don't necessarily need to use vite preview. You could use any other HTTP server pointed at the build output directory (e.g., zeit/serve or http-server).
Related
I'm using a parcel bundler instead of a react-scripts which uses npm run build-prod instead of npm run build but it doesn't create a build folder instead they all in a dist folder so i changed the deploy script in the package.json to "deploy": "gh-pages -d dist" instead of the standard "deploy": "gh-pages -d build" which will give an error saying build script is missing , after i tried deploying this to git hub pages but i get an empty screen
"scripts": {
"predeploy": "npm run build-prod",
"deploy": "gh-pages -d dist",
"clean": "rm dist/bundle.js",
"start": "parcel src/index.html",
"build-prod": "parcel build src/index.html"
},
"dependencies": {
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0"
},
"devDependencies": {
"#babel/core": "^7.18.5",
"#babel/preset-env": "^7.18.2",
"#babel/preset-react": "^7.17.12",
"gh-pages": "^4.0.0",
"parcel-bundler": "^1.12.5",
"prettier": "^2.7.1"
}
According the the Parcel docs here, you need to specify the --dist-dir flag.
Change your "build-prod" script to this:
"build-prod": "parcel build src/index.html --dist-dir build"
Now the output directory for your parcel build will go to build instead of dist so you can change your "deploy" script back to this:
"deploy": "gh-pages -d build"
I'm trying to migrate react-scripts from my current version (1.1.4) to the latest 3.0.1 for obvious reasons, but I'm having a hell of a time.
Here's my current, build successful package.json
{
"name": "name",
"version": "0.1.0",
"homepage": ".",
"private": true,
"dependencies": {
"ajv": "^6.9.1",
"axios": "^0.18.0",
"axios-debug": "0.0.4",
"date-fns": "^1.30.1",
"formik": "1.2.0",
"history": "4.7.2",
"moment": "2.22.2",
"localforage": "1.7.3",
"prettier": "1.14.2",
"react": "^16.8.1",
"react-bootstrap": "0.32.4",
"react-checkbox-group": "4.0.1",
"react-datetime": "2.15.0",
"react-dom": "^16.3.2",
"react-render-debugger": "1.0.2",
"react-router-dom": "4.3.1",
"react-scripts": "1.1.4",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.87.1",
"styled-components": "^4.2.0",
"react-router-hash-link": "1.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
So I'm using npm so running npm install --save --save-exact react-scripts#3.0.1 installs the new react-scripts version, everything is updated correctly. I updated a few other packages that were needed as deps. No security vulnerabilities, everything was clean and installed correctly.
I'm using maven as a build system to build my app, once it tries to execute npm run build it fails on react-scripts build
The debug log is super unhelpful. The only error displayed is /node_modules/.bin/react-scripts: Permission denied
I've tried changing the permissions using chmod +x /node_modules/.bin/react-scripts but no luck.
I've tried deleting node_modules several times and reinstalling the modules using npm ci. Just about any issue I've found on github I've tried.
I'm not sure what else could be wrong.
Using node v11.9.0 and npm 6.5.0
Do I need to update in smaller version increments? I'm really at a loss
EDIT:
Something is wrong with npm in my case. Manually updating the package versions in package.json seems to work for now... I need to figure out why npm is broken for me
I have a react project bootstrapped using the CRA Cli. I have travis for CI and deploying on Heroku. The project has been running for about a month now. The last build was about 25 days ago and it passed. Today, when I visit this app, it is breaking. When I rebuild and re-deploy, the rebuild works, deployment too to some extent and the error
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
Since the last push 25 days ago, I have merged anything into master, so I am quite certain that there is no code that got to source control and messed things up.
This is my package.json (just the relevant parts)
"dependencies": {
"axios": "^0.18.0",
"leaflet": "^1.3.1",
"lodash": "^4.17.5",
"npm-run-all": "^4.1.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-leaflet": "^1.9.0",
"react-redux": "^5.0.7",
"react-scripts": "1.1.1",
"react-tabs": "^2.2.1",
"react-tabs-redux": "^2.0.1",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"socket.io-client": "^2.1.0",
"thunk": "0.0.1"
},
"scripts": {
"start": "npm-run-all -p watch-css start-js",
"build": "npm-run-all build-css build-js",
"start-js": "react-scripts start",
"build-js": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"test-ci": "CI=true react-scripts test --env=jsdom --ci",
"eject": "react-scripts eject",
"build-css": "node-sass-chokidar src/ -o src/ --quiet",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"lint": "./node_modules/.bin/eslint src/**/*.js",
"prettier": "prettier --write --tab-width=2 --single-quote=true \"src/**/*.{js,scss}\""
},
And this is my index.js (relevant parts only)
if (process.env.NODE_ENV === 'development') {
middleware = [logger];
}
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(thunk, ...middleware))
);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
And the Procfile
web: npm i -g serve && npm run build && serve -s build
And this is the last build status
Then the logs from Heroku
From the logs, it says
INFO: Accepting connections at http://localhost:3000
Questions
What am I doing wrong here?
How come that connections are accepted at localhost but I am running a production bundle?
How do I fix it?
Please check your create server code you must have missed process.env.PORT
Heroku assigns a port dynamically which it pulls from env variable. Your code should be like this :
.listen(process.env.PORT || 3000)
After creating a new create-react-app project I've run into a bit of a big problem when I run npm start inside the project. Chrome React Developer tools does not show all files in src folder. Instead it shows only folder ./src
Chrome React Developer Tools
I am using nodejs 6.10.1 , create-react-app 1.3.0.
package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.1",
"bootstrap": "^3.3.7",
"prop-types": "^15.5.9",
"react": "^15.5.4",
"react-bootstrap": "^0.30.10",
"react-bootstrap-table": "^3.2.1",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-router": "^3.0.0",
"recharts": "^0.22.3",
"redux": "^3.6.0",
"redux-logger": "^3.0.1",
"redux-promise-middleware": "^4.2.0",
"redux-thunk": "^2.2.0"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Any advice how to fix it? I checked documentation but didn't find any solution.
You can still debug the code using VScode Chrome extension, however its not my favorite way of debugging a frontend application.
Use eject command to enable debugging.
After you npm run eject, it reveals more configurations for you to edit, one of those is source-map type (under a webpack configuration). Once you eject, the source-map type changes thus allowing you to debug on chrome-dev-tools.
Hy guys. So, until now I have been doing it like this. Using webpack to make a bundle file, pushing code to github and deploying to Heroku. For this to work I had to push the bundle file to github.
Now, I would like to run webpack on Heroku. The thing is I have dependencies and devDependencies inside my package.json and if I want to run webpack on Heroku I need to install both. To do this I have to move a lot of devDependencies to dependencie so Heroku can install it and run webpack.
What is the best way to do this?
1) If I move all devDepend to dependencies and let Heroku make build file can I somehow clean and remove all unnecessary devDependencies afterwards?
2) Is there a way to do it without changing my package.json or setting set NPM_CONFIG_PRODUCTION=false and disabling production environment?
3) How would npm script look like to do this?
4) All in all what would be a best performance optimized way to push to Heroku ?
This is my package.json file
"scripts": {
"clean-client": "rm -rf ./src/dist",
"clean-server": "rm -rf ./src/build",
"build-server": "babel src/server -d src/build -s --copy-files",
"build-client": "webpack -p --config webpack.config.prod.babel.js",
"start": "set \"NODE_ENV=production\" && npm run build-server && npm run build-client && node ./src/build/index.js",
"start-dev": "set \"NODE_ENV=development\" && nodemon ./start-dev.js",
"webpack": "webpack -w --config webpack.config.babel.js",
"flow": "./node_modules/.bin/flow check",
"test": "set \"NODE_ENV=test\" && babel-tape-runner -r \"test/setup.js\" \"test/**/*.test.jsx\" | node_modules/.bin/tap-spec",
"coverage": "babel-node node_modules/babel-istanbul/lib/cli.js cover node_modules/babel-tape-runner/bin/babel-tape-runner -- \"test/setup.js\" -- \"test/**/*.test.jsx\""
},
"dependencies": {
"babel-plugin-react-css-modules": "2.7.0",
"babel-runtime": "^6.23.0",
"ejs": "^2.5.6",
"express": "^4.15.2",
"prop-types": "^15.5.8",
"react": "15.5.4",
"react-dom": "15.5.4",
"react-router": "3.0.4"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-istanbul": "^0.12.2",
"babel-loader": "^7.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-webpack-alias": "^2.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"babel-tape-runner": "^2.0.1",
"bootstrap": "v4.0.0-alpha.6",
"browser-sync": "^2.18.8",
"browser-sync-webpack-plugin": "^1.1.4",
"css-loader": "0.28.0",
"enzyme": "^2.8.2",
"eslint": "^3.18.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-flowtype": "^2.32.1",
"eslint-plugin-react": "^6.10.3",
"extract-text-webpack-plugin": "^2.1.0",
"flow-bin": "^0.45.0",
"ignore-styles": "^5.0.1",
"jquery": "^3.2.1",
"jsdom": "^10.1.0",
"jsdom-global": "^3.0.2",
"node-sass": "^4.5.2",
"nodemon": "^1.11.0",
"postcss": "^6.0.1",
"postcss-cssnext": "2.10.0",
"postcss-loader": "^2.0.5",
"postcss-scss": "^1.0.0",
"react-test-renderer": "^15.5.4",
"sass-loader": "^6.0.3",
"sass-resources-loader": "^1.2.1",
"script-loader": "^0.7.0",
"sinon": "^2.2.0",
"sinon-test": "^1.0.2",
"snazzy": "^7.0.0",
"standard": "^10.0.2",
"style-loader": "^0.17.0",
"tap-spec": "^4.1.1",
"tape": "^4.6.3",
"tether": "^1.4.0",
"webpack": "^2.4.1"
Per this guide you must set NPM_CONFIG_PRODUCTION to "false" and NODE_ENV to "development" in order for the devDependencies to be installed using npm install. If you are not using Heroku's Review Apps as the guide is, I believe you can set these environment variables via your apps dashboard.
Disclosure: I wrote the guide.
The question is a bit old but hope my notice could help someone. This is an alternative to the previous suggested solution (didn't try).
To build your project directly on heroku, just add the build script to your package.json file.
"scripts": {
"build": "webpack --config webpack.config.js",
},
I have a lot of devDevependecies including webpack-cli which i don't install globally. Before adding the script i have to build the project and push, after adding I noticed heroku just run it automatically and the output of the process was the same as on local machine. The key here is probably the build keyword !!!