Comments (15)
@ranyefet This is a rather old issue, but I just want to add a point in addition to the other solutions suggested here. I ran into this problem lately and weren't able to solve things by specifying listening port to process.env.PORT like most people suggested, or removing packages from build dependencies (I do need all the packages!)
So in the end I figured out by adding the npm run build, or webpack -p, whatever you are using to build the project, into the post-install scripts inside package.json.
for example, this can be your package.json's script field:
"scripts": {
"start": "babel-node server.js",
"postinstall": "npm run build",
}
By doing this heroku will attempt to build the project after you have pushed the code to heroku server, but before it enforces the 60 seconds timeout.
You do not need to build things locally, add them to git repo, and push.
from razzle.
@ctrlplusb sweet, i actually just found this:
"heroku-postbuild": "npm run build"
https://devcenter.heroku.com/articles/nodejs-support#customizing-the-build-process
worked like a charm.
from razzle.
You could run the "build" step concurrently with "start" rather than before it. That way you bind to the $PORT before your assets are completely built.
You have to be okay with the possibility of someone visiting your app in the minute or so before the assets are ready.
from razzle.
what does your package.json
look like?
from razzle.
maybe there are dependencies which are not required on the build and could be handled as 'devdependencies'. This might speed up the build.
from razzle.
I have the same package.json as in this repository with a few additional modules
{
"name": "react-production-starter",
"version": "0.1.0",
"description": "Isomorphic React Starter with Redux, React Router, Redial, Aphrodite, Express, Webpack.",
"scripts": {
"test": "npm run clean && npm run build && cross-env NODE_ENV=test ./node_modules/mocha/bin/mocha --compilers js:babel-core/register --recursive",
"test:watch": "npm test -- --watch",
"start": "cross-env NODE_ENV=development node ./src/server",
"start:prod": "npm run clean && npm run build && cross-env NODE_ENV=production node ./build/server",
"build": "webpack -p --config ./webpack.config.prod.js && webpack -p --config ./webpack.server.config.prod.js",
"clean": "rm -rf build"
},
"main": "./build/server",
"repository": {
"type": "git",
"url": "git+https://github.com/jaredpalmer/react-production-starter.git"
},
"keywords": [],
"author": "jaredpalmer",
"license": "MIT",
"bugs": {
"url": "https://github.com/jaredpalmer/react-production-starter/issues"
},
"engines": {
"node": "5.5.0"
},
"homepage": "https://github.com/jaredpalmer/react-production-starter#readme",
"dependencies": {
"aphrodite": "^0.3.1",
"assets-webpack-plugin": "^3.3.0",
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-plugin-transform-react-constant-elements": "^6.5.0",
"babel-plugin-transform-react-inline-elements": "^6.5.0",
"babel-polyfill": "^6.5.0",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.6.5",
"babel-runtime": "^6.5.0",
"body-parser": "^1.14.2",
"chai": "^3.5.0",
"chai-http": "^2.0.1",
"compression": "^1.6.2",
"cookie-parser": "^1.4.1",
"cross-env": "1.0.7",
"es6-promise": "^3.2.1",
"express": "^4.13.4",
"helmet": "^2.0.0",
"history": "^2.1.1",
"hpp": "^0.2.0",
"humps": "^1.1.0",
"is-empty-object": "^1.1.1",
"isomorphic-fetch": "^2.2.1",
"isparta": "^4.0.0",
"json-loader": "^0.5.4",
"lodash": "^3.10.1",
"mocha": "^2.4.5",
"morgan": "^1.6.1",
"normalizr": "^2.1.0",
"query-string": "^4.1.0",
"react": "^15.0.2",
"react-autocomplete": "^1.0.0-rc5",
"react-dom": "^15.0.2",
"react-helmet": "^3.1.0",
"react-linkify": "^0.1.1",
"react-redux": "^4.4.0",
"react-router": "^2.4.1",
"react-router-redux": "^4.0.4",
"react-simple-dropdown": "^1.1.0",
"redial": "^0.4.1",
"redux": "^3.3.1",
"redux-infinite-scroll": "^1.0.9",
"redux-logger": "^2.6.1",
"redux-mock-store": "^1.0.2",
"redux-thunk": "^2.1.0",
"relative-date": "^1.1.3",
"source-map-support": "^0.4.0",
"webpack": "^1.12.13",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.7.1"
},
"devDependencies": {
"babel-eslint": "^6.0.4",
"eslint": "^2.10.0",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-import": "^1.8.0",
"eslint-plugin-jsx-a11y": "^1.2.0",
"eslint-plugin-react": "^5.1.1"
}
}
Thanks for the help
from razzle.
Were you able to solve this?
from razzle.
Closing this issue. The new version should fix any deployment problems.
from razzle.
I wasn't able to resolve the issue yet.
Thanks for the fix! Where can I see the changes?
from razzle.
@jaredpalmer I've fixed my issue by generating the "build" locally before deployment, and commit it to git.
Is there a better solution?
from razzle.
Other solutions:
- Configure your CI to output build artifact and then use rsync to copy it into your server.
- I recall react-starter-kit used to have a deploy command that would build locally, copy everything to a new empty git repo and push that to heroku.
from razzle.
I get the same R10 error deploying the boilerplate with no changes at all to Heroku. The app runs locally without a problem, and "git push heroku master" works fine. Only when you go to run the app with "heroku open" do you get the problem, where the app crashes in the browser. The app log in Heroku reports the R10 error, "Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch".
There is a discussion of a similar issue here: http://stackoverflow.com/questions/15693192/heroku-node-js-error-web-process-failed-to-bind-to-port-within-60-seconds-of
from razzle.
@Treeeater Thanks for the comment, I actually did the same thing in my project eventually, forgot to update this issue :) Definitely better approach than building locally.
from razzle.
But then your app is accessible with nothing to show. What's the best practice to handle that?
The solution really can't be to use a CI server (or put builds in git). Heroku really should have a build step that can handle long webpack compilations, as everyone is doing that these days.
from razzle.
I've also struggled with this. My new strategy is to actually prebuild and publish my packages to a private npm repository, and then install/exec those within my target envs. Avoids committing to github and get the added benefit of having quick to target versions.
from razzle.
Related Issues (20)
- Razzle hangs after compiling- Script exited with code 0 HOT 1
- loadable-components example requires JS enabled to display CSS in development HOT 1
- Using Apollo Client Cache Rehydration in Razzle with SSR HOT 1
- Release notes are very cumbersome when doing version comparisons HOT 2
- HMR does not activate when a file containing only types is modified
- Dependency Terminate uses GPLv2 License - any alternative?
- Can't deploy to heroku
- plugin options are coming to be undefined HOT 4
- Content Security Policy Implementation HOT 1
- Regarding deployment in server HOT 5
- For Laravel project, add it where ? please HOT 1
- Is the project abandoned? 🤔 HOT 8
- How to expose config to out ?
- digital envelope routines::unsupported HOT 1
- Why razzle forcing buffer and process package in ProvidePlugin if webpack version is 5
- Unexpected token: punc (.) HOT 5
- Does latest razzle support react 18 ?
- Support for react 18 HOT 3
- ~Wrong repo~
- How to use webpack 5 with Razzle 4 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from razzle.