[{"id":"cG9zdDo1Njk=","slug":"a-guide-to-directus-for-gatsby-or-sapper-as-cms","title":"A guide to Directus for Gatsby or Sapper as CMS","content":"\n

For those who don’t know what Directus is: an open source database first CMS that generates an api. Lot of buzzwords there, but it’s truly a cool project that deserves much more attention IMO.

\n\n\n\n

Recently I’ve used it to deliver some static generated websites that needed some sort of CMS. Think of a blog, or small landing pages. For that kind you can combine it with Gatsby or in this case Sapper to generate static html from the API.

\n\n\n\n

The article will focus on Sapper, but the parts related to Directus are identical for Gatsby, just the frontend will change.

\n\n\n\n

What will we do today?

\n\n\n\n

\"\" — Photo by Noah Silliman on Unsplash

\n\n\n\n

Installing Directus

\n\n\n\n

This should be straight forward. These instructions are adopted from the official docker guide. I will use Docker for this.

\n\n\n\n

# docker-compose.yml\n\nversion: \"3.7\"\n\nservices:\n  \n  mysql:\n    image: mysql:5.7\n    volumes:\n      - ./data/db:/var/lib/mysql\n    env_file: .env\n\n  directus:\n    image: directus/directus:v8-apache\n    ports:\n      - \"8000:80\"\n    env_file: .env\n    volumes:\n      - ./data/config:/var/directus/config\n      - ./data/uploads:/var/directus/public/uploads

\n\n\n\n

The we run docker-compose up -d. After a few seconds we need to initialise Directus.

\n\n\n\n

docker-compose run directus install --email some@email.com --password 1337

\n\n\n\n

Now you can go to localhost:8000 and sign in with the credentials you just specified

\n\n\n\n

Create some data

\n\n\n\n

Now I’m going to create some data to test our blog. First go to the settings and create a new collection. Im a going to call it posts.
Then we are going to add a title text field and a simple markdown editor with a body field.
Lastly we add a simple post with random data.

\n\n\n\n

\n\n\n\n

Giving permissions

\n\n\n\n

Now we need to give permission to the public role so that we don’t need an API Key. For the most sites this is perfectly fine, since the data we only expose the data that gets displayed in the website anyways.

\n\n\n\n

Goto the roles settings and click on public. There select the tables you want/need for the website.

\n\n\n\n

Gotcha: If you have files (like photos) you also need to enable them for public viewing. Do this by clicking “Show Directus System Collections” and enabling view access to Files

\n\n\n\n

\"\" — Give permissions to the public user

\n\n\n\n

Building a minimal frontend with sapper

\n\n\n\n

I will not explain how Sapper works as this is not the focus today. If you don’t know Sapper: It’s very similar to Nuxt or Next.js with the additional option to even export as static html, so the end result is similar to a Gatsby website. Very powerful and easy to use and code.

\n\n\n\n

# Setup\nnpx degit \"sveltejs/sapper-template#rollup\" my-blog\ncd my-blog\nyarn\nyarn run dev\n# open http://localhost:3000

\n\n\n\n

Load data from Directus

\n\n\n\n

Directus has a JS SDK and since we have made data public we don’t even need a token or authentication. Awesome 🚀

\n\n\n\n

yarn add @directus/sdk-js

\n\n\n\n

First we are going to initialise the SDK. The default project name is simply directus

\n\n\n\n

// ./src/lib/api.js\n\nimport DirectusSDK from '@directus/sdk-js'\n\nexport const client = new DirectusSDK({\n  url: 'http://localhost:8000',\n  project: 'directus'\n})

\n\n\n\n

Then lets make a server side json loader so that the exported site will not even contact the server afterwards. Completely static html.

\n\n\n\n

// ./src/routes/posts.json.js\n\nimport { client } from '../lib/api'\n\nexport async function get (req, res, next) {\n  try {\n    const { data } = await client.getItems('posts')\n\n    res.writeHead(200, {\n      'Content-Type': 'application/json'\n    })\n    res.end(JSON.stringify(data))\n  } catch (e) {\n    res.writeHead(404, {\n      'Content-Type': 'application/json'\n    })\n    res.end(JSON.stringify({\n      message: 'Not found'\n    }))\n  }\n}

\n\n\n\n

Finally the svelte component.

\n\n\n\n

// ./src/routes/index.svelte\n\n<script context=\"module\">\n  export async function preload ({ params }) {\n    const res = await this.fetch('posts.json')\n    const data = await res.json()\n    if (res.status === 200) return { data }\n    else this.error(res.status, 'Not found')\n  }\n</script>\n\n<script>\n  import Post from '../components/Post.svelte'\n  export let data\n</script>\n\n<div class=\"wrapper\">\n  {#each data as post}\n    <Post {post} />\n  {/each}\n</div>

\n\n\n\n

Write a custom hook to trigger a build every time the data changes

\n\n\n\n

When it comes to static generated sites often the easiest way to do things is to simply generate the site every “x” time. That kinda works however there will be many build that don’t contain any change and you need to wait for a cron job to see changes. That sucks.

\n\n\n\n

Fortunately Directus supports writing custom hooks! 🎉
I will illustrate the case for Drone, but the approach can be used for any CI/CD server out there.

\n\n\n\n

For that we create a new php file and give it a name. In my case: drone-hook.php

\n\n\n\n

# ./hooks/drone-hook.php\n\n<?php\n\nfunction process ($collection, $data) {\n    $collectionsToWatch = ['posts'];\n    if(!in_array($collection, $collectionsToWatch)) {\n      return;\n    }\n    \n    $ch = curl_init();\n    curl_setopt($ch, CURLOPT_URL, 'https://my.domain.com/api/repos/my-username/my-repo/builds');\n    curl_setopt($ch, CURLOPT_POST, 1);\n    curl_setopt($ch, CURLOPT_HTTPHEADER, [ 'Authorization: Bearer '.$_ENV['DRONE_TOKEN'] ]);\n    curl_setopt($ch, CURLOPT_RETURNTRANSFER,true);\n    curl_exec($ch);\n    curl_close($ch);\n}\n\nreturn [\n    'actions' => [\n      'item.create' => process,\n      'item.update' => process,\n      'item.delete' => process,\n    ]\n  ];

\n\n\n\n

I’ve also put the token inside of the .env file so that I can safely check my code into a repo and not having to worry about having a token lying around in the codebase.

\n\n\n\n

# .env\n\n...\nDIRECTUS_DATABASE_PASSWORD=directus\n\nDRONE_TOKEN=my-drone-token

\n\n\n\n

The last thing to do is actually load the code into Directus. You can simply mount the ./hooks folder we just created into the container and reload.

\n\n\n\n

# docker-compose.yml\n\nversion: \"3.7\"\n\n...\n  \n  directus:\n    ...\n    volumes:\n      ...\n      - ./hooks:/var/directus/public/extensions/custom/hooks

\n\n\n\n

This will trigger a curl post request every time items in a collection listed inside of $collectionsToWatch get either created, updated, or deleted.

\n\n\n\n

You will probably need to make some adaptations if you are not using Drone, but at the end it will boil down to making a http request to your build server triggering a new build.

\n","status":"publish","date":"2020-04-12T00:43:52","modified":"2020-09-22T20:51:55","tags":{"nodes":[{"id":"dGVybToxMQ==","slug":"cms","name":"cms","count":1},{"id":"dGVybToxNg==","slug":"directus","name":"directus","count":1},{"id":"dGVybToyMg==","slug":"gatsby","name":"gatsby","count":1},{"id":"dGVybTo1MA==","slug":"sapper","name":"sapper","count":1},{"id":"dGVybTo1Mg==","slug":"static-generated","name":"static-generated","count":1}]},"post":{"featured":{"srcSet":"https://api.nicco.io/wp-content/uploads/2020/04/noah-silliman-doBrZnp_wqA-unsplash-300x200.jpg 300w, https://api.nicco.io/wp-content/uploads/2020/04/noah-silliman-doBrZnp_wqA-unsplash-1024x683.jpg 1024w, https://api.nicco.io/wp-content/uploads/2020/04/noah-silliman-doBrZnp_wqA-unsplash-150x100.jpg 150w, https://api.nicco.io/wp-content/uploads/2020/04/noah-silliman-doBrZnp_wqA-unsplash-768x512.jpg 768w, https://api.nicco.io/wp-content/uploads/2020/04/noah-silliman-doBrZnp_wqA-unsplash-1536x1024.jpg 1536w, https://api.nicco.io/wp-content/uploads/2020/04/noah-silliman-doBrZnp_wqA-unsplash-2048x1365.jpg 2048w, https://api.nicco.io/wp-content/uploads/2020/04/noah-silliman-doBrZnp_wqA-unsplash-500x333.jpg 500w, https://api.nicco.io/wp-content/uploads/2020/04/noah-silliman-doBrZnp_wqA-unsplash-800x533.jpg 800w, https://api.nicco.io/wp-content/uploads/2020/04/noah-silliman-doBrZnp_wqA-unsplash-1200x800.jpg 1200w, https://api.nicco.io/wp-content/uploads/2020/04/noah-silliman-doBrZnp_wqA-unsplash-1500x1000.jpg 1500w, https://api.nicco.io/wp-content/uploads/2020/04/noah-silliman-doBrZnp_wqA-unsplash-2000x1333.jpg 2000w","altText":"","sourceUrl":"https://api.nicco.io/wp-content/uploads/2020/04/noah-silliman-doBrZnp_wqA-unsplash.jpg"}}}]