@tanglemedia/directus-extension-whm-preview-hook

When a collection data is deleted, created, or updated, it will trigger the scripts that builds the hugo site for preview.

Installation

npm i @tanglemedia/directus-extension-whm-preview-hook

How to enable the preview server

Prerequisite

• A website account on WHM server.
• Directus ^10.x.x
• Node ^18.x.x
• Git

Configuration

Set up SSH Keys to pull repo from Bitbucket

We need to create an ssh key for the server to pull a repo from bitbucket

• On the WHM server, go to List Accounts
• Search for the domain you want to add preview.
• Go to that domain's CPanel
• Using a terminal, cd .ssh to your domain/site account
• ssh-keygen -t ed25519 -b 256
• Enter name of the file for your ssh key. Recommended: <project_name>_bitbucket
• Leave passphrase blank
• Once ssh key file is generate, copy contents of the public key to the bitbucket repoitory of the hugo site (Repository Settings > Security > Access keys)

Add the following env variables

Env Variables	Description
SERVER_USER	User name of the account in the whm server. To allow creation of files and folders with the appropriate permission
SERVER_ACCOUNT_ROOT	Path to the account directory. Do not include trailing slashes.
PREVIEW_HUGO_SITE_BUILD_FOLDER	Name of the folder where the hugo pages are being built (e.g. directus-build)
PREVIEW_SERVER_IDENTITY_FILE	Path to the bitbucket ssh key in this account
PREVIEW_SERVER_HUGO_REPO_URL	Url of the bitbucket repo of the hugo site
PREVIEW_SERVER_HUGO_BRANCH_TO_PULL	Name of the branch to pull the repo from
PREVIEW_HUGO_CLOUDINARY_BASE_URL	Base url of the resources in cloudinary (if the resources are stored in cloudinary)
PREVIEW_HUGO_CLOUDINARY_FOLDER	Name of the folder where the site's assets are located in cloudinary
PREVIEW_HUGO_DIRECTUS_API_URL	Base url of the directus admin portal
PREVIEW_HUGO_DIRECTUS_ACCESS_TOKEN	Directus access token (usually the access token related to the website role) to pull the Directus data and build them into pages
PREVIEW_HUGO_SITE_BASE_URL	Base url of the preview website

Setting up Preview Domain

• On your site account CPanel, go to Domains
• Click Create A New Domain
• Enter the desired domain. By convention, it's usually preview.<CURRENT_DOMAIN_ADMIN_URL> example: preview.admin.example.org.
• Enter the document root, which is the folder containing the files you want to deploy. It's usually /public_html/preview
• Then submit

Add the preview domain to the site DNS

• On your dns provider (in this case, Netlify), add a new A record to the domain
• Enter the preview domain as the name
• Enter the IP address of the site account on whm XXX.XXX.XX.XX

Add 404 page

• In the .htaccess file, append the following:

ErrorDocument 404 {DIRECTUS_BASE_URL}/404/404.html?base_url={PREVIEW_SITE_BASE_URL}&url_req=%{REQUEST_URI}

• In the public_html/ folder, create a folder called 404. Inside the folder, add the 404.html that will act as the 404 page that gets displayed when the preview pages are being build. The 404 page should also contain a javascript that redirects the user automatically to the preview page after is done building. Also add an image called preview-404.{ext}. It's usually the logo of the website. For example, refer to the other projects.

Folder Structure

By the end of the above steps, you should end up with the following folder structure. For it to work, make sure package-lock.json is not included in the hugo folder

account-root/
   hugo/
      .
      .
      .
      package.json
      .env-local
      node_modules/
         .bin/
            dotenv
            hugo
   preview/
      error.log
      hugo-git-initializer.sh
      preview.sh
   public_html/
      404/
         404.html
         preview-404.{ext}
         .
         .
      preview/
      .htaccess