Application Error when attempting to deploy Gatsby site to heroku

Question

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?

Why Heroku btw? I don't think Heroku is the best place to host your blog (or maybe I'm missing sth). Instead you should consider hosting a static build of your blog on GitHub Pages, or even better, on [Netlify](https://www.netlify.com/) (it's what I do for [mine](https://github.com/soywod/blog)). — soywod, Mar 14 '19 at 07:28
@soywod i am open to Netlify, will get an account. it just gets more troublesome creating so many accounts, and had good experiences with Heroku for other apps. — JGallardo, Mar 14 '19 at 17:10
You have no account to create, it's linked to your GitHub account. And I think it's really worth it to upload a static build, so it can be used by their CDN system. Let me know if you have any trouble! — soywod, Mar 14 '19 at 21:25
Wow deploying with Netlify is literally a push of a button with no additional files to add. Way better than Heroku's bulky and poorly documented process. — JGallardo, Mar 16 '19 at 04:31
Oh yes :) I put this as answer, it may help some other people. — soywod, Mar 16 '19 at 06:48
While it is a great suggestion, it technically does not answer the question in context though. I am still curious what would fix this though. — JGallardo, Mar 17 '19 at 21:15
The problem seems to come from `Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch`, have a look at https://devcenter.heroku.com/articles/deploying-nodejs#specifying-a-start-script. The port is randomly attributed by heroku via `$PORT`, try to use this instead of the `8000`? — soywod, Mar 17 '19 at 21:28

score 2 · Answer 1 · answered Mar 14 '19 at 19:44

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.

This not the case if you are trying to create a [gatsby preview server](https://www.gatsbyjs.com/docs/how-to/local-development/running-a-gatsby-preview-server/) — Luhn, Jun 15 '22 at 10:59

Suraj Shrestha · Answer 2 · 2020-03-10T00:51:24.920

1

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.

edited Mar 10 '20 at 00:51

answered Jul 20 '19 at 19:16

Suraj Shrestha

106
3
7

score 0 · Answer 3 · answered Mar 16 '19 at 06:55

0

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

answered Mar 16 '19 at 06:55

soywod

4,377
3
26
47

2

I did end up going with Netlify, btw. Thanks for the notes. – JGallardo Oct 07 '19 at 13:26