Heroku, now part of Salesforce, is a common hosting solution for both single-page JavaScript applications and static sites. The Heroku CLI offers rich interactions with Heroku’s build and deployment capabilities, as well as a variety of other features for continuous integration and continuous deployment.
If you’re using the Heroku CLI, the quickest way to set up builds and deployments of your Gatsby site is to set Heroku’s Node.js (heroku/nodejs
) and Static (heroku-buildpack-static
) “buildpacks” in your Gatsby project root:
$
heroku buildpacks:set heroku/nodejs
$
heroku buildpacks:add
To enable integration with Heroku’s Platform API, you can also optionally include the buildpacks in Heroku’s app.json manifest:
//
app.json
{
"buildpacks":
[
{
"url":
"heroku/nodejs"
},
{
"url":
}
]
}
In either scenario, Heroku will detect the NPM build script within your Gatsby site’s package.json file and automatically execute it, as long as your package.json file defines the script as follows:
//
package.json
{
"scripts"
:
{
"build"
:
"gatsby build"
}
}
For the Heroku Static buildpack to understand where the build result of your Gatsby site will be located, you also need to configure the path to your generated static assets, which is the public directory in typical Gatsby sites. Create a static.json manifest in your Gatsby project root and provide the options Heroku needs:
// static.json
{
"root"
: "public/"
,
"headers"
: {
"/**"
: {
"Cache-Control"
: "public, max-age=0, must-revalidate"
}
,
"/**.css"
: {
"Cache-Control"
: "public, max-age=31536000, immutable"
}
,
"/**.js"
: {
"Cache-Control"
: "public, max-age=31536000, immutable"
}
,
"/static/**"
: {
"Cache-Control"
: "public, max-age=31536000, immutable"
}
,
"/icons/*.png"
: {
"Cache-Control"
: "public, max-age=31536000, immutable"
}
}
,
"https_only"
: true
,
"error_page"
: "404.html"
}
This static.json manifest for the Heroku Static buildpack also identifies certain caching configuration options optimized for your Gatsby site.
NOTE
For more information about Gatsby on Heroku, consult Gatsby’s guide to hosting Gatsby on Heroku, the heroku-buildpack-static
documentation, and the Heroku Platform API documentation.
Leave a Reply