Create a directus project:
1
2
3
4
5
6
| mkdir my-project
cd my-project
npm init -y
npx directus init
... // follow the setup steps
npx directus start
|
Create the sveltekit app:
1
2
3
4
5
6
| npm create svelte@latest my-app
cd my-app
npm install
npm install dotenv
npm install @directus/sdk
npm run dev
|
Create src/lib/utils/directus.js
1
2
3
4
5
6
7
8
9
10
11
| import { Directus } from "@directus/sdk";
import "dotenv/config";
const directusToken = process.env.DIRECTUS_API_TOKEN;
const directusUrl = process.env.DIRECTUS_URL;
export const directus = new Directus(directusUrl, {
auth: {
staticToken: directusToken,
},
});
|
Configure the .env in your root project to be as follows (get the token from the User, Generate Static Token section of the Directus admin panel).
1
2
| DIRECTUS_API_TOKEN = '7FJMz7z2geshp1-ucq0EmHBy9S_msR8E'
DIRECTUS_URL = 'http://0.0.0.0:8055'
|
Set up an alias for the utils directory in svelte.config.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
| import adapter from '@sveltejs/adapter-auto';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
alias: {
"utils": "/src/lib/utils"
}
}
};
export default config;
|
We will create two routes: the /bookmarks route which will list all bookmarks (or any item stored in directus) and /bookmarks/[id] which will allow us to go to bookmarks/1 to get the information about the bookmark with the id of 1.
The bookmarks index
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import { directus } from "../../lib/utils/directus.js";
export async function load() {
const bookmarkItems = directus.items('bookmarks');
// load all bookmarks
const bookmarks = await bookmarkItems.readByQuery({
limit: -1,
});
return {
bookmarks,
};
}
|
1
2
3
4
5
6
7
8
9
10
| <script>
export let data;
</script>
<h1>Bookmarks</h1>
{#each data.bookmarks.data as bookmark}
<p>{bookmark.url}</p>
<p>{bookmark.title}</p>
{/each}
|
Individual bookmarks
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import { directus } from "utils/directus.js";
export async function load({ params }) {
const bookmarkId = params.id;
const bookmarkItems = directus.items("bookmarks");
const bookmark = await bookmarkItems.readOne(bookmarkId);
console.log(bookmark);
return {
bookmark,
};
}
|
1
2
3
4
5
6
7
8
9
| <script>
export let data;
</script>
<h1>Bookmark Detail Page</h1>
<p>{data.bookmark.id }</p>
<p>{data.bookmark.title }</p>
<p>{data.bookmark.url }</p>
|
Create new bookmark
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| import { directus } from "utils/directus.js";
/** @type {import('./$types').Actions} */
export const actions = {
create_bookmark: async ({ request }) => {
const data = await request.formData();
const url = data.get('url');
const title = data.get('title');
const bookmarkItems = directus.items("bookmarks");
const bookmark = await bookmarkItems.createOne({
url,
title
});
return { success: true };
}
};
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <script>
/** @type {import('./$types').ActionData} */
export let form;
</script>
<form method="POST" action="?/create_bookmark">
<label>
Title
<input name="title" type="text" />
</label>
<label>
URL
<input name="url" type="text" />
</label>
<button>Submit</button>
</form>
{#if form?.success}
<p>Successfully added bookmark!</p>
{/if}
|
More information on the Directus SDK can be found here.
