├── .gitignore ├── directus-plus-supabase ├── directus-20220608A.webp ├── directus-supabase-08082022.webp ├── enable-PostGIS-20220608A.webp ├── index.md └── supabase-20220608A.webp ├── get-started-building-a-blitz-website-with-directus ├── blitz-example.webp ├── index.md └── roles-and-permissions-20220222A.webp ├── get-started-building-a-gatsby-website-with-directus ├── gatsby-example-1.webp ├── index.md └── roles-and-permissions-20220222A.webp ├── get-started-building-a-next-website-with-directus ├── index.md ├── next-example.webp └── roles-and-permissions-20220222A.webp ├── get-started-building-a-nuxt-2-website-with-directus ├── index.md ├── nuxt-example.webp └── roles-and-permissions-20220222A.webp ├── get-started-building-a-nuxt-3-blog-with-directus ├── build-a-blog-with-nuxt3-and-directus.webp ├── configure-directus-model.webp ├── create-custom-fields.webp ├── creating-a-collection.webp ├── homepage-preview.webp ├── index.md ├── slug-page-preview.webp └── update-roles-and-permissions.webp ├── get-started-building-a-react-website-with-directus ├── index.md ├── react-example.webp └── roles-and-permissions-20220222A.webp ├── get-started-building-a-remix-website-with-directus ├── index.md ├── remix-example.webp └── roles-and-permissions-20220222A.webp ├── get-started-building-a-svelte-website-with-directus ├── index.md ├── roles-and-permissions-20220222A.webp └── svelte-example.webp ├── get-started-building-a-sveltekit-website-with-directus ├── index.md ├── roles-and-permissions-20220222A.webp └── sveltekit-example.webp ├── get-started-building-a-vue-website-with-directus ├── index.md ├── roles-and-permissions-20220222A.webp └── vue-example.webp ├── get-started-building-an-angular-website-with-directus ├── angular-example.png ├── angular-example.webp ├── index.md └── roles-and-permissions-20220222A.webp ├── get-started-building-an-astro-website-with-directus ├── astro-example.webp ├── index.md └── roles-and-permissions-20220222A.webp ├── get-started-building-an-eleventy-website-with-directus ├── 11ty-example.webp ├── index.md └── roles-and-permissions-20220222A.webp ├── get-started-building-an-iles-website-with-directus ├── iles-example.webp ├── index.md └── roles-and-permissions-20220222A.webp └── guides.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | 3 | -------------------------------------------------------------------------------- /directus-plus-supabase/directus-20220608A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/directus-plus-supabase/directus-20220608A.webp -------------------------------------------------------------------------------- /directus-plus-supabase/directus-supabase-08082022.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/directus-plus-supabase/directus-supabase-08082022.webp -------------------------------------------------------------------------------- /directus-plus-supabase/enable-PostGIS-20220608A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/directus-plus-supabase/enable-PostGIS-20220608A.webp -------------------------------------------------------------------------------- /directus-plus-supabase/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: How to Manage Your Supabase Database with Directus 3 | summary: In this guide, we will show you how to create a Supabase project, install the Directus platform locally and configure the two to connect. 4 | date: 2022-08-08 5 | author: Eron Powell 6 | image: ./directus-supabase-08082022.webp 7 | category: integration 8 | --- 9 | 10 | In this guide, we will demonstrate how to create a new Supabase project, install a fresh instance of the Directus platform, then configure the two to work together seamlessly. If you're unfamiliar with either of these systems, don’t worry! We’ll start off with an overview of each platform and explain how they complement each other, noting any overlap in capabilities. 11 | 12 | ## Introduction 13 | 14 | ![Supabase App](./supabase-20220608A.webp) 15 | 16 | [Supabase](https://supabase.com/) is an open-source Firebase alternative that provides a PostgreSQL database, storage, authentication, and a dynamic REST API based on your schema. While it is possible to self-host Supabase on your own infrastructure, this article will focus on Supabase Cloud’s Free tier, which is the fastest and easiest way to get started. 17 | 18 | ![Directus App](./directus-20220608A.webp) 19 | 20 | **Directus** is an open-source data platform that layers on top of any SQL database, providing a powerful suite of tools. The Directus Engine provides dynamic REST and GraphQL APIs based on your schema, hooks and automation, authentication and access control, and file transformations. Directus Studio enables engineers and non-technical users alike to browse, manage, and visualize database content through a no-code app. 21 | 22 | --- 23 | 24 | Supabase is a suite of open-source tools making Postgres databases, file storage, authentication, and edge functions more accessible to developers of all skill levels. Directus is also developer tooling and additionally provides a Data Studio that is safe and intuitive enough for anyone, including non-technical users, to use. This is the crucial bit that gives the two platforms such a strong “network effect.” 25 | 26 | When these two systems are brought together, you get a scalable datastore, limitless connectivity options, and a no-code app that allows your technical and business teams to collaborate together efficiently. 27 | 28 | The two platforms share an overlap of capabilities that deepens their integration and offers developers the freedom of choice across a broader spectrum of connectivity. Key areas of intersection include: 29 | 30 | The ability to generate *powerful* APIs dynamically to connect data 31 | User management and fine-grained access control 32 | Digital asset storage and management 33 | 34 | More importantly, Directus and Supabase share a common vision for your data, making them quite symbiotic. Both solutions are completely open-source, with self-hosted and cloud deployment options available. They are unopinionated in their approach, with vendor-agnostic data storage, and they both focus on providing a polished developer experience along with comprehensive documentation. 35 | 36 | By linking the Supabase database with your Directus Project, *you get a superset of data tools.* You'll benefit from Supabase's Postgres database and its *dev-centric* admin app with the raw power to run SQL queries, ***as well as*** the Directus no-code app, which enables intuitive permissions-based data access for the whole team. 37 | 38 | Let’s dive into how we actually set up and link these two platforms to create a modern data stack powerhouse. 39 | 40 | ## Create a Supabase Project 41 | 42 | As mentioned, while you can [deploy Supabase locally](https://supabase.com/docs/guides/local-development). For the purpose of this guide, we’ll use Supabase Cloud: 43 | 44 | 1. Create a **Supabase** account by signing in with GitHub. 45 | 2. Give your organization a name (this can be changed later). 46 | 3. Click **New Project** and select your organization. 47 | 4. Follow the prompts, setting a project Name, Database Password, Region, and Pricing Plan, then click **Create New Project**. 48 | 5. After your project has been provisioned, navigate to **Settings > Database** in the sidebar. 49 | 6. Scroll down to **Connection Info** and take note of your database’s **Host**, **Database Name**, **Port**, **User**, and **Password**. You will need to enter this during your Directus project setup. 50 | 51 | ## Optional: Add PostGIS to Support Geometry and Mapping 52 | 53 | To take full advantage of the built-in geometry and mapping features Directus offers, we recommend enabling Geometric Data Support. To add PostGIS, follow these steps: 54 | 55 | ![Enable PostGis](./enable-PostGIS-20220608A.webp) 56 | 57 | 1. From the sidebar, navigate to **Database > Extensions**. 58 | 2. Use the search bar to look up `PostGIS`. 59 | 3. Toggle the PostGIS option to enable it. 60 | 61 | ## Set up Directus 62 | 63 | At the time of writing this article, [Directus Cloud](https://directus.cloud/) does not yet support hybrid deployments for connecting an external database. So, we’ll be deploying a self-hosted instance to connect with Supabase. To install a self-hosted instance of Directus that’s connected to our Supabase project, follow these steps: 64 | 65 | 1. Run the following command in your terminal: 66 | 67 | ```bash 68 | npm init directus-project example-project 69 | ``` 70 | 71 | 2. Using the up/down arrow keys, select `Postgres` from the list: 72 | 73 | ```bash 74 | ? Choose your database client Postgres 75 | ``` 76 | 77 | 3. Next, you will be prompted to input database credentials. Add in the Supabase Database Connection Info noted above as follows: 78 | 79 | **Database Host** – The IP address for your database.\ 80 | **Port** – Port number your database is running on.\ 81 | **Database Name** – Name of your existing database.\ 82 | **Database User** – Name of existing user in database.\ 83 | **Database Password** – Password to enter database.\ 84 | **Enable SSL** – Select Y for yes or N for no.\ 85 | **Root** – The root name. 86 | 87 | 4. Now, simply set an email and password for your first Directus admin account. To be clear, this is Directus-specific, and is unrelated to your database user: 88 | 89 | ```bash 90 | Create your first admin user: 91 | ? Email: admin@example.com 92 | ? Password: ******** 93 | ``` 94 | 95 | Once this is complete, you should see details about your new project: 96 | 97 | ```bash 98 | Your project has been created at /example-project. 99 | The configuration can be found in /example-project/.env 100 | ``` 101 | 102 | 5. Lastly, navigate to your new project folder (in this case `example-project`) and start the platform: 103 | 104 | ```bash 105 | cd example-project 106 | npx directus start 107 | ``` 108 | **Please note:** To prevent public accessibility when using the supabase-js library,turn on row level security (RLS) on all these tables inside of the Supabase Dashboard. By default when RLS is turned on these tables cannot be read from or written to with the supabase-js library. 109 | 110 | That’s it! Your project is now up and running locally. You can access the Directus Studio in the browser via the URL displayed, and log in with the Directus admin credentials you entered above: 111 | 112 | ```bash 113 | ✨ Server started at http://localhost:8055 114 | ``` 115 | 116 | In a matter of minutes, we’ve created a flexible data backend, with access to an intuitive no-code app for managing and visualizing data along with a robust connectivity toolkit. This modern data stack is flexible and scalable enough to power any data-driven project… all you need to do is build the frontend! 117 | 118 | ## Next Steps 119 | 120 | From here, the sky's the limit on what you can build. You’ll probably want to invite some new collaborators to your project and start architecting your data model. 121 | 122 | Below are some additional resources to dive in and start exploring these two platforms: 123 | 124 | **Directus** 125 | - See the [Directus guides](https://directus.io/guides/). 126 | - Join the Directus community on [Discord](https://directus.chat/). 127 | - Check out the source code and give us a star on the official [Directus GitHub Repo](https://github.com/directus/directus). 128 | 129 | **Supabase** 130 | - Explore the [Supabase documentation](https://supabase.com/docs) 131 | - Join the Supabase community on [Discord](https://discord.supabase.com/) 132 | - Give Supabase a star on [Github](https://github.com/supabase/supabase) 133 | -------------------------------------------------------------------------------- /directus-plus-supabase/supabase-20220608A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/directus-plus-supabase/supabase-20220608A.webp -------------------------------------------------------------------------------- /get-started-building-a-blitz-website-with-directus/blitz-example.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-blitz-website-with-directus/blitz-example.webp -------------------------------------------------------------------------------- /get-started-building-a-blitz-website-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started Building a Blitz Website with Directus 3 | summary: This example will show you how to link a simple Blitz blog template to a Directus Project with a simple SQLite database containing a few blog posts. 4 | date: 2022-02-21 5 | author: Eron Powell & Azri Kahar 6 | image: ./blitz-example.webp 7 | category: integration 8 | --- 9 | 10 | > This example will show you how to link a simple Blitz blog template to a Directus Project with a simple SQLite database containing a few blog posts. 11 | 12 | [[toc]] 13 | 14 | ## Scope and Purpose 15 | 16 | The purpose of this article is to focus on the bare basics of linking Blitz 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. 17 | 18 | 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_. 19 | 20 | ::: warning Demonstration purposes only 21 | 22 | This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See [Contribution Guidelines](https://docs.directus.io/contributing/introduction/). 23 | 24 | ::: 25 | 26 | ## Setup 27 | 28 | 1. Clone the [examples repo](https://github.com/directus/examples). 29 | 30 | ::: warning Don't move the directories 31 | 32 | Every frontend template in the `examples` repo references the `shared` folder. So moving these directories around from one location to another could break the relative file path. 33 | 34 | ::: 35 | 36 | 2. From that repo, setup the [provided Directus instance](https://github.com/directus/examples/tree/main/directus) and get it running. Instructions are on the `README.md` page. 37 | 38 | 3. Install dependencies for this example. 39 | 40 | ``` 41 | cd blitz 42 | npm install 43 | ``` 44 | 45 | 4. Start the development server. 46 | 47 | ``` 48 | npm run dev 49 | ``` 50 | 51 | 5. Your Directus Blitz example is now running at . 52 | 53 | 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. 54 | 55 | ## Blitz 56 | 57 | Blitz is a batteries-included React framework that is inspired by Ruby on Rails, built on Next.js, and features a "Zero-API" data layer abstraction that eliminates the need for REST/GraphQL. To learn more about Blitz, please see the [official Blitz documentation](https://blitzjs.com/docs/blitz-pivot). 58 | 59 | ## Authentication 60 | 61 | 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](https://docs.directus.io/self-hosted/config-options/#authentication) or follow our guide on [how to setup SSO](https://docs.directus.io/self-hosted/sso/). 62 | 63 | ## Users, Roles and Permissions 64 | 65 | ![Directus Permissions](roles-and-permissions-20220222A.webp) 66 | 67 | For simplicity's sake, this Directus instance provided has [Public read permissions](https://docs.directus.io/getting-started/quickstart/#_6-set-role-public-permissions) activated for `articles` and `directus_users`. Find Permissions in your [local Directus Instance](http://localhost:8055/admin/settings/roles/public) under `Settings > Roles and Permissions`. 68 | 69 | 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](https://docs.directus.io/configuration/users-roles-permissions/). 70 | 71 | ## APIs 72 | 73 | There are two simple requests in this example worth noting. The first is in `index.js` and the other in `[id].js`. If you'd like to see these, here are links to the [index.js](https://github.com/directus/examples/blob/main/blitz/app/pages/index.js) and [[id].js](https://github.com/directus/examples/blob/main/blitz/app/pages/articles/%5Bid%5D.js) components on GitHub. However, please note that the Directus API is exhaustive for any database linked. 74 | 75 | Directus uses [Database Mirroring](https://docs.directus.io/getting-started/introduction/#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](https://docs.directus.io/reference/introduction/). 76 | 77 | ## More Help 78 | 79 | Looking for technical support for your non-enterprise project? Please visit the [Directus Discord Community](https://directus.chat/). 80 | 81 | Want to stay focused on your content and apps? Let Directus manage the platform with our [Directus Cloud service](https://directus.io/pricing/). 82 | -------------------------------------------------------------------------------- /get-started-building-a-blitz-website-with-directus/roles-and-permissions-20220222A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-blitz-website-with-directus/roles-and-permissions-20220222A.webp -------------------------------------------------------------------------------- /get-started-building-a-gatsby-website-with-directus/gatsby-example-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-gatsby-website-with-directus/gatsby-example-1.webp -------------------------------------------------------------------------------- /get-started-building-a-gatsby-website-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started Building a Gatsby Website with Directus 3 | summary: This example will show you how to link a simple Gatsby frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 4 | date: 2022-02-21 5 | author: Eron Powell & Azri Kahar 6 | image: ./gatsby-example-1.webp 7 | category: integration 8 | --- 9 | 10 | > This example will show you how to link a simple Gatsby frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 11 | 12 | [[toc]] 13 | 14 | ## Scope and Purpose 15 | 16 | The purpose of this article is to focus on the bare basics of linking a Gatsby 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. 17 | 18 | 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_. 19 | 20 | ::: warning Demonstration purposes only 21 | 22 | This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See [Contribution Guidelines](https://docs.directus.io/contributing/introduction/). 23 | 24 | ::: 25 | 26 | ## Setup 27 | 28 | 1. Clone the [examples repo](https://github.com/directus/examples). 29 | 30 | ::: warning Don't move the directories 31 | 32 | Every frontend template in the `examples` repo references the `shared` folder. So moving these directories around from one location to another could break the relative file path. 33 | 34 | ::: 35 | 36 | 2. From that repo, setup the [provided Directus instance](https://github.com/directus/examples/tree/main/directus) and get it running. Instructions are on the `README.md` page. 37 | 38 | 3. Install dependencies for this example. 39 | 40 | ``` 41 | cd gatsby 42 | npm install 43 | ``` 44 | 45 | 4. Create a `.env` file for this Gatsby template by copying and pasting the provided `.env.example` file. Nothing will need to be changed in the copied `.env` file since the URL, username, and password are all set. 46 | 47 | 5. Start the development server. 48 | 49 | ``` 50 | npm run develop 51 | ``` 52 | 53 | 6. Your Directus Gatsby example is now running at . 54 | 55 | 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. 56 | 57 | ## Gatsby 58 | 59 | Gatsby is a react-based Static Site Generator (SSG), which is the [rendering option](https://www.gatsbyjs.com/docs/conceptual/rendering-options/#what-is-a-rendering-option) used here. But starting with Gatsby 4, Deferred Static Generation (DSG) and Server-side Rendering (SSR) are supported as well. To learn more, see the documentation on [Gatsby's build process](https://www.gatsbyjs.com/docs/conceptual/overview-of-the-gatsby-build-process/). 60 | 61 | The provided Gatsby instance uses the official `gatsby-source-directus` [plugin](https://www.gatsbyjs.com/docs/plugins/) to pull data in from the Directus API. You can find this project's [config file](https://github.com/directus/examples/blob/main/gatsby/gatsby-config.js) under `examples > gatsby > gatsby-config.js`. To learn more, see the [Gatsby Directus plugin documentation](https://www.gatsbyjs.com/plugins/@directus/gatsby-source-directus/). 62 | 63 | ## Authentication 64 | 65 | 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](https://docs.directus.io/self-hosted/config-options/#authentication) or follow our guide on [how to setup SSO](https://docs.directus.io/self-hosted/sso/). 66 | 67 | ## Users, Roles and Permissions 68 | 69 | ![Directus Permissions](roles-and-permissions-20220222A.webp) 70 | 71 | For simplicity's sake, this Directus instance provided has [Public read permissions](https://docs.directus.io/getting-started/quickstart/#_6-set-role-public-permissions) activated for `articles` and `directus_users`. Find Permissions in your [local Directus Instance](http://localhost:8055/admin/settings/roles/public) under `Settings > Roles and Permissions`. 72 | 73 | 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](https://docs.directus.io/configuration/users-roles-permissions/). 74 | 75 | ## APIs 76 | 77 | There is a simple API call made from `gatsby-node.js`, which fetches `articles`. If you'd like to see this, you can [find `gatsby-node.js` on GitHub](https://github.com/directus/examples/blob/main/gatsby/gatsby-node.js). However, please note the Directus API is exhaustive for any database linked. 78 | 79 | Directus uses [Database Mirroring](https://docs.directus.io/getting-started/introduction/#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](https://docs.directus.io/reference/introduction/). 80 | 81 | ## More Help 82 | 83 | Looking for technical support for your non-enterprise project? Please visit the [Directus Discord Community](https://directus.chat/). 84 | 85 | Want to stay focused on your content and apps? Let Directus manage the platform with our [Directus Cloud service](https://directus.io/pricing/). 86 | -------------------------------------------------------------------------------- /get-started-building-a-gatsby-website-with-directus/roles-and-permissions-20220222A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-gatsby-website-with-directus/roles-and-permissions-20220222A.webp -------------------------------------------------------------------------------- /get-started-building-a-next-website-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started Building a Next.js Website with Directus 3 | summary: This example will show you how to link a simple Next.js blog template to a Directus Project with a simple SQLite database containing a few blog posts. 4 | date: 2022-02-21 5 | author: Eron Powell & Azri Kahar 6 | image: ./next-example.webp 7 | category: integration 8 | --- 9 | 10 | > This example will show you how to link a simple Next.js blog template to a Directus Project with a simple SQLite database containing a few blog posts. 11 | 12 | [[toc]] 13 | 14 | ## Scope and Purpose 15 | 16 | The purpose of this article is to focus on the bare basics of linking a Next.js 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. 17 | 18 | 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_. 19 | 20 | ::: warning Demonstration purposes only 21 | 22 | This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See [Contribution Guidelines](https://docs.directus.io/contributing/introduction/). 23 | 24 | ::: 25 | 26 | ## Setup 27 | 28 | 1. Clone the [examples repo](https://github.com/directus/examples). 29 | 30 | ::: warning Don't move the directories 31 | 32 | Every frontend template in the `examples` repo references the `shared` folder. So moving these directories around from one location to another could break the relative file path. 33 | 34 | ::: 35 | 36 | 2. From that repo, setup the [provided Directus instance](https://github.com/directus/examples/tree/main/directus) and get it running. Instructions are on the `README.md` page. 37 | 38 | 3. Install dependencies for this example. 39 | 40 | ``` 41 | cd nextjs 42 | npm install 43 | ``` 44 | 45 | 4. Create a `.env` file for this Next.js template by copying and pasting the provided `.env.example` file. Nothing will need to be changed in the copied `.env` file since the URL, username, and password are all set. 46 | 47 | 5. Start the development server. 48 | 49 | ``` 50 | npm run dev 51 | ``` 52 | 53 | 6. Your Directus Next.js example is now running at . 54 | 55 | 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. 56 | 57 | ## Next.js 58 | 59 | Next.js is a React framework that enables Static Site Generation (SSG), Server-side Rendering (SSR), Client-side Rendering (CSR), _or all three at the same time_. To learn more, checkout the official [Next.js documentation](https://nextjs.org/docs/basic-features/pages). 60 | 61 | ## Authentication 62 | 63 | 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](https://docs.directus.io/self-hosted/config-options/#authentication) or follow our guide on [how to setup SSO](https://docs.directus.io/self-hosted/sso/). 64 | 65 | ## Users, Roles and Permissions 66 | 67 | ![Directus Permissions](roles-and-permissions-20220222A.webp) 68 | 69 | For simplicity's sake, this Directus instance provided has [Public read permissions](https://docs.directus.io/getting-started/quickstart/#_6-set-role-public-permissions) activated for `articles` and `directus_users`. Find Permissions in your [local Directus Instance](http://localhost:8055/admin/settings/roles/public) under `Settings > Roles and Permissions`. 70 | 71 | 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](https://docs.directus.io/configuration/users-roles-permissions/). 72 | 73 | ## APIs 74 | 75 | There are two simple requests in this example worth noting. The first is in `index.jsx` and the other in `[id].jsx`. If you'd like to see these, here are links to the [index.jsx](https://github.com/directus/examples/blob/main/nextjs/pages/index.jsx) and [[id].jsx](https://github.com/directus/examples/blob/main/nextjs/pages/articles/%5Bid%5D.jsx) components on GitHub. However, please note that the Directus API is exhaustive for any database linked. 76 | 77 | Directus uses [Database Mirroring](https://docs.directus.io/getting-started/introduction/#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](https://docs.directus.io/reference/introduction/). 78 | 79 | ## More Help 80 | 81 | Looking for technical support for your non-enterprise project? Please visit the [Directus Discord Community](https://directus.chat/). 82 | 83 | Want to stay focused on your content and apps? Let Directus manage the platform with our [Directus Cloud service](https://directus.io/pricing/). 84 | -------------------------------------------------------------------------------- /get-started-building-a-next-website-with-directus/next-example.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-next-website-with-directus/next-example.webp -------------------------------------------------------------------------------- /get-started-building-a-next-website-with-directus/roles-and-permissions-20220222A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-next-website-with-directus/roles-and-permissions-20220222A.webp -------------------------------------------------------------------------------- /get-started-building-a-nuxt-2-website-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started Building a Nuxt 2 Website with Directus 3 | summary: This example will show you how to link a simple Nuxt.js blog template to a Directus Project with a simple SQLite database containing a few blog posts. 4 | date: 2022-02-21 5 | author: Eron Powell & Azri Kahar 6 | image: ./nuxt-example.webp 7 | category: integration 8 | --- 9 | 10 | > This example will show you how to link a simple Nuxt.js blog template to a Directus Project with a simple SQLite database containing a few blog posts. 11 | 12 | [[toc]] 13 | 14 | ## Scope and Purpose 15 | 16 | The purpose of this article is to focus on the bare basics of linking a Nuxt 2 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. 17 | 18 | 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_. 19 | 20 | ::: warning Demonstration purposes only 21 | 22 | This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See [Contribution Guidelines](https://docs.directus.io/contributing/introduction/). 23 | 24 | ::: 25 | 26 | ## Setup 27 | 28 | 1. Clone the [examples repo](https://github.com/directus/examples). 29 | 30 | ::: warning Don't move the directories 31 | 32 | Every frontend template in the `examples` repo references the `shared` folder. So moving these directories around from one location to another could break the relative file path. 33 | 34 | ::: 35 | 36 | 2. From that repo, setup the [provided Directus instance](https://github.com/directus/examples/tree/main/directus) and get it running. Instructions are on the `README.md` page. 37 | 38 | 3. Install dependencies for this example. 39 | 40 | ``` 41 | cd nuxtjs 42 | npm install 43 | ``` 44 | 45 | 4. Create a `.env` file for this Nuxt.js template by copying and pasting the provided `.env.example` file. Nothing will need to be changed in the copied `.env` file since the URL, username, and password are all set. 46 | 47 | 5. Start the development server. 48 | 49 | ``` 50 | npm run dev 51 | ``` 52 | 53 | 6. Your Directus Nuxt.js example is now running at . 54 | 55 | 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. 56 | 57 | ## Nuxt 2 58 | 59 | Nuxt.js is a Vue framework that enables Static Site Generation (SSG) and Server-side Rendering (SSR). To learn more, checkout the [official Nuxt.js docs](https://nuxtjs.org/docs/get-started/installation). 60 | 61 | ## Authentication 62 | 63 | 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](https://docs.directus.io/self-hosted/config-options/#authentication) or follow our guide on [how to setup SSO](https://docs.directus.io/self-hosted/sso/). 64 | 65 | ## Users, Roles and Permissions 66 | 67 | ![Directus Permissions](roles-and-permissions-20220222A.webp) 68 | 69 | For simplicity's sake, this Directus instance provided has [Public read permissions](https://docs.directus.io/getting-started/quickstart/#_6-set-role-public-permissions) activated for `articles` and `directus_users`. Find Permissions in your [local Directus Instance](http://localhost:8055/admin/settings/roles/public) under `Settings > Roles and Permissions`. 70 | 71 | 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](https://docs.directus.io/configuration/users-roles-permissions/). 72 | 73 | ## APIs 74 | 75 | There are two simple requests in this example worth noting. The first is in `index.vue` and the other in `_id.vue`. If you'd like to see these, here are links to the [index](https://github.com/directus/examples/blob/main/nuxtjs/pages/index.vue) and [\_id](https://github.com/directus/examples/blob/main/nuxtjs/pages/articles/_id.vue) components on GitHub. However, please note that the Directus API is exhaustive for any database linked. 76 | 77 | Directus uses [Database Mirroring](https://docs.directus.io/getting-started/introduction/#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](https://docs.directus.io/reference/introduction/). 78 | 79 | ## More Help 80 | 81 | Looking for technical support for your non-enterprise project? Please visit the [Directus Discord Community](https://directus.chat/). 82 | 83 | Want to stay focused on your content and apps? Let Directus manage the platform with our [Directus Cloud service](https://directus.io/pricing/). 84 | -------------------------------------------------------------------------------- /get-started-building-a-nuxt-2-website-with-directus/nuxt-example.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-nuxt-2-website-with-directus/nuxt-example.webp -------------------------------------------------------------------------------- /get-started-building-a-nuxt-2-website-with-directus/roles-and-permissions-20220222A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-nuxt-2-website-with-directus/roles-and-permissions-20220222A.webp -------------------------------------------------------------------------------- /get-started-building-a-nuxt-3-blog-with-directus/build-a-blog-with-nuxt3-and-directus.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-nuxt-3-blog-with-directus/build-a-blog-with-nuxt3-and-directus.webp -------------------------------------------------------------------------------- /get-started-building-a-nuxt-3-blog-with-directus/configure-directus-model.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-nuxt-3-blog-with-directus/configure-directus-model.webp -------------------------------------------------------------------------------- /get-started-building-a-nuxt-3-blog-with-directus/create-custom-fields.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-nuxt-3-blog-with-directus/create-custom-fields.webp -------------------------------------------------------------------------------- /get-started-building-a-nuxt-3-blog-with-directus/creating-a-collection.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-nuxt-3-blog-with-directus/creating-a-collection.webp -------------------------------------------------------------------------------- /get-started-building-a-nuxt-3-blog-with-directus/homepage-preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-nuxt-3-blog-with-directus/homepage-preview.webp -------------------------------------------------------------------------------- /get-started-building-a-nuxt-3-blog-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build a blog with Nuxt 3 & Directus 3 | summary: This guide shows you how to build a blog with Nuxt 3 and Directus step by step. 4 | date: 2022-04-07 5 | author: Conner Bachmann 6 | image: ./build-a-blog-with-nuxt3-and-directus.webp 7 | category: integration 8 | --- 9 | 10 | # Build a blog with Nuxt 3 & Directus 11 | 12 | > This guide shows you how to build a blog with Nuxt 3 and Directus step by step. 13 | 14 | [[toc]] 15 | 16 | ### What is Nuxt 3? 17 | 18 | Nuxt 3 is an open source framework making web development simple and powerful. With Vue 3 and experience hybrid rendering, powerful data fetching and new features. [Visit the offical website](https://v3.nuxtjs.org). 19 | 20 | ## Setup 🚀 21 | 22 | ### 1. Create a new Nuxt 3 project 23 | 24 | ```bash 25 | npx nuxi init my-blog 26 | 27 | cd my-blog/ 28 | 29 | npm install 30 | ``` 31 | 32 | This created your Nuxt 3 application 💚. 33 | 34 | ### 2. Create your Directus application [here](https://directus.cloud/login) 35 | 36 | ### 3. Install the Directus module & a CSS framework. We use TailwindCSS in this guide. 37 | 38 | ```bash 39 | npm install nuxt-directus @nuxtjs/tailwindcss 40 | ``` 41 | 42 | ### 4. Start the development server. 43 | 44 | ```bash 45 | npm run dev 46 | ``` 47 | 48 | Your Nuxt 3 application is now running at . 49 | 50 | ## Configuration ⚙️ 51 | 52 | ### 1. Update your `nuxt.config.ts` 53 | 54 | Change the URL to your Directus server in the configuration and add the modules we just installed. ✨ 55 | 56 | ```ts 57 | import { defineNuxtConfig } from 'nuxt/config'; 58 | 59 | export default defineNuxtConfig({ 60 | modules: ["nuxt-directus", "@nuxtjs/tailwindcss"], 61 | directus: { 62 | url: "https://.directus.app", 63 | }, 64 | }); 65 | ``` 66 | 67 | ### Create a collection in the Directus admin dashboard 📄 68 | 69 | ![Creating a Directus collection](creating-a-collection.webp) 70 | 71 | We call this collection `blog`, we can add an ID by selecting Type `Generated UUID`. Now, we check the box `date_created` to have a date for the blog post. 72 | 73 | ### Create two new fields: 74 | 75 | ![Configure the Directus model](configure-directus-model.webp) 76 | 77 | Input field: `title` (type string **required**) - Title of the Blog article. 78 | Input field: `short_content` (type string **required**) - Short description of the article content. 79 | And a textarea field: `content` (type string **required**) - Article content. 80 | 81 | ### Our blog data model should look like this: 82 | 83 | ![Custom fields](create-custom-fields.webp) 84 | 85 | ### Configure the Directus permissions 🛑 86 | 87 | Add the permission to see all items to the public role in the just created `blog collection`. 88 | 89 | ![Update roles & permissions](update-roles-and-permissions.webp) 90 | 91 | ### Go to your collection and create example items. 92 | 93 | ## You are ready to code! 💻 94 | 95 | ### Open your Editor (In this Guide: Visual Studio Code) and go to the directory of the Nuxt project 96 | 97 | Delete the file `app.vue`, and create a new file `pages/index.vue`. 98 | 99 | **This is our new homepage.** 100 | 101 | Add the script to the page 102 | 103 | ```html 104 | 109 | ``` 110 | 111 | Now the page fetches the Blog collection items from your Directus server. 112 | 113 | Create the page content: 114 | 115 | ```html 116 | 136 | ``` 137 | 138 | ![Home Preview](homepage-preview.webp) 139 | 140 | Now all your blog posts will be displayed on the page, if you click on the title you will be redirect to a blank page, to fix this we create a dynamic page. 141 | 142 | Create a new file `pages/articles/[...id].vue` 143 | 144 | ```html 145 | 154 | 155 | 162 | ``` 163 | 164 | If you click on the title of an article you will be redirected to a dynamic page, which gets the id and fetches the corresponding article and renders it. 165 | 166 | ![Slug page Preview](slug-page-preview.webp) 167 | 168 | **We are finished!** ✨ 169 | 170 | We created a simple and minimalistic blog using Nuxt 3 and Directus. The design can be customized at any time, this guide should only show step-by-step how to build a blog. TailwindCSS did a lot of the design work for us, the nuxt-directus module gives us a quick and easy solution to access our Directus server. 171 | 172 | If you have questions feel free to ask on the [Nuxt Discord Server](https://discord.gg/zubPXvtspT) or [Directus Discord Server](https://directus.chat) 173 | You can find the code here: https://github.com/directus/examples/tree/main/nuxt3/nuxt3-directus-blog 174 | -------------------------------------------------------------------------------- /get-started-building-a-nuxt-3-blog-with-directus/slug-page-preview.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-nuxt-3-blog-with-directus/slug-page-preview.webp -------------------------------------------------------------------------------- /get-started-building-a-nuxt-3-blog-with-directus/update-roles-and-permissions.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-nuxt-3-blog-with-directus/update-roles-and-permissions.webp -------------------------------------------------------------------------------- /get-started-building-a-react-website-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started Building a React Website with Directus 3 | summary: This example will show you how to link a simple React frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 4 | date: 2022-02-21 5 | author: Eron Powell & Azri Kahar 6 | image: ./react-example.webp 7 | category: integration 8 | --- 9 | 10 | > This example will show you how to link a simple React frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 11 | 12 | [[toc]] 13 | 14 | ## Scope and Purpose 15 | 16 | The purpose of this article is to focus on the bare basics of linking a React 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. 17 | 18 | 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_. 19 | 20 | ::: warning Demonstration purposes only 21 | 22 | This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See [Contribution Guidelines](https://docs.directus.io/contributing/introduction/). 23 | 24 | ::: 25 | 26 | ## Setup 27 | 28 | 1. Clone the [examples repo](https://github.com/directus/examples). 29 | 30 | ::: warning Don't move the directories 31 | 32 | Every frontend template in the `examples` repo references the `shared` folder. So moving these directories around from one location to another could break the relative file path. 33 | 34 | ::: 35 | 36 | 2. From that repo, setup the [provided Directus instance](https://github.com/directus/examples/tree/main/directus) and get it running. Instructions are on the `README.md` page. 37 | 38 | 3. Install dependencies for this example. 39 | 40 | ``` 41 | cd react 42 | npm install 43 | ``` 44 | 45 | 4. Create a `.env` file for this React template by copying and pasting the provided `.env.example` file. Nothing will need to be changed in the copied `.env` file. 46 | 47 | 5. Start the development server. 48 | 49 | ``` 50 | npm start 51 | ``` 52 | 53 | 6. Your Directus React example is now running at . 54 | 55 | 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. 56 | 57 | ## React 58 | 59 | React is a library primarily for building [Single-page Applications](https://reactjs.org/) (SPAs), though there are cases where you may want use it to [extend your existing site](https://reactjs.org/docs/add-react-to-a-website.html). Some frameworks built on React also allow Server Side rendering and static site generation (e.g. Next.js and Gatsby). We have also provided examples alongside this one for [Next.js](https://github.com/directus/examples/tree/main/nextjs) and [Gatsby](https://github.com/directus/examples/tree/main/gatsby). 60 | 61 | Also, please note the JavaScript SDK is pulled in under `react > src > services > directus.js`. To learn more, you can see the [directus.js](https://github.com/directus/examples/blob/main/react/src/services/directus.js) file with the SDK on GitHub and read the [Directus SDK documentation](https://docs.directus.io/reference/sdk/). 62 | 63 | ## Authentication 64 | 65 | 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](https://docs.directus.io/self-hosted/config-options/#authentication) or follow our guide on [how to setup SSO](https://docs.directus.io/self-hosted/sso/). 66 | 67 | ## Users, Roles and Permissions 68 | 69 | ![Directus Permissions](roles-and-permissions-20220222A.webp) 70 | 71 | For simplicity's sake, this Directus instance provided has [Public read permissions](https://docs.directus.io/getting-started/quickstart/#_6-set-role-public-permissions) activated for `articles` and `directus_users`. Find Permissions in your [local Directus Instance](http://localhost:8055/admin/settings/roles/public) under `Settings > Roles and Permissions`. 72 | 73 | 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](https://docs.directus.io/configuration/users-roles-permissions/). 74 | 75 | ## APIs 76 | 77 | There are two simple requests in this example worth noting. The first is in `Home.jsx` and the other in `Article.jsx`. If you'd like to see these, here are links to the [Home](https://github.com/directus/examples/blob/main/react/src/routes/Home.jsx) and [Article](https://github.com/directus/examples/blob/main/react/src/routes/Article.jsx) components on GitHub. However, please note that the Directus API is exhaustive for any database linked. 78 | 79 | Directus uses [Database Mirroring](https://docs.directus.io/getting-started/introduction/#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](https://docs.directus.io/reference/introduction/). 80 | 81 | ## More Help 82 | 83 | Looking for technical support for your non-enterprise project? Please visit the [Directus Discord Community](https://directus.chat/). 84 | 85 | Want to stay focused on your content and apps? Let Directus manage the platform with our [Directus Cloud service](https://directus.io/pricing/). 86 | -------------------------------------------------------------------------------- /get-started-building-a-react-website-with-directus/react-example.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-react-website-with-directus/react-example.webp -------------------------------------------------------------------------------- /get-started-building-a-react-website-with-directus/roles-and-permissions-20220222A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-react-website-with-directus/roles-and-permissions-20220222A.webp -------------------------------------------------------------------------------- /get-started-building-a-remix-website-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started Building a Remix Website with Directus 3 | date: 2022-02-21 4 | author: Eron Powell & Azri Kahar 5 | image: ./remix-example.webp 6 | category: integration 7 | --- 8 | 9 | > This example will show you how to link a simple Remix frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 10 | 11 | [[toc]] 12 | 13 | ## Scope and Purpose 14 | 15 | The purpose of this article is to focus on the bare basics of linking a Remix 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. 16 | 17 | 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_. 18 | 19 | ::: warning Demonstration purposes only 20 | 21 | This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See [Contribution Guidelines](https://docs.directus.io/contributing/introduction/). 22 | 23 | ::: 24 | 25 | ## Setup 26 | 27 | 1. Clone the [examples repo](https://github.com/directus/examples). 28 | 29 | ::: warning Don't move the directories 30 | 31 | Every frontend template in the `examples` repo references the `shared` folder. So moving these directories around from one location to another could break the relative file path. 32 | 33 | ::: 34 | 35 | 2. From that repo, setup the [provided Directus instance](https://github.com/directus/examples/tree/main/directus) and get it running. Instructions are on the `README.md` page. 36 | 37 | 3. Install dependencies for this example. 38 | 39 | ``` 40 | cd remix 41 | npm install 42 | ``` 43 | 44 | 4. Create a `.env` file for this Remix template by copying and pasting the provided `.env.example` file. Nothing will need to be changed in the copied `.env` file. 45 | 46 | 5. Start the development server. 47 | 48 | ``` 49 | npm run dev 50 | ``` 51 | 52 | 6. Your Directus Remix example is now running at . 53 | 54 | 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. 55 | 56 | ## Remix 57 | 58 | Remix is a React framework for Server-side Rendering (SSR) composed of a compiler, server side HTTP handler, server framework and browser framework. 59 | Read the [official Remix documentation](https://remix.run/docs/en/v1/pages/technical-explanation) to learn more. 60 | 61 | Also, please note the Directus JavaScript SDK is pulled in under `remix > app > lib > directus.js`. If you're interested, [see the `directus.js` file on GitHub](https://github.com/directus/examples/blob/main/remix/app/lib/directus.js) and read more in the [Directus SDK Documentation](https://docs.directus.io/reference/sdk/). 62 | 63 | ## Authentication 64 | 65 | 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](https://docs.directus.io/self-hosted/config-options/#authentication) or follow our guide on [how to setup SSO](https://docs.directus.io/self-hosted/sso/). 66 | 67 | ## Users, Roles and Permissions 68 | 69 | ![Directus Permissions](roles-and-permissions-20220222A.webp) 70 | 71 | For simplicity's sake, this Directus instance provided has [Public read permissions](https://docs.directus.io/getting-started/quickstart/#_6-set-role-public-permissions) activated for `articles` and `directus_users`. Find Permissions in your [local Directus Instance](http://localhost:8055/admin/settings/roles/public) under `Settings > Roles and Permissions`. 72 | 73 | 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](https://docs.directus.io/configuration/users-roles-permissions/). 74 | 75 | ## APIs 76 | 77 | There are two simple requests in this example worth noting. The first is in `index.jsx` and the other in `$id.jsx`. If you'd like to see these, here are links to the [index](https://github.com/directus/examples/blob/main/remix/app/routes/index.jsx) and [$id](https://github.com/directus/examples/blob/main/remix/app/routes/articles/%24id.jsx) components on GitHub. However, please note that the Directus API is exhaustive for any database linked. 78 | 79 | Directus uses [Database Mirroring](https://docs.directus.io/getting-started/introduction/#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](https://docs.directus.io/reference/introduction/). 80 | 81 | ## More Help 82 | 83 | Looking for technical support for your non-enterprise project? Please visit the [Directus Discord Community](https://directus.chat/). 84 | 85 | Want to stay focused on your content and apps? Let Directus manage the platform with our [Directus Cloud service](https://directus.io/pricing/). 86 | -------------------------------------------------------------------------------- /get-started-building-a-remix-website-with-directus/remix-example.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-remix-website-with-directus/remix-example.webp -------------------------------------------------------------------------------- /get-started-building-a-remix-website-with-directus/roles-and-permissions-20220222A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-remix-website-with-directus/roles-and-permissions-20220222A.webp -------------------------------------------------------------------------------- /get-started-building-a-svelte-website-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started Building a Svelte Website with Directus 3 | summary: 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. 4 | date: 2022-02-21 5 | author: Eron Powell & Azri Kahar 6 | image: ./svelte-example.webp 7 | category: integration 8 | --- 9 | 10 | > 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. 11 | 12 | [[toc]] 13 | 14 | ## Scope and Purpose 15 | 16 | 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. 17 | 18 | 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_. 19 | 20 | ::: warning Demonstration purposes only 21 | 22 | This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See [Contribution Guidelines](https://docs.directus.io/contributing/introduction/). 23 | 24 | ::: 25 | 26 | ## Setup 27 | 28 | 1. Clone the [examples repo](https://github.com/directus/examples). 29 | 30 | ::: warning Don't move the directories 31 | 32 | Every frontend template in the `examples` repo references the `shared` folder. So moving these directories around from one location to another could break the relative file path. 33 | 34 | ::: 35 | 36 | 2. From that repo, setup the [provided Directus instance](https://github.com/directus/examples/tree/main/directus) and get it running. Instructions are on the `README.md` page. 37 | 38 | 3. Install dependencies for this example. 39 | 40 | ``` 41 | cd svelte 42 | npm install 43 | ``` 44 | 45 | 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. 46 | 47 | 5. Start the development server. 48 | 49 | ``` 50 | npm run dev 51 | ``` 52 | 53 | 6. Your Directus Svelte example is now running at . 54 | 55 | 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. 56 | 57 | ## Svelte 58 | 59 | Svelte is an incrementally adoptable [framework for building webapps](https://svelte.dev/tutorial/basics) 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](https://kit.svelte.dev/). 60 | 61 | 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](https://github.com/directus/examples/blob/main/svelte/src/services/directus.js) and read more in the [Directus SDK Documentation](https://docs.directus.io/reference/sdk/). 62 | 63 | ## Authentication 64 | 65 | 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](https://docs.directus.io/self-hosted/config-options/#authentication) or follow our guide on [how to setup SSO](https://docs.directus.io/self-hosted/sso/). 66 | 67 | ## Users, Roles and Permissions 68 | 69 | ![Directus Permissions](roles-and-permissions-20220222A.webp) 70 | 71 | For simplicity's sake, this Directus instance provided has [Public read permissions](https://docs.directus.io/getting-started/quickstart/#_6-set-role-public-permissions) activated for `articles` and `directus_users`. Find Permissions in your [local Directus Instance](http://localhost:8055/admin/settings/roles/public) under `Settings > Roles and Permissions`. 72 | 73 | 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](https://docs.directus.io/configuration/users-roles-permissions/). 74 | 75 | ## APIs 76 | 77 | 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](https://github.com/directus/examples/blob/main/svelte/src/routes/Home.svelte) and [Article.svelte](https://github.com/directus/examples/blob/main/svelte/src/routes/Article.svelte) on GitHub. However, please note that the Directus API is exhaustive for any database linked. 78 | 79 | Directus uses [Database Mirroring](https://docs.directus.io/getting-started/introduction/#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](https://docs.directus.io/reference/introduction/). 80 | 81 | ## More Help 82 | 83 | Looking for technical support for your non-enterprise project? Please visit the [Directus Discord Community](https://directus.chat/). 84 | 85 | Want to stay focused on your content and apps? Let Directus manage the platform with our [Directus Cloud service](https://directus.io/pricing/). 86 | -------------------------------------------------------------------------------- /get-started-building-a-svelte-website-with-directus/roles-and-permissions-20220222A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-svelte-website-with-directus/roles-and-permissions-20220222A.webp -------------------------------------------------------------------------------- /get-started-building-a-svelte-website-with-directus/svelte-example.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-svelte-website-with-directus/svelte-example.webp -------------------------------------------------------------------------------- /get-started-building-a-sveltekit-website-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started Building a Sveltekit Website with Directus 3 | summary: This example will show you how to link a simple SvelteKit frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 4 | date: 2022-02-21 5 | author: Eron Powell & Azri Kahar 6 | image: ./sveltekit-example.webp 7 | category: integration 8 | --- 9 | 10 | > This example will show you how to link a simple SvelteKit frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 11 | 12 | [[toc]] 13 | 14 | ## Scope and Purpose 15 | 16 | The purpose of this article is to focus on the bare basics of linking a SvelteKit 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. 17 | 18 | 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_. 19 | 20 | ::: warning Demonstration purposes only 21 | 22 | This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See [Contribution Guidelines](https://docs.directus.io/contributing/introduction/). 23 | 24 | ::: 25 | 26 | ## Setup 27 | 28 | 1. Clone the [examples repo](https://github.com/directus/examples). 29 | 30 | ::: warning Don't move the directories 31 | 32 | Every frontend template in the `examples` repo references the `shared` folder. So moving these directories around from one location to another could break the relative file path. 33 | 34 | ::: 35 | 36 | 2. From that repo, setup the [provided Directus instance](https://github.com/directus/examples/tree/main/directus) and get it running. Instructions are on the `README.md` page. 37 | 38 | 3. Install dependencies for this example. 39 | 40 | ``` 41 | cd sveltekit 42 | npm install 43 | ``` 44 | 45 | 4. Create a `.env` file for this SvelteKit template by copying and pasting the provided `.env.example` file. Nothing will need to be changed in the copied `.env` file. 46 | 47 | 5. Start the development server. 48 | 49 | ``` 50 | npm run dev 51 | ``` 52 | 53 | 6. Your Directus Svelte example is now running at . 54 | 55 | 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. 56 | 57 | ## SvelteKit 58 | 59 | SvelteKit is a [framework for Svelte](https://kit.svelte.dev/) that enables Server-side rendering (SSO), routing and more. 60 | 61 | Also, please note the Directus JavaScript SDK is pulled in under `examples > sveltekit > src > lib > client.js`. If you're interested, [see the `client.js` file on GitHub](https://github.com/directus/examples/blob/main/sveltekit/src/lib/client.js) and read more in the [Directus SDK Documentation](https://docs.directus.io/reference/sdk/). 62 | 63 | ## Authentication 64 | 65 | 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](https://docs.directus.io/self-hosted/config-options/#authentication) or follow our guide on [how to setup SSO](https://docs.directus.io/self-hosted/sso/). 66 | 67 | ## Users, Roles and Permissions 68 | 69 | ![Directus Permissions](roles-and-permissions-20220222A.webp) 70 | 71 | For simplicity's sake, this Directus instance provided has [Public read permissions](https://docs.directus.io/getting-started/quickstart/#_6-set-role-public-permissions) activated for `articles` and `directus_users`. Find Permissions in your [local Directus Instance](http://localhost:8055/admin/settings/roles/public) under `Settings > Roles and Permissions`. 72 | 73 | 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](https://docs.directus.io/configuration/users-roles-permissions/). 74 | 75 | ## APIs 76 | 77 | There are two simple requests in this example worth noting. The first is in `index.json.js` and the other in `[id].json.js`. 78 | 79 | Directus uses [Database Mirroring](https://docs.directus.io/getting-started/introduction/#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](https://docs.directus.io/reference/introduction/). 80 | 81 | ## More Help 82 | 83 | Looking for technical support for your non-enterprise project? Please visit the [Directus Discord Community](https://directus.chat/). 84 | 85 | Want to stay focused on your content and apps? Let Directus manage the platform with our [Directus Cloud service](https://directus.io/pricing/). 86 | -------------------------------------------------------------------------------- /get-started-building-a-sveltekit-website-with-directus/roles-and-permissions-20220222A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-sveltekit-website-with-directus/roles-and-permissions-20220222A.webp -------------------------------------------------------------------------------- /get-started-building-a-sveltekit-website-with-directus/sveltekit-example.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-sveltekit-website-with-directus/sveltekit-example.webp -------------------------------------------------------------------------------- /get-started-building-a-vue-website-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started Building a Vue Website with Directus 3 | summary: This example will show you how to link a simple Vue frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 4 | date: 2022-02-21 5 | author: Eron Powell & Azri Kahar 6 | image: ./vue-example.webp 7 | category: integration 8 | --- 9 | 10 | > This example will show you how to link a simple Vue frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 11 | 12 | [[toc]] 13 | 14 | ## Scope and Purpose 15 | 16 | The purpose of this article is to focus on the bare basics of linking a Vue 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. 17 | 18 | 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_. 19 | 20 | ::: warning Demonstration purposes only 21 | 22 | This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See [Contribution Guidelines](https://docs.directus.io/contributing/introduction/). 23 | 24 | ::: 25 | 26 | ## Setup 27 | 28 | 1. Clone the [examples repo](https://github.com/directus/examples). 29 | 30 | ::: warning Don't move the directories 31 | 32 | Every frontend template in the `examples` repo references the `shared` folder. So moving these directories around from one location to another could break the relative file path. 33 | 34 | ::: 35 | 36 | 2. From that repo, setup the [provided Directus instance](https://github.com/directus/examples/tree/main/directus) and get it running. Instructions are on the `README.md` page. 37 | 38 | 3. Install dependencies for this example. 39 | 40 | ``` 41 | cd vue 42 | npm install 43 | ``` 44 | 45 | 4. Create a `.env` file for this Vue template by copying and pasting the provided `.env.example` file. Nothing will need to be changed in the copied `.env` file. 46 | 47 | 5. Start the development server. 48 | 49 | ``` 50 | npm run dev 51 | ``` 52 | 53 | 6. Your Directus Vue example is now running at . 54 | 55 | 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. 56 | 57 | ## Vue 58 | 59 | Vue is an [incrementally adoptable library](https://v3.vuejs.org/guide/introduction.html#what-is-vue-js) for extending your existing site as well as building Single-page Applications (SPAs). Some frameworks built on Vue also allow Server Side rendering and static site generation (e.g. Nuxt.js). We have also provided examples alongside this one for [Nuxt.js](https://github.com/directus/examples/tree/main/nuxtjs). 60 | 61 | Also, please note the Directus JavaScript SDK is pulled in under `examples > vue > src > services > directus.js`. If you're interested, [see the `directus.js` file on GitHub](https://github.com/directus/examples/blob/main/vue/src/services/directus.js) and read more in the [Directus SDK Documentation](https://docs.directus.io/reference/sdk/). 62 | 63 | ## Authentication 64 | 65 | 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](https://docs.directus.io/self-hosted/config-options/#authentication) or follow our guide on [how to setup SSO](https://docs.directus.io/self-hosted/sso/). 66 | 67 | ## Users, Roles and Permissions 68 | 69 | ![Directus Permissions](roles-and-permissions-20220222A.webp) 70 | 71 | For simplicity's sake, this Directus instance provided has [Public read permissions](https://docs.directus.io/getting-started/quickstart/#_6-set-role-public-permissions) activated for `articles` and `directus_users`. Find Permissions in your [local Directus Instance](http://localhost:8055/admin/settings/roles/public) under `Settings > Roles and Permissions`. 72 | 73 | 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](https://docs.directus.io/configuration/users-roles-permissions/). 74 | 75 | ## APIs 76 | 77 | There are two simple requests in this example worth noting. The first is in `Home.vue` and the other in `Article.vue`. If you'd like to see these, here are links to the [Home](https://github.com/directus/examples/blob/main/vue/src/views/Home.vue) and [Article](https://github.com/directus/examples/blob/main/vue/src/views/Article.vue) components on GitHub. However, please note that the Directus API is exhaustive for any database linked. 78 | 79 | Directus uses [Database Mirroring](https://docs.directus.io/getting-started/introduction/#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](https://docs.directus.io/reference/introduction/). 80 | 81 | ## More Help 82 | 83 | Looking for technical support for your non-enterprise project? Please visit the [Directus Discord Community](https://directus.chat/). 84 | 85 | Want to stay focused on your content and apps? Let Directus manage the platform with our [Directus Cloud service](https://directus.io/pricing/). 86 | -------------------------------------------------------------------------------- /get-started-building-a-vue-website-with-directus/roles-and-permissions-20220222A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-vue-website-with-directus/roles-and-permissions-20220222A.webp -------------------------------------------------------------------------------- /get-started-building-a-vue-website-with-directus/vue-example.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-a-vue-website-with-directus/vue-example.webp -------------------------------------------------------------------------------- /get-started-building-an-angular-website-with-directus/angular-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-an-angular-website-with-directus/angular-example.png -------------------------------------------------------------------------------- /get-started-building-an-angular-website-with-directus/angular-example.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-an-angular-website-with-directus/angular-example.webp -------------------------------------------------------------------------------- /get-started-building-an-angular-website-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started Building an Angular Website with Directus 3 | summary: This example will show you how to link a simple Angular frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 4 | date: 2022-02-21 5 | author: Eron Powell & Azri Kahar 6 | image: ./angular-example.webp 7 | category: integration 8 | --- 9 | 10 | > This example will show you how to link a simple Angular frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 11 | 12 | [[toc]] 13 | 14 | ## Scope and Purpose 15 | 16 | The purpose of this article is to focus on the bare basics of linking an Angular 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. 17 | 18 | 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_. 19 | 20 | ::: warning Demonstration purposes only 21 | 22 | This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See [Contribution Guidelines](https://docs.directus.io/contributing/introduction/). 23 | 24 | ::: 25 | 26 | ## Setup 27 | 28 | 1. Clone the [examples repo](https://github.com/directus/examples). 29 | 30 | ::: warning Don't move the directories 31 | 32 | Every frontend template in the `examples` repo references the `shared` folder. So moving these directories around from one location to another could break the relative file path. 33 | 34 | ::: 35 | 36 | 2. From that repo, setup the [provided Directus instance](https://github.com/directus/examples/tree/main/directus) and get it running. Instructions are on the `README.md` page. 37 | 38 | 3. Install dependencies for this example. 39 | 40 | ``` 41 | cd angular 42 | npm install 43 | ``` 44 | 45 | 4. Start the development server. 46 | 47 | ``` 48 | npm start 49 | ``` 50 | 51 | 5. Your Directus Angular example is now running at . 52 | 53 | 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. 54 | 55 | ## Angular 56 | 57 | Angular is a library primarily for building [Single-page Applications](https://angular.io/) (SPAs). [Angular Universal](https://angular.io/guide/universal) _(which is not used in this example)_ is a technology that enables Server-side Rendering (SSR) as well as prerendering. 58 | 59 | ## Authentication 60 | 61 | 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](https://docs.directus.io/self-hosted/config-options/#authentication) or follow our guide on [how to setup SSO](https://docs.directus.io/self-hosted/sso/). 62 | 63 | ## Users, Roles and Permissions 64 | 65 | ![Directus Permissions](roles-and-permissions-20220222A.webp) 66 | 67 | For simplicity's sake, this Directus instance provided has [Public read permissions](https://docs.directus.io/getting-started/quickstart/#_6-set-role-public-permissions) activated for `articles` and `directus_users`. Find Permissions in your [local Directus Instance](http://localhost:8055/admin/settings/roles/public) under `Settings > Roles and Permissions`. 68 | 69 | 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](https://docs.directus.io/configuration/users-roles-permissions/). 70 | 71 | ## APIs 72 | 73 | There are two simple requests in this example worth noting. The first is in `home.component.ts` and the other in `article.component.ts`. If you'd like to see these, here are links to the [home](https://github.com/directus/examples/blob/main/angular/src/app/pages/home/home.component.ts) and [article](https://github.com/directus/examples/blob/main/angular/src/app/pages/article/article.component.ts) components on GitHub. However, please note that the Directus API is exhaustive for any database linked. 74 | 75 | Directus uses [Database Mirroring](https://docs.directus.io/getting-started/introduction/#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](https://docs.directus.io/reference/introduction/). 76 | 77 | ## More Help 78 | 79 | Looking for technical support for your non-enterprise project? Please visit the [Directus Discord Community](https://directus.chat/). 80 | 81 | Want to stay focused on your content and apps? Let Directus manage the platform with our [Directus Cloud service](https://directus.io/pricing/). -------------------------------------------------------------------------------- /get-started-building-an-angular-website-with-directus/roles-and-permissions-20220222A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-an-angular-website-with-directus/roles-and-permissions-20220222A.webp -------------------------------------------------------------------------------- /get-started-building-an-astro-website-with-directus/astro-example.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-an-astro-website-with-directus/astro-example.webp -------------------------------------------------------------------------------- /get-started-building-an-astro-website-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started Building an Astro Website with Directus 3 | summary: This example will show you how to link a simple Astro frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 4 | date: 2022-02-21 5 | author: Eron Powell & Azri Kahar 6 | image: ./astro-example.webp 7 | category: integration 8 | --- 9 | 10 | > This example will show you how to link a simple Astro frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 11 | 12 | [[toc]] 13 | 14 | ## Scope and Purpose 15 | 16 | The purpose of this article is to focus on the bare basics of linking an Astro 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. 17 | 18 | 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_. 19 | 20 | ::: warning Demonstration purposes only 21 | 22 | This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See [Contribution Guidelines](https://docs.directus.io/contributing/introduction/). 23 | 24 | ::: 25 | 26 | ## Setup 27 | 28 | 1. Clone the [examples repo](https://github.com/directus/examples). 29 | 30 | ::: warning Don't move the directories 31 | 32 | Every frontend template in the `examples` repo references the `shared` folder. So moving these directories around from one location to another could break the relative file path. 33 | 34 | ::: 35 | 36 | 2. From that repo, setup the [provided Directus instance](https://github.com/directus/examples/tree/main/directus) and get it running. Instructions are on the `README.md` page. 37 | 38 | 3. Install dependencies for this example. 39 | 40 | ``` 41 | cd astro 42 | npm install 43 | ``` 44 | 45 | 4. Create a `.env` file for this Astro template by copying and pasting the provided `.env.example` file. Nothing will need to be changed in the copied `.env` file since the URL, username, and password are all set. 46 | 47 | 5. Start the development server. 48 | 49 | ``` 50 | npm run dev 51 | ``` 52 | 53 | 6. Your Directus Astro example is now running at . 54 | 55 | 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. 56 | 57 | ## Astro 58 | 59 | Astro is a modern [Static-site generator](https://docs.astro.build/en/getting-started/) (SSG), with a [syntax](https://docs.astro.build/en/core-concepts/astro-components/) that should seem familiar to anyone with HTML and JSX experience. 60 | 61 | ## Authentication 62 | 63 | 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](https://docs.directus.io/self-hosted/config-options/#authentication) or follow our guide on [how to setup SSO](https://docs.directus.io/self-hosted/sso/). 64 | 65 | ## Users, Roles and Permissions 66 | 67 | ![Directus Permissions](roles-and-permissions-20220222A.webp) 68 | 69 | For simplicity's sake, this Directus instance provided has [Public read permissions](https://docs.directus.io/getting-started/quickstart/#_6-set-role-public-permissions) activated for `articles` and `directus_users`. Find Permissions in your [local Directus Instance](http://localhost:8055/admin/settings/roles/public) under `Settings > Roles and Permissions`. 70 | 71 | 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](https://docs.directus.io/configuration/users-roles-permissions/). 72 | 73 | ## APIs 74 | 75 | There are two simple requests in this example worth noting. The first is in `index.astro` and the other in `[id].astro`. If you'd like to see these, here are links to the [index](https://github.com/directus/examples/blob/main/astro/src/pages/index.astro) and [[id]](https://github.com/directus/examples/blob/main/astro/src/pages/articles/%5Bid%5D.astro) components on GitHub. However, please note that the Directus API is exhaustive for any database linked. 76 | 77 | Directus uses [Database Mirroring](https://docs.directus.io/getting-started/introduction/#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](https://docs.directus.io/reference/introduction/). 78 | 79 | ## More Help 80 | 81 | Looking for technical support for your non-enterprise project? Please visit the [Directus Discord Community](https://directus.chat/). 82 | 83 | Want to stay focused on your content and apps? Let Directus manage the platform with our [Directus Cloud service](https://directus.io/pricing/). -------------------------------------------------------------------------------- /get-started-building-an-astro-website-with-directus/roles-and-permissions-20220222A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-an-astro-website-with-directus/roles-and-permissions-20220222A.webp -------------------------------------------------------------------------------- /get-started-building-an-eleventy-website-with-directus/11ty-example.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-an-eleventy-website-with-directus/11ty-example.webp -------------------------------------------------------------------------------- /get-started-building-an-eleventy-website-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started Building an Eleventy Website with Directus 3 | summary: This example will show you how to link a simple Eleventy frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 4 | date: 2022-02-21 5 | author: Eron Powell & Azri Kahar 6 | image: ./11ty-example.webp 7 | category: integration 8 | --- 9 | 10 | > This example will show you how to link a simple Eleventy frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 11 | 12 | [[toc]] 13 | 14 | ## Scope and Purpose 15 | 16 | The purpose of this article is to focus on the bare basics of linking an Eleventy 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. 17 | 18 | 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_. 19 | 20 | ::: warning Demonstration purposes only 21 | 22 | This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See [Contribution Guidelines](https://docs.directus.io/contributing/introduction/). 23 | 24 | ::: 25 | 26 | ## Setup 27 | 28 | 1. Clone the [examples repo](https://github.com/directus/examples). 29 | 30 | ::: warning Don't move the directories 31 | 32 | Every frontend template in the `examples` repo references the `shared` folder. So moving these directories around from one location to another could break the relative file path. 33 | 34 | ::: 35 | 36 | 2. From that repo, setup the [provided Directus instance](https://github.com/directus/examples/tree/main/directus) and get it running. Instructions are on the `README.md` page. 37 | 38 | 3. Install dependencies for this example. 39 | 40 | ``` 41 | cd eleventy 42 | npm install 43 | ``` 44 | 45 | 4. Create a `.env` file for this Eleventy template by copying and pasting the provided `.env.example` file. Nothing will need to be changed in the copied `.env` file. 46 | 47 | 5. Start the development server. 48 | 49 | ``` 50 | npm run dev 51 | ``` 52 | 53 | 6. Your Directus Eleventy example is now running at . 54 | 55 | 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. 56 | 57 | ## Eleventy 58 | 59 | Eleventy is a simple Static-site Generator (SSG) that offers several [dynamic rendering options](https://www.11ty.dev/docs/plugins/serverless/) with the help of a plugin. 60 | 61 | Also, please note the Directus JavaScript SDK is pulled in under `examples > eleventy > .eleventy.js` _(find it [here](https://github.com/directus/examples/blob/main/eleventy/.eleventy.js))_. If you'd like to learn more, checkout the [SDK documentation](https://docs.directus.io/reference/sdk/). 62 | 63 | ## Authentication 64 | 65 | 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](https://docs.directus.io/self-hosted/config-options/#authentication) or follow our guide on [how to setup SSO](https://docs.directus.io/self-hosted/sso/). 66 | 67 | ## Users, Roles and Permissions 68 | 69 | ![Directus Permissions](roles-and-permissions-20220222A.webp) 70 | 71 | For simplicity's sake, this Directus instance provided has [Public read permissions](https://docs.directus.io/getting-started/quickstart/#_6-set-role-public-permissions) activated for `articles` and `directus_users`. Find Permissions in your [local Directus Instance](http://localhost:8055/admin/settings/roles/public) under `Settings > Roles and Permissions`. 72 | 73 | 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](https://docs.directus.io/configuration/users-roles-permissions/). 74 | 75 | ## APIs 76 | 77 | There are two simple requests in this example worth noting. The first is in `index.js` and the other in `articles.js`. If you'd like to see these, here are links to [index.js](https://github.com/directus/examples/blob/main/eleventy/src/_data/index.js) and [articles.js](https://github.com/directus/examples/blob/main/eleventy/src/_data/articles.js) on GitHub. However, please note that the Directus API is exhaustive for any database linked. 78 | 79 | Directus uses [Database Mirroring](https://docs.directus.io/getting-started/introduction/#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](https://docs.directus.io/reference/introduction/). 80 | 81 | ## More Help 82 | 83 | Looking for technical support for your non-enterprise project? Please visit the [Directus Discord Community](https://directus.chat/). 84 | 85 | Want to stay focused on your content and apps? Let Directus manage the platform with our [Directus Cloud service](https://directus.io/pricing/). 86 | -------------------------------------------------------------------------------- /get-started-building-an-eleventy-website-with-directus/roles-and-permissions-20220222A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-an-eleventy-website-with-directus/roles-and-permissions-20220222A.webp -------------------------------------------------------------------------------- /get-started-building-an-iles-website-with-directus/iles-example.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-an-iles-website-with-directus/iles-example.webp -------------------------------------------------------------------------------- /get-started-building-an-iles-website-with-directus/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Get Started Building an Îles Website with Directus 3 | summary: This example will show you how to link a simple Îles frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 4 | date: 2022-04-19 5 | author: Eron Powell & Máximo Mussini 6 | image: ./iles-example.webp 7 | category: integration 8 | --- 9 | 10 | > This example will show you how to link a simple Îles frontend blog template to a Directus Project with a simple SQLite database containing a few blog posts. 11 | 12 | [[toc]] 13 | 14 | ## Scope and Purpose 15 | 16 | The purpose of this article is to focus on the bare basics of linking an Îles 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. 17 | 18 | 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_. 19 | 20 | ::: warning Demonstration purposes only 21 | 22 | This example was created for demonstration purposes and is not intended to be production ready, but PRs that address this and any other issues are always welcome! See [Contribution Guidelines](https://docs.directus.io/contributing/introduction/). 23 | 24 | ::: 25 | 26 | ## Setup 27 | 28 | 1. Clone the [examples repo](https://github.com/directus/examples). 29 | 30 | ::: warning Don't move the directories 31 | 32 | Every frontend template in the `examples` repo references the `shared` folder. So moving these directories around from one location to another could break the relative file path. 33 | 34 | ::: 35 | 36 | 2. From that repo, setup the [provided Directus instance](https://github.com/directus/examples/tree/main/directus) and get it running. Instructions are on the `README.md` page. 37 | 38 | 3. Install dependencies for this example. 39 | 40 | ``` 41 | cd iles 42 | pnpm install 43 | ``` 44 | 45 | 4. Create a `.env` file for this Îles template by copying and pasting the provided `.env.example` file. Nothing will need to be changed in the copied `.env` file. 46 | 47 | 5. Start the development server. 48 | 49 | ``` 50 | npm run dev 51 | ``` 52 | 53 | 6. Your Directus Îles example is now running at . 54 | 55 | 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. 56 | 57 | ## Iles 58 | 59 | [Îles](https://iles.pages.dev/guide/introduction) is a static-site generator (SSG) that provides great support for partial hydration. Use Vue and MDX to build your website, while enjoying the smooth development experience provided by Vite.js. 60 | 61 | Also, please note the Directus JavaScript SDK is pulled in under `examples > iles > src > logic > directus.ts` _(find it [here](https://github.com/directus/examples/blob/main/iles/src/logic/directus.ts))_. If you'd like to learn more, checkout the [SDK documentation](https://docs.directus.io/reference/sdk/). 62 | 63 | ## Authentication 64 | 65 | 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](https://docs.directus.io/self-hosted/config-options/#authentication) or follow our guide on [how to setup SSO](https://docs.directus.io/self-hosted/sso/). 66 | 67 | ## Users, Roles and Permissions 68 | 69 | ![Directus Permissions](roles-and-permissions-20220222A.webp) 70 | 71 | For simplicity's sake, this Directus instance provided has [Public read permissions](https://docs.directus.io/getting-started/quickstart/#_6-set-role-public-permissions) activated for `articles` and `directus_users`. Find Permissions in your [local Directus Instance](http://localhost:8055/admin/settings/roles/public) under `Settings > Roles and Permissions`. 72 | 73 | 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](https://docs.directus.io/configuration/users-roles-permissions/). 74 | 75 | ## APIs 76 | 77 | There is one simple request in this example worth noting, in `article.ts`. If you'd like to see, here is a link to [article.ts](https://github.com/directus/examples/blob/main/iles/src/logic/article.ts) on GitHub. However, please note that the Directus API is exhaustive for any database linked. 78 | 79 | Directus uses [Database Mirroring](https://docs.directus.io/getting-started/introduction/#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](https://docs.directus.io/reference/introduction/). 80 | 81 | ## More Help 82 | 83 | Looking for technical support for your non-enterprise project? Please visit the [Directus Discord Community](https://directus.chat/). 84 | 85 | Want to stay focused on your content and apps? Let Directus manage the platform with our [Directus Cloud service](https://directus.io/pricing/). -------------------------------------------------------------------------------- /get-started-building-an-iles-website-with-directus/roles-and-permissions-20220222A.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/directus/guides/fe14e5348edf5435f19f9c812024d055d99a8103/get-started-building-an-iles-website-with-directus/roles-and-permissions-20220222A.webp -------------------------------------------------------------------------------- /guides.json: -------------------------------------------------------------------------------- 1 | { 2 | "layout": "layouts/guide.liquid", 3 | "tags": "guides" 4 | } 5 | --------------------------------------------------------------------------------