Setting up dokku to serve a fractal-js design library

This guide shows you how to deploy a site built with the Fractal framework to a server set up with dokku. The guide assumes you already have a working fractal site locally (set up as a git repository) as well as a working dokku server.

Add needed files to the repository

You first need to add 3 files to the root directory of your repository.

  1. .static: Add a blank file called .static in the root directory. This tells dokku that it should serve a static site.
  2. app.json: Add a file called app.json in the root directory. This tells dokku what command to run before deploying the site to build the site. This needs the following contents (adjust the command if the actual commands to build the site are different):
{
  "scripts": {
    "dokku": {
      "predeploy": "cd /app/www && npm run gulp:build && npm run fractal:build"
    }
  }
}
  1. buildpacks: Add a file called .buildpacks to the root directory. This tells dokku what buildpacks to use. The file should have the following contents:
https://github.com/heroku/heroku-buildpack-nodejs.git
https://github.com/dokku/buildpack-nginx.git

Set up the app on dokku

This needs to happen on your dokku server. Create the app, and set a config setting NGINX_ROOT to "output" (this is the directory where the site will be built - this should be defined in fractal.config.js).

In this case we're calling the app design - this can be changed

dokku apps:create design
dokku config:set design NGINX_ROOT='output'

Deploy the site

On your local version, add the dokku server as a git remote. Replace 123.456.789.123 with the actual IP address or domain name, and design with the actual name of the app.

git remote add dokku dokku@123.456.789.123:design

Next push the site to the dokku server. This should build the site:

git push dokku main

You should now see the site deployed correctly.

Further resources