Get Started Building a Svelte Website with Directus

This example will show you how to link a simple Svelte frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts.

Scope and Purpose

The purpose of this article is to focus on the bare basics of linking a Svelte frontend to Directus, then show you where to learn about more robust authentication methods, roles & permissions configurations, and API functionalities. It is important to stress to new users that Directus is a general purpose database wrapper, which mirrors any linked database. No matter your data model or use-case, Directus can serve as a backend (plus no-code admin panel) for any type of project and also connect to any (or many) different front-ends.

Please keep in mind that this is not a demo showing what Directus can be used for, but rather a low variable entry-point on the path to understanding how to do anything you want with it.

Setup

1. Clone the examples repo.

2. From that repo, setup the provided Directus instance and get it running. Instructions are on the README.md page.

3. Install dependencies for this example.

cd svelte
npm install

4. Create a .env file for this Svelte template by copying and pasting the provided .env.example file. Nothing will need to be changed in the copied .env file.

5. Start the development server.

npm run dev

6. Your Directus Svelte example is now running at http://localhost:3000.

Now that you have the frontend and backend linked up, let's touch on what's happening in this project and where to find more sophisticated options.

Svelte

Svelte is an incrementally adoptable framework for building webapps similar to React or Vue. However the difference is it compiles on build time instead of run time, producing highly-optimized vanilla JavaScript, smaller bundles, and better performance. Server-side rendering (SSR), routing and more is available as well with Sveltekit.

Also, please note the Directus JavaScript SDK is pulled in under examples > svelte > src > services > directus.js. If you're interested, see the directus.js file on GitHub and read more in the Directus SDK Documentation.

Authentication

Aside from the default local authentication mechanism, Directus also supports SSO through oauth2, openid, and ldap. To learn more about SSO options, read our SSO Documentation or follow our guide on how to setup SSO.

Users, Roles and Permissions

For simplicity's sake, this Directus instance provided has Public read permissions activated for articles and directus_users. Find Permissions in your local Directus Instance under Settings > Roles and Permissions.

Additionally, any number of Roles can be created and fully configured. Permissions are completely granular. Learn more about this in our documentation on Users, Roles and Permissions.

APIs

There are two simple requests in this example worth noting. The first is in home.svelte and the other in Article.svelte. If you'd like to see these, here are links to Home.svelte and Article.svelte on GitHub. However, please note that the Directus API is exhaustive for any database linked.

Directus uses Database Mirroring to dynamically generate REST endpoints and a GraphQL schema based on the connected database's architecture. This means the REST and the GraphQL APIs will both fit any project with any database schema, out of the box. Learn more in the API Reference.

More Help

Looking for technical support for your non-enterprise project? Please visit the Directus Discord Community.

Want to stay focused on your content and apps? Let Directus manage the platform with our Directus Cloud service.