Go back to archives
Building a SvelteKit Project with Directus
4 minutes read time · 661 words · Tutorial
Welcome to my quick guide on how to create a functional SvelteKit project using Directus. I’ll also share some additional tips to start your project better.
What is SvelteKit?
SvelteKit is a popular Companion JavaScript Framework to Svelte.js - focusing on creating performant web applications. In this tutorial, you will learn how to build a website using Directus as a CMS. You will store, retrieve, and use global metadata such as the site title, create new pages dynamically based on Directus items, and build a blog.
Before you start programming:
You will need:
- To install Node.js and a code editor on your computer.
- A Directus project - follow my quickstart guide if you don't already have one. (Custom made)
- Some knowledge of Svelte.
For starting a project in Svelte we firstly have to install Sveltekit. This can be done via:
bash
npm create svelte@latest your-project-name # Choose Skeleton projectReminder: if you already have a folder open if you want to install it, you do not need to write your-project-name
Optimal if you use your-project-name - If you have used a new project folder you need to navigate to this folder using
bash
cd your-project-nameAfter that we have to install the node modules that we will be using. These are
bash
npm install
npm install @directus/sdkFirstly, the .env file
To begin a project with an api we have to save this within an .env file. This file will not be pushed to Github. Make sure to create a .gitignore and ignore the files so they cannot be committed using:
bash
.envMake sure the API URL is correct when initializing the Directus JavaScript SDK.
Second, the directus.js file
We now need to setup the Directus SDK and make it accessible globally. In order to make the best use of SvelteKit's Server Side Rendering, we will need to use SvelteKit's own fetch implementation. Create a new file named directus.js inside of the src/libs directory:
js
import { createDirectus, rest } from '@directus/sdk';
import { readItems, readItem, updateItem, updateUser, createItem, deleteItem } from '@directus/sdk';
import { PUBLIC_APIURL } from '$env/static/public';
function getDirectusInstance(fetch) {
const options = fetch ? { globals: { fetch } } : {};
const directus = createDirectus(PUBLIC_APIURL, options ).with(rest());
return directus;
}
export default getDirectusInstance;In order to make this work we also need to create a hooks.server.js file with the following content in the src directory. It makes sure that the required headers for fetching JavaScript content are returned by the SvelteKit Server.
js
export async function handle({ event, resolve }) {
return await resolve(event, {
filterSerializedResponseHeaders: (key, value) => {
return key.toLowerCase() === 'content-type';
},
});
}Theoretically you could also make HTTP requests to your Directus server endpoint directly via SvelteKit's fetch implementation. However the Directus SDK offers some nice additional features.
For this project I expect you have a default Directus build. For more information check out the quickstart.
Third, prepare SvelteKit to use Directus
Create a new page named +page.js within the folder /routes. This file's load function will be responsible to fetch the data on the client and on the server during Server Side Rendering.
js
/** @type {import('./$types').PageLoad} */
import getDirectusInstance from '$lib/directus';
import { readItems } from '@directus/sdk';
export async function load({ fetch }) {
const directus = getDirectusInstance(fetch);
return {
global: await directus.request(readItems('global')),
};
}Modify the +page.svelte file to use the new data and display it on our site:
svelte
<script>
/** @type {import('./$types').PageData} */
export let data;
</script>
<h1>{data.global.title}</h1>
<p>{data.global.description}</p>You can edit the global variables if you have set any. For examples is your api endpoint is "persons", you can show data.person.name in the +page.svelte
Now you have a working Svelte project with Directus!
Optional Features for Svelte Projects
In many projects, it's helpful to apply consistent styles across all pages, like setting a default background or text style. For this, I recommend adding a global.css file to your Svelte project.
- Inside the
staticfolder, create a new directory calledcss. - Add a file named
global.cssto it.
css
/*
CSS text-wrap: balance property
Allows multiple lines of text to have their lines broken in such a way that each line is roughly the same width, often used to make headlines more readable and visually appealing.
https://caniuse.com/css-text-wrap-balance
*/
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
}
/*
CSS max-width property
In this case, we are setting the maximum width of the text to 65 characters, which is a good practice to make the text more readable and visually appealing.
CSS property: text-wrap: pretty
This property is used to break lines of text in a way that is visually appealing, often used to make paragraphs more readable and visually appealing.
https://caniuse.com/mdn-css_properties_text-wrap_pretty
*/
p,
li,
figcaption {
text-wrap: pretty;
max-width: 65ch;
}
/*
CSS property: container-type: inline-size
This property is used to set the width of an element to the width of the containing block, often used to make elements fill the width of the container.
https://caniuse.com/mdn-css_properties_container-type_inline-size
*/
body > :is(header, footer),
main,
section,
article {
container-type: inline-size;
}Why do this? I learned this technique from Kevin Powell. It optimizes text readability and improves project scalability, whether the project is small or large. Check out his explanation in this video.
Summary
In this guide, you’ve learned how to create a working SvelteKit project integrated with Directus as a CMS. We covered the following key steps:
- Setting up SvelteKit and Directus, including project prerequisites.
- Using the Directus SDK to connect to your Directus instance.
- Fetching data from Directus and rendering it with SvelteKit.
- Implementing global styles with a
global.cssfile for better text readability and consistency across your site.
Thank You for Reading
Thank you for following along with this tutorial! I hope it helps you get started with SvelteKit and Directus. If you have any questions or feedback, feel free to reach out. Happy coding!