How to Deploy Gatsbyjs App to Dokku


Let me begin by explaining the both terms (Gatsbyjs and Dokku)

Gatsby is a free and open source framework based on React, it helps build fast and SEO ready websites, and Dokku on the other hand is an alternative for Heroku, Dokku allows you to use the major features Heroku on your prefered vps/cloud server, which may be of course cheaper than the pricing on Heroku.

Although, Gatsby already explain how to deploy on Heroku, but it doesn’t seems to work why?


If you follow the simple steps on Gatsby Documentaion, you are to create app.json


and paste the following code

{
"buildpacks": [
{
"url": "heroku/nodejs"
},
{
"url": "https://github.com/heroku/heroku-buildpack-static"
}
]
}

2. package.json

Paste the “heroku-postbuild”: “gatsby build”, inside the scripts block

{
"scripts": {
"heroku-postbuild": "gatsby build"
}
}

3. static.json

Create this file in the root of your project again and paste the below code

{
"root": "public/",
"headers": {
"/**.js": {
"Cache-Control": "public, max-age=0, must-revalidate"
}
}
}

This is where the problem lies

On Heroku, you have a dashboard where you can manually insert the projects required buildpacks (heroku/nodejs and https://github.com/heroku/heroku-buildpack-static), OR

run this command

$ heroku buildpacks:set heroku/nodejs
$ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git

doing this, heroku will be able to recognize your project dependencies or requirements and install them, then when you commit your code and push it, it will be up right away (no error 503 or 404)

But on dokku, you don’t have anything like that


Solution

The one that might have worked is we should have set the environment variable by running

dokku config:set appName BUILDPACK_URL=buildpack_url

but unfortunately, that can only set a single buildpack, but we need 2 buildpacks for this to work, so thats why we will use the dokku multiple buildpack feature.

Just create a file called .buildpacks

in the root folder, mind the dot before the name, then paste this in it

https://github.com/heroku/heroku-buildpack-nodejs.git
https://github.com/heroku/heroku-buildpack-static.git

TADA !!!

Your app is ready, just add the files, commit it and push it.

NOTE: if you already set the environment variable for the BUILDPACK_URL you need to unset this before it will work. by running.

dokku config:unset appName BUILDPACK_URL

Github Link

Enjoy… If you run into any problem on it feel free to write it in the comment section.