Deploying nextjs app on Heroku - error status H20 - reactjs

I'm new to react and nextjs. I managed to develop a simple website in nextjs and when i build the project in local system using npm run build without any error it works properly then i tried to deploy in heroku in the dashboard it shows build succeded and deployed but when i check the project using the given link it shows application error. After i check the heroku logs its shows Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch like this. By checking some threads about this link i managed to restart heroku but no use still the same problem. Also i've changed the port from 3000 to 5000 by changing in package.json .It'll be so helpfull if anyone point out the issue.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p 5000"
},
This is my heroku log
2020-07-24T05:14:15.020173+00:00 heroku[web.1]: Starting process with command `npm start`
2020-07-24T05:14:17.215400+00:00 app[web.1]:
2020-07-24T05:14:17.215416+00:00 app[web.1]: > abcapp#0.1.0 start /app
2020-07-24T05:14:17.215416+00:00 app[web.1]: > next start
2020-07-24T05:14:17.215416+00:00 app[web.1]:
2020-07-24T05:14:17.458010+00:00 app[web.1]: ready - started server on http://localhost:3000
2020-07-24T05:14:37.208072+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=abcapp.herokuapp.com request_id=55de2c51-58d2-430d-883d-7a1bc05cecfc fwd="157.46.187.156" dyno= connect= service= status=503 bytes= protocol=https
2020-07-24T05:15:15.482693+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2020-07-24T05:15:15.502706+00:00 heroku[web.1]: Stopping process with SIGKILL
2020-07-24T05:15:15.584970+00:00 heroku[web.1]: Process exited with status 137
2020-07-24T05:15:15.629010+00:00 heroku[web.1]: State changed from starting to crashed
2020-07-24T05:15:17.145562+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=abcapp.herokuapp.com request_id=9e610deb-8e1e-4ca6-9e60-7516bc36cd92 fwd="157.46.187.156" dyno= connect= service= status=503 bytes= protocol=https

I've solved this issue by updating package.json like the below.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p $PORT"
},

Related

Heroku showing error for typescript and React.JS

I just learnt Typescript and tried to push it to Heroku to run online. However, I got this problem. Can anyone help me what is wrong with the configuration? I already have a Profile with web: npm start.
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.12.54",
"#types/react": "^16.9.46",
"#types/react-dom": "^16.9.8",
"#types/styled-components": "^5.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"styled-components": "^5.1.1",
"typescript": "^3.7.5"
},
"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"
]
}
}
When I tried to run it on heroku, these error shows up. Can anyone help me point out where I get wrong on the code? Thank you.
2020-08-20T02:04:52.768419+00:00 app[api]: Initial release by user kevxxxxx
2020-08-20T02:04:52.768419+00:00 app[api]: Release v1 created by user kevkxxxxx
2020-08-20T02:04:52.863227+00:00 app[api]: Enable Logplex by user kevkwxxxx
2020-08-20T02:04:52.863227+00:00 app[api]: Release v2 created by user kevkwxxxx
2020-08-20T02:05:02.000000+00:00 app[api]: Build started by user kevkwxxxx
2020-08-20T02:06:24.621179+00:00 app[api]: Release v3 created by user kevkwxxxx
2020-08-20T02:06:24.621179+00:00 app[api]: Deploy b542e4e6 by user kevkwxxxx
2020-08-20T02:06:24.637255+00:00 app[api]: Scaled to web#1:Free by user kevkwxxxx
2020-08-20T02:06:33.000000+00:00 app[api]: Build succeeded
2020-08-20T02:06:33.778274+00:00 heroku[web.1]: Starting process with command `npm start`
2020-08-20T02:06:37.345544+00:00 app[web.1]:
2020-08-20T02:06:37.345569+00:00 app[web.1]: > my-app#0.1.0 start /app
2020-08-20T02:06:37.345570+00:00 app[web.1]: > react-scripts start
2020-08-20T02:06:37.345570+00:00 app[web.1]:
2020-08-20T02:06:40.190225+00:00 app[web.1]: ℹ 「wds」: Project is running at http://172.16.1.122/
2020-08-20T02:06:40.190782+00:00 app[web.1]: ℹ 「wds」: webpack output is served from
2020-08-20T02:06:40.190901+00:00 app[web.1]: ℹ 「wds」: Content not from webpack is served from /app/public
2020-08-20T02:06:40.191007+00:00 app[web.1]: ℹ 「wds」: 404s will fallback to /
2020-08-20T02:06:40.191239+00:00 app[web.1]: Starting the development server...
2020-08-20T02:06:40.191239+00:00 app[web.1]:
2020-08-20T02:06:40.320581+00:00 heroku[web.1]: Process exited with status 0
2020-08-20T02:06:40.357851+00:00 heroku[web.1]: State changed from starting to crashed
2020-08-20T02:06:40.361139+00:00 heroku[web.1]: State changed from crashed to starting
2020-08-20T02:06:48.334774+00:00 heroku[web.1]: Starting process with command `npm start`
2020-08-20T02:06:50.949971+00:00 app[web.1]:
2020-08-20T02:06:50.949997+00:00 app[web.1]: > my-app#0.1.0 start /app
2020-08-20T02:06:50.949997+00:00 app[web.1]: > react-scripts start
2020-08-20T02:06:50.949998+00:00 app[web.1]:
2020-08-20T02:06:53.410228+00:00 app[web.1]: ℹ 「wds」: Project is running at http://172.19.104.146/
2020-08-20T02:06:53.410751+00:00 app[web.1]: ℹ 「wds」: webpack output is served from
2020-08-20T02:06:53.410902+00:00 app[web.1]: ℹ ��wds」: Content not from webpack is served from /app/public
2020-08-20T02:06:53.411003+00:00 app[web.1]: ℹ 「wds」: 404s will fallback to /
2020-08-20T02:06:53.411229+00:00 app[web.1]: Starting the development server...
2020-08-20T02:06:53.411231+00:00 app[web.1]:
2020-08-20T02:06:53.535298+00:00 heroku[web.1]: Process exited with status 0
2020-08-20T02:06:53.573752+00:00 heroku[web.1]: State changed from starting to crashed
2020-08-20T02:06:54.608604+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=guarded-depths-86821.herokuapp.com request_id=a715a5b6-5ebd-46a1-bc83-e5af1a8adf93 fwd="98.252.127.199" dyno= connect= service= status=503 bytes= protocol=https
2020-08-20T02:06:55.888464+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=guarded-depths-86821.herokuapp.com request_id=1c2e5980-a5b3-4a14-93b5-76ab3a8a4e1f fwd="98.252.127.199" dyno= connect= service= status=503 bytes= protocol=https
2020-08-20T02:15:00.000000+00:00 app[api]: Build started by user kevkwoxxxxx
2020-08-20T02:16:25.020488+00:00 app[api]: Deploy 96a06fc7 by user kevkwoxxxx
2020-08-20T02:16:25.020488+00:00 app[api]: Release v4 created by user kevkwxxxx
2020-08-20T02:16:25.756806+00:00 heroku[web.1]: State changed from crashed to starting
2020-08-20T02:16:33.000000+00:00 app[api]: Build succeeded
2020-08-20T02:16:38.637718+00:00 heroku[web.1]: Starting process with command `npm start`
2020-08-20T02:16:44.452152+00:00 app[web.1]:
2020-08-20T02:16:44.452164+00:00 app[web.1]: > my-app#0.1.0 start /app
2020-08-20T02:16:44.452164+00:00 app[web.1]: > react-scripts start
2020-08-20T02:16:44.452164+00:00 app[web.1]:
2020-08-20T02:16:46.910272+00:00 app[web.1]: ℹ 「wds」: Project is running at http://172.19.70.186/
2020-08-20T02:16:46.910678+00:00 app[web.1]: ℹ 「wds」: webpack output is served from
2020-08-20T02:16:46.910753+00:00 app[web.1]: ℹ 「wds」: Content not from webpack is served from /app/public
2020-08-20T02:16:46.910818+00:00 app[web.1]: ℹ 「wds」: 404s will fallback to /
2020-08-20T02:16:46.910981+00:00 app[web.1]: Starting the development server...
2020-08-20T02:16:46.910981+00:00 app[web.1]:
2020-08-20T02:16:47.027054+00:00 heroku[web.1]: Process exited with status 0
2020-08-20T02:16:47.064473+00:00 heroku[web.1]: State changed from starting to crashed
2020-08-20T02:16:49.868294+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=guarded-depths-86821.herokuapp.com request_id=2fa4ba33-25e5-4954-96c1-0ae870df9733 fwd="98.252.127.199" dyno= connect= service= status=503 bytes= protocol=https
2020-08-20T02:18:16.488972+00:00 heroku[web.1]: State changed from crashed to starting
2020-08-20T02:18:25.931282+00:00 heroku[web.1]: Starting process with command `npm start`
2020-08-20T02:18:29.027258+00:00 app[web.1]:
2020-08-20T02:18:29.027291+00:00 app[web.1]: > my-app#0.1.0 start /app
2020-08-20T02:18:29.027292+00:00 app[web.1]: > react-scripts start
2020-08-20T02:18:29.027292+00:00 app[web.1]:
2020-08-20T02:18:32.269220+00:00 app[web.1]: ℹ 「wds」: Project is running at http://172.17.23.86/
2020-08-20T02:18:32.269587+00:00 app[web.1]: ℹ 「wds」: webpack output is served from
2020-08-20T02:18:32.269687+00:00 app[web.1]: ℹ 「wds」: Content not from webpack is served from /app/public
2020-08-20T02:18:32.269808+00:00 app[web.1]: ℹ 「wds」: 404s will fallback to /
2020-08-20T02:18:32.270062+00:00 app[web.1]: Starting the development server...
2020-08-20T02:18:32.270063+00:00 app[web.1]:
2020-08-20T02:18:32.371853+00:00 heroku[web.1]: Process exited with status 0
2020-08-20T02:18:32.411618+00:00 heroku[web.1]: State changed from starting to crashed
2020-08-20T02:18:49.691244+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=guarded-depths-86821.herokuapp.com request_id=b04d3419-ee10-4063-865f-d34ed4aee58e fwd="98.252.127.199" dyno= connect= service= status=503 bytes= protocol=https
You are using Webpack dev server. That server is not production ready and has a lot of different confiurations.
In simple words, in React, you use npm start to launch your app on your dev server. If you want to host your app, then you first build the artifacts by running npm run build which will generate all the artifacts in the dist folder in your application. Then, you take the contents from the dist directory and deploy it on a server.
To deploy it anywhere, you will need a server to host your files. Heroku, however has automated some of the deployment process for hosting apps.
Check this blog published by the Heroku team which shows how you can deploy the application with ZERO config.

React app keep crashing on heroku / node.js

2020-07-21T14:16:10.473788+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=reacthelloworld.herokuapp.com request_id=e53b2e2b-48a5-4251-844a-ebb4c202cad7 fwd="65.92.155.165" dyno= connect= service= status=503 bytes= protocol=https
2020-07-21T14:16:13.905886+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=reacthelloworld.herokuapp.com request_id=6a6143e4-0d01-4127-981e-b1652f909441 fwd="65.92.155.165" dyno= connect= service= status=503 bytes= protocol=https
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
-----> Caching build
- node_modules
-----> Pruning devDependencies
audited 1646 packages in 12.038s
62 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
Build succeeded!
-- Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
Compressing...
Done: 59.7M
-- Launching...
Released v3
https://reacthelloworld.herokuapp.com/ deployed to Heroku
I know it could be few things all over but I think heroku is not recognizing the path, I did deployed apps before but had to change the computer and re install node all over, at this point need an advice please
I think you are trying to host your React app on Heroku.
If that's the case, you can build React locally and upload static files to Heroku (this can help).
Or if you are trying to host your Node.js app which has React frontend, you should build the React app first and upload the Node.js app with it to Heroku. Heroku provides Node.js environment.
EDIT:
It turns out that npm/yarn was the issue.
Using yarn resolves the error.

React application & GraphQl server deployment problem with Heroku

I made a react application that works with a prisma - graphql server. The server is located inside the react application. I want to deploy it with Heroku (first time ever using it). When I deploy to Heroku I get this error when I run heroku logs --tail
020-06-12T14:10:04.296156+00:00 heroku[web.1]: Process exited with status 0
2020-06-12T14:10:04.332716+00:00 heroku[web.1]: State changed from starting to crashed
2020-06-12T14:10:04.335407+00:00 heroku[web.1]: State changed from crashed to starting
2020-06-12T14:10:15.424387+00:00 heroku[web.1]: Starting process with command `npm start`
2020-06-12T14:10:17.947363+00:00 app[web.1]:
2020-06-12T14:10:17.947379+00:00 app[web.1]: > business-scheduler#0.1.0 start /app
2020-06-12T14:10:17.947379+00:00 app[web.1]: > react-scripts start
2020-06-12T14:10:17.947379+00:00 app[web.1]:
2020-06-12T14:10:20.724920+00:00 app[web.1]: ℹ 「wds」: Project is running at http://172.19.52.78/
2020-06-12T14:10:20.725386+00:00 app[web.1]: ℹ 「wds」: webpack output is served from
2020-06-12T14:10:20.725577+00:00 app[web.1]: ℹ 「wds」: Content not from webpack is served from /app/public
2020-06-12T14:10:20.725681+00:00 app[web.1]: ℹ 「wds」: 404s will fallback to /
2020-06-12T14:10:20.725971+00:00 app[web.1]: Starting the development server...
2020-06-12T14:10:20.725972+00:00 app[web.1]:
2020-06-12T14:10:20.803624+00:00 heroku[web.1]: Process exited with status 0
2020-06-12T14:10:20.835709+00:00 heroku[web.1]: State changed from starting to crashed
2020-06-12T14:27:07.241917+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=appoint-scheduler.herokuapp.com request_id=4a6d7846-488a-4a57-bd76-ee5b84c197fc fwd="94.227.127.41" dyno= connect= service= status=503 bytes= protocol=https
2020-06-12T14:27:07.688859+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=appoint-scheduler.herokuapp.com request_id=83928da3-bc4a-44f5-83fb-66a7c5b2611d fwd="94.227.127.41" dyno= connect= service= status=503 bytes= protocol=https
I am using yarn not npm on my project does anyone know what I need to do to be able to deploy my project?
Because my project is not running on heroku because I get this when trying to open the deployed version
Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs --tail
I think the issue is that you're trying to start the react development server on heroku. Your react app should be served as a static js bundle which is generated after you run the production build cmd npm run build.
Have a look at https://github.com/mars/create-react-app-buildpack which is developed for this usecase only and makes it much easier.
If you're trying to deploy the whole stack ( react + prisma + graphql server )...take a look at this post which covers it in detail.
Hope this helps !

React project hosted in heroku fails when open

So deployed a React project to heroku using bitbucket pipelines that is working well, but now can't seem to make heroku to open the project don't have the script npm start in my package.json and what is recommend is to create a file Procfile that is a txt and inside have
web: index.html
in my webpack:
entry: {
bundle: './src/index.js'
},
output: {
publicPath : '/',
path: path.resolve(__dirname,'build'),
filename: '[name].[chunkhash].js'
},
and in package.json
"scripts": {
"heroku-prebuild": "npm install --only=dev",
"clean": "rimraf build",
"build": "npm run clean && webpack -p",
"serve": "webpack-dev-server --progress --colors"
},
in the heroku logs getting:
heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/"
host=projectname.herokuapp.com
request_id=a2bc33da-f938-4d7b-9395-b40442f9b2c0 fwd="88.157.88.35"
dyno= connect= service= status=503 bytes= protocol=https
heroku[router]: at=error code=H10 desc="App crashed" method=GET
path="/favicon.ico" host=projectname.herokuapp.com
request_id=b2de2bdf-528e-4f97-9fe9-7f313e025ebd fwd="88.157.88.35"
dyno= connect= service= status=503 bytes= protocol=https
Not using the create-react-app and if possible didn't want to add node express to point to the react project https://blog.bitsrc.io/react-production-deployment-part-3-heroku-316319744885
So do I need to point to build/index.html in Procfile?? or is it some other way all the examples have seen are about create-react-app and node express....
Was able to find the solution in the following blog where as stated the heroku runs by default npm start command if the Procfile is missing or add in the Procfile the line web: npm start and as stated in the blog the start command in package.json runs serve -s build where the serve is a package to point the build folder where is located the bundle and the index.html file and now it already works well. Heroku should have a default option to point to a default folder.. but all attemps that had tried failed... so thanks for #Bernard Bado and his blog for pointing to the solution.

Application Error when attempting to deploy Gatsby site to heroku

Not a duplicate of Application Error when I deploy to heroku as they were missing a file.
Not a duplicate of Heroku Application Error When Deploying to Heroku which was a problem for a Ruby app.
Expected Result
I should be able to see my blog (built with Gatsby) deployed to heroku at its url at http://vllg.herokuapp.com/
Actual Result
The page shows an error which instructs me to check my logs, below is the result.
LOGS
2019-03-13T21:41:28.488417+00:00 app[web.1]: success createPages — 0.066 s
2019-03-13T21:41:28.539587+00:00 app[web.1]: success createPagesStatefully — 0.051 s
2019-03-13T21:41:28.542875+00:00 app[web.1]: success onPreExtractQueries — 0.003 s
2019-03-13T21:41:28.856797+00:00 app[web.1]: success update schema — 0.314 s
2019-03-13T21:41:28.917320+00:00 app[web.1]: warning Using the global `graphql` tag is deprecated, and will not be supported in v3.
2019-03-13T21:41:28.917324+00:00 app[web.1]: Import it instead like: import { graphql } from 'gatsby' in file:
2019-03-13T21:41:28.917326+00:00 app[web.1]: /app/src/pages/blog.js
2019-03-13T21:41:28.999695+00:00 app[web.1]: success extract queries from components — 0.143 s
2019-03-13T21:41:29.155426+00:00 app[web.1]: success run graphql queries — 0.156 s — 10/10 64.94 queries/second
2019-03-13T21:41:29.159995+00:00 app[web.1]: success write out page data — 0.004 s
2019-03-13T21:41:29.160825+00:00 app[web.1]: success write out redirect data — 0.001 s
2019-03-13T21:41:29.362576+00:00 app[web.1]: done generating icons for manifest
2019-03-13T21:41:29.363187+00:00 app[web.1]: success onPostBootstrap — 0.202 s
2019-03-13T21:41:29.363362+00:00 app[web.1]:
2019-03-13T21:41:29.363506+00:00 app[web.1]: info bootstrap finished - 6.089 s
2019-03-13T21:41:29.363561+00:00 app[web.1]:
2019-03-13T21:41:35.474922+00:00 app[web.1]: DONE Compiled successfully in 4713ms9:41:35 PM
2019-03-13T21:41:35.475029+00:00 app[web.1]:
2019-03-13T21:41:35.488519+00:00 app[web.1]:
2019-03-13T21:41:35.488812+00:00 app[web.1]: You can now view vllg in the browser.
2019-03-13T21:41:35.488882+00:00 app[web.1]:
2019-03-13T21:41:35.488935+00:00 app[web.1]: http://localhost:8000/
2019-03-13T21:41:35.489000+00:00 app[web.1]:
2019-03-13T21:41:35.489074+00:00 app[web.1]: View GraphiQL, an in-browser IDE, to explore your site's data and schema
2019-03-13T21:41:35.489139+00:00 app[web.1]:
2019-03-13T21:41:35.489197+00:00 app[web.1]: http://localhost:8000/___graphql
2019-03-13T21:41:35.489246+00:00 app[web.1]:
2019-03-13T21:41:35.489329+00:00 app[web.1]: Note that the development build is not optimized.
2019-03-13T21:41:35.489406+00:00 app[web.1]: To create a production build, use npm run build
2019-03-13T21:41:35.489460+00:00 app[web.1]:
2019-03-13T21:41:35.518813+00:00 app[web.1]: ℹ 「wdm」:
2019-03-13T21:41:35.518919+00:00 app[web.1]: ℹ 「wdm」: Compiled successfully.
2019-03-13T21:42:21.505858+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2019-03-13T21:42:21.505911+00:00 heroku[web.1]: Stopping process with SIGKILL
2019-03-13T21:42:21.660871+00:00 heroku[web.1]: State changed from starting to crashed
2019-03-13T21:42:21.643794+00:00 heroku[web.1]: Process exited with status 137
2019-03-14T03:25:18.012932+00:00 heroku[web.1]: State changed from crashed to starting
2019-03-14T03:25:26.974905+00:00 heroku[web.1]: Starting process with command `npm start`
2019-03-14T03:25:29.221439+00:00 app[web.1]:
2019-03-14T03:25:29.221465+00:00 app[web.1]: > vllg#0.1.0 start /app
2019-03-14T03:25:29.221467+00:00 app[web.1]: > npm run develop
2019-03-14T03:25:29.221469+00:00 app[web.1]:
2019-03-14T03:25:29.642388+00:00 app[web.1]:
2019-03-14T03:25:29.642437+00:00 app[web.1]: > vllg#0.1.0 develop /app
2019-03-14T03:25:29.642951+00:00 app[web.1]: > gatsby develop
2019-03-14T03:25:29.642954+00:00 app[web.1]:
2019-03-14T03:25:34.179104+00:00 app[web.1]: lscpu: failed to determine number of CPUs: /sys/devices/system/cpu/possible: No such file or directory
2019-03-14T03:25:34.371576+00:00 app[web.1]: success open and validate gatsby-configs — 0.018 s
2019-03-14T03:25:35.101757+00:00 app[web.1]: success load plugins — 0.729 s
2019-03-14T03:25:36.254992+00:00 app[web.1]: success onPreInit — 1.153 s
2019-03-14T03:25:36.301769+00:00 app[web.1]: success delete html and css files from previous builds — 0.047 s
2019-03-14T03:25:36.341230+00:00 app[web.1]: success initialize cache — 0.039 s
2019-03-14T03:25:36.394596+00:00 app[web.1]: success copy gatsby files — 0.053 s
2019-03-14T03:25:36.405920+00:00 app[web.1]: success onPreBootstrap — 0.011 s
2019-03-14T03:25:36.570578+00:00 app[web.1]: success source and transform nodes — 0.165 s
2019-03-14T03:25:37.534865+00:00 app[web.1]: success building schema — 0.964 s
2019-03-14T03:25:37.682403+00:00 app[web.1]: success createPages — 0.145 s
2019-03-14T03:25:37.846729+00:00 app[web.1]: success createPagesStatefully — 0.164 s
2019-03-14T03:25:37.856984+00:00 app[web.1]: success onPreExtractQueries — 0.010 s
2019-03-14T03:25:38.258545+00:00 app[web.1]: success update schema — 0.401 s
2019-03-14T03:25:38.381310+00:00 app[web.1]: warning Using the global `graphql` tag is deprecated, and will not be supported in v3.
2019-03-14T03:25:38.381315+00:00 app[web.1]: Import it instead like: import { graphql } from 'gatsby' in file:
2019-03-14T03:25:38.381317+00:00 app[web.1]: /app/src/pages/blog.js
2019-03-14T03:25:38.546084+00:00 app[web.1]: success extract queries from components — 0.287 s
2019-03-14T03:25:38.877403+00:00 app[web.1]: success run graphql queries — 0.331 s — 10/10 30.74 queries/second
2019-03-14T03:25:38.888429+00:00 app[web.1]: success write out page data — 0.011 s
2019-03-14T03:25:38.889427+00:00 app[web.1]: success write out redirect data — 0.001 s
2019-03-14T03:25:39.394941+00:00 app[web.1]: done generating icons for manifest
2019-03-14T03:25:39.397600+00:00 app[web.1]: success onPostBootstrap — 0.508 s
2019-03-14T03:25:39.398607+00:00 app[web.1]:
2019-03-14T03:25:39.399205+00:00 app[web.1]: info bootstrap finished - 9.734 s
2019-03-14T03:25:39.399508+00:00 app[web.1]:
2019-03-14T03:25:49.598021+00:00 app[web.1]: DONE Compiled successfully in 7982ms3:25:49 AM
2019-03-14T03:25:49.598123+00:00 app[web.1]:
2019-03-14T03:25:49.668957+00:00 app[web.1]:
2019-03-14T03:25:49.669051+00:00 app[web.1]: You can now view vllg in the browser.
2019-03-14T03:25:49.669113+00:00 app[web.1]:
2019-03-14T03:25:49.669181+00:00 app[web.1]: http://localhost:8000/
2019-03-14T03:25:49.669263+00:00 app[web.1]:
2019-03-14T03:25:49.669509+00:00 app[web.1]: View GraphiQL, an in-browser IDE, to explore your site's data and schema
2019-03-14T03:25:49.669573+00:00 app[web.1]:
2019-03-14T03:25:49.669642+00:00 app[web.1]: http://localhost:8000/___graphql
2019-03-14T03:25:49.669711+00:00 app[web.1]:
2019-03-14T03:25:49.669766+00:00 app[web.1]: Note that the development build is not optimized.
2019-03-14T03:25:49.669875+00:00 app[web.1]: To create a production build, use npm run build
2019-03-14T03:25:49.669941+00:00 app[web.1]:
2019-03-14T03:25:49.809865+00:00 app[web.1]: ℹ 「wdm」:
2019-03-14T03:25:49.810002+00:00 app[web.1]: ℹ 「wdm」: Compiled successfully.
2019-03-14T03:26:27.415495+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2019-03-14T03:26:27.415791+00:00 heroku[web.1]: Stopping process with SIGKILL
2019-03-14T03:26:27.640591+00:00 heroku[web.1]: Process exited with status 137
2019-03-14T03:26:27.669848+00:00 heroku[web.1]: State changed from starting to crashed
2019-03-14T06:29:40.584512+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=vllg.herokuapp.com request_id=05381bb0-3b5e-4191-b20f-bd1a0ab788fe fwd="98.164.218.149" dyno= connect= service= status=503 bytes= protocol=http
2019-03-14T06:29:40.995063+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=vllg.herokuapp.com request_id=69bc54f5-3ffc-469c-8919-7f46eef7ed3f fwd="98.164.218.149" dyno= connect= service= status=503 bytes= protocol=http
2019-03-14T06:31:47.930409+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=vllg.herokuapp.com request_id=53dd38e4-9b34-41fe-8838-2ce2f659ddc0 fwd="98.164.218.149" dyno= connect= service= status=503 bytes= protocol=http
2019-03-14T06:31:48.205331+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=vllg.herokuapp.com request_id=140a8ca7-0a44-4a91-83f7-9726a1c1a94b fwd="98.164.218.149" dyno= connect= service= status=503 bytes= protocol=http
2019-03-14T06:50:31.151053+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=vllg.herokuapp.com request_id=4aef2e8c-d00e-4fc6-9d72-f05fe676a7b1 fwd="98.164.218.149" dyno= connect= service= status=503 bytes= protocol=http
2019-03-14T06:50:31.476418+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=vllg.herokuapp.com request_id=af2c772d-3299-4767-8c7b-e2fa0de414ab fwd="98.164.218.149" dyno= connect= service= status=503 bytes= protocol=http
2019-03-14T06:52:49.412131+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=vllg.herokuapp.com request_id=84f885b2-a2d7-42c5-a4ff-8b9f2d692c39 fwd="98.164.218.149" dyno= connect= service= status=503 bytes= protocol=http
2019-03-14T06:52:49.675993+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=vllg.herokuapp.com request_id=23679509-eff5-46c2-86e6-1971c91dc368 fwd="98.164.218.149" dyno= connect= service= status=503 bytes= protocol=http
Repo
My code repository is available to browse at https://github.com/JGallardo/vllg
Attempted solutions and research
I found a similar issue of status 137 at Heroku "Process exited with status 137" node.js app but not sure how to apply anything there to my project
I see an error about needing to build a production build? that was not in the instructions by heroku in the tutorial that i followed but i ran npm run build and don't see a new build folder.
I also see that there is a R 10 error, i found a similar issue mentioned in Heroku Boot Timeout (Error R10) but that seems to perhaps be a python project as I think a Procfile is only for Ruby projects?
I haven't used Heroku before but I can give you some guidance perhaps looking at your logs.
gatsby develop is supposed to be a development command only for when your testing the site so it looks like it's having a conflict, though you shouldn't be using that command anyways as it should be built with gatsby build. Using Gatsby develop also does not provide an optimized version of your site so your missing out on many of the benefits.
That said gatsby build creates a public folder in your directory with static assets. For testing locally you should use gatsby serve to properly view the build and make sure it works as expected. For Heroku you shouldn't have to use the serve command you should be able to just give it your static assets in the public folder.
You can also "teach" Heroku how to build for you following this guide. https://www.gatsbyjs.org/docs/deploying-to-heroku/
Can also confirm Netlify is awesome for static sites and Gatsby.
The error message says Web process failed to bind to $PORT within 60 seconds of launch.
Heroku randomly assigns a port and sets into variable $PORT.
If it doesn't find anything using that port for 60 seconds, app crashes.
The easiest option is to create a Procfile
and add something like web: gatsby serve -p $PORT -H 0.0.0.0
, which runs app in given env. variable.
Heroku is more useful for server-side apps. With the command build, Gatsby provides you a static version of your blog. This way, you can upload it on a CDN, it's way more performant. I would advise Netlify:
It's free
It's based on your GitHub account
It automatically deploys new changes (via git commit hooks)
You can even use a custom domain

Resources