Problem with Gatsby app deployment on heroku

Asked
Active3 hr before
Viewed126 times

10 Answers

deploymentgatsbyherokuproblem
90%

I have problem with deployment of my Portfolio on Heroku. I read multiple articles, tutorials and answers on Stack Overflow, but it still doesn't resolve my problem., Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Stack Overflow help chat

 Pretag team - issue, fix, solve, resolve
88%

/n

You would want to use gatsby build and not gatsby serve as the latter is meant for testing locally. gatsby build will give you static assets and speed optimizations. Try to remove the Procfile and then Heroku should catch the build command in package.json.

gatsby build
/n

You would want to use gatsby build and not gatsby serve as the latter is meant for testing locally. gatsby build will give you static assets and speed optimizations. Try to remove the Procfile and then Heroku should catch the build command in package.json.

gatsby serve
/n

You would want to use gatsby build and not gatsby serve as the latter is meant for testing locally. gatsby build will give you static assets and speed optimizations. Try to remove the Procfile and then Heroku should catch the build command in package.json.

gatsby build
/n

You would want to use gatsby build and not gatsby serve as the latter is meant for testing locally. gatsby build will give you static assets and speed optimizations. Try to remove the Procfile and then Heroku should catch the build command in package.json.

build
load more v
72%

You can optionally add the buildpacks to app.json if you want to take advantage of the heroku platform API,Set the heroku/node.js and heroku-buildpack-static buildpacks on your application.,You can use the heroku buildpack static to handle the static files of your site.

You can use the heroku buildpack static to handle the static files of your site.

/n

Set the heroku/node.js and heroku-buildpack-static buildpacks on your application.

heroku / node.js

You can use the heroku buildpack static to handle the static files of your site.

/n

Set the heroku/node.js and heroku-buildpack-static buildpacks on your application.

heroku - buildpack - static
load more v
65%

For your build process, you'll need to run gatsby build, and then to run the app, you could use gatsby serve. You can set the build step up via a heroku-postbuild script,I wouldn't use gatsby serve on production (by reading the docs it looks like is intended only for testing).,What I would do is, first set the heroku nodejs buildpack to build the static site with gatsby and then serve the static files with the heroku buildpack static (which is much more powerful).

"scripts": {
   "dev": "gatsby develop",
   "heroku-postbuild": "gatsby build",
   "start": "gatsby serve"
}
load more v
75%

Above build pack is mentioned by gatsby documentation Now when we move to deployment part, then below things happened. ,And you know what it's just a simple application , below is the preview of application ,The reason for this error is that heroku-buildpack-static requires that there be a static.json in the root of the repo:

/n

The reason for this error is that heroku-buildpack-static requires that there be a static.json in the root of the repo:

heroku - buildpack - static
load more v
40%

Under the Deploy tab, in the Deployment method section of the page, click GitHub as a way to deploy your Gatsby site to Heroku and click Connect to GitHub.,Under the Deploy tab, in the Connect to GitHub section of the page, click Search without typing anything into the search prompt.,Click Connect next to the name of the repository that contains the code for your Gatsby site.

.├──src│└── templates│└── xyzzy.js├── Procfile├── app.json├── gatsby - config.js├── gatsby - node.js├── package.json└── static.json
22%

Typically Gatsby sites are deployed to Netlify or a similar host for static sites. But as Webpack Dev Server is started when you run Gatsby with the develop argument our preview server needs to be able to run Node applications. You could use something like a Digital Ocean droplet, but I find it easier to use a platform like Heroku.,There is one last problem. When trying to open your Heroku app Gatsby displays a message Error: It appears like Gatsby is misconfigured... thats because per default Heroku sets the environment variable NODE_ENV to "production" which causes this error. You can easily fix it by running heroku config:set NODE_ENV=development or by setting a env variable NODE_ENV to "development" in the dashboard.,Run heroku create which creates an app in Heroku and automatically adds a remote heroku to your git repository.

  1. Add the DatoCMS source plugin as a dependency to our site with yarn add gatsby-source-datocms@2.0.1 The exact version number is important, because at the time of writing this blog post the version npm is referencing is 1.1.15 which is only compatible with Gatsby V1 and not Gatsby V2.

  2. Copy the following configuration into your gatsby-config.js file and fill in your readonly api token.

// In your gatsby-config.js
plugins: [{
   resolve: `gatsby-source-datocms`,
   options: {
      // You can find your read-only API token under the Settings > API tokens
      // section of your administrative area:
      apiToken: `YOUR_READONLY_API_TOKEN`,
   },
}, ];
load more v
60%

Once added, you will have everything set up on your CircleCI console for deployment to Heroku.,HEROKU_APP_NAME: This is the name of your Heroku application (in this case gatsby-heroku-deploy),In this exercise, we will be using CircleCI’s orb for Heroku to configure our pipeline to deploy our Gatsby.js site to Heroku.

To begin, we need to create our Gatsby.js project. In an appropriate location within your system, run the following command to create a new project:

npm gatsby new gatsby - heroku - deploy
load more v
48%

If you’re using just plain Gatsby.js or React app, Heroku is still a good…,This is a follow-up to my previous tutorial/guide thing, where I showed how to use reCAPTCHA v3 on Gatsby.js, the React-based static site generator. I chose Heroku for this one because that’s what I normally work with, but any other platform that supports Node.js should be near-identical in the process of deployment.

 Pretag team - issue, fix, solve, resolve
23%

And you know what it's just a simple application , below is the preview of application , Above build pack is mentioned by gatsby documentation Now when we move to deployment part, then below things happened. ,The major issue is that when a person wants to deploy the Gatsby application on Heroku. They probably end up getting the error. Application works well in Local Development machine but when it's come to deployment , then have to face certain Issues. Adding below buildpack on Heroku , during deployment it throws an error for compatibility. heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git

 Pretag team - issue, fix, solve, resolve

Other "deployment-gatsby" queries related to "Problem with Gatsby app deployment on heroku"