In this post I will show you how to build and deploy a static Vue/React Single Page Application on Dokku with the help of multiple buildpacks.

I have seen several posts where people build on their local machine, commit the /dist folder changes into their repo and push the changes to their dokku instance. This does work but adds unnecessary commits to your repository and I think running the build process on the server is a much cleaner solution.

Setting up Dokku

I do not want to go into detail as the process of installing Dokku is well described in the official docs http://dokku.viewdocs.io/dokku/getting-started/installation/ and can even be simpler when using 1-click Dokku setup on DigitalOcean.

Create a new app

dokku apps:create my-awesome-app

Buildpacks

Add a .buildpacks file to the root of your project. As you can see, we are using two buildpacks. The first one is to build our production code (dist folder output) and the second one is for our static hosting. The version numbers can be found on the releases page on Github and are recommended to add.

.buildpacks

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

Build config

To build our application on the server we have to add this command to the scripts section of our package.json file.

package.json

{
  "scripts": {
    "heroku-postbuild": "npm run build"
  }
}

Static config

Our static buildpack does allow us to add some configurations described here. As we want to serve our /dist folder, we add it to the static.json file alongside the option of serving clean urls and our default index.html.

static.json

{
  "root": "dist/",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

Deploy our app

As we do not want to track any dist folder changes, we add it to our .gitignore file.

.gitignore

# ...
/dist

Commit all changes and run:

git remote add dokku dokku@your-server-ip:my-awesome-app
git push dokku master

Done

Voilà, your static app is built and served by Dokku.