directus-labs / examples

Integration Examples with Directus

Warning

This repository is unmaintained and without support. Please take a look at the framework guides in our documentation for step-by-step tutorials on combining Directus and your favorite frameworks.

Directus Examples

These frontend examples showcase how to integrate Directus JavaScript SDK, GraphQL, or official Directus plugins/modules with other frameworks in order to use Directus as the data source.

ℹ These examples were created for demonstration purposes. They are not intended to be production ready, but PRs that address this and any other issues are always welcome!

📌 Prerequisites

These examples are frontend only, you will still need a Directus instance running to use them, this can be a Cloud instance, self hosted, or locally by first running the provided Directus project running first before proceeding with examples.

🔌 Integrations

Logo	Framework	Blog Example
	Angular v13	source [1]
	Astro v1.0	source
	Blitz v0.45.4	source
	Eleventy v1	source
	Gatsby v5	source
	îles v0.7	source
	Next.js v13	source
	Nuxt.js v2	source
	Nuxt.js v3	source
	React v17	source [1]
	Remix v1	source
	Svelte v3	source [1]
	SvelteKit beta	source
	Vue v3	source [1]

[1]: These additionally uses full read permissions on articles & directus_users in Public role for simplicity sake.

🔗 Links

• ✨ Official Website — https://directus.io
• 📘 Documentation — https://docs.directus.io
• 👥 Community — GitHub discussions
• 🎬 Youtube — Video tutorials
• 🐦 Twitter — @directus
• 💬 Chat — Discord server

examples's Issues

Directus Examples: Integrations

Hello, just noticed that Blitz on Directus' examples, under the integrations section has been discontinued.

Cors Error

Hello i'm receiving a cors error when attempting to connect using the Nuxt-Directus module yet in the examples there is no cors option, what am I missing?

This is my nuxt.config section with directus:

directus: {
    url: process.env.DIRECTUS_URL,
    auth: {
      email: process.env.DIRECTUS_EMAIL,
      password: process.env.DIRECTUS_PASSWORD,
      token: process.env.DIRECTUS_TOKEN,
    }
  },

Use CSS instead of Tailwind

Even though Tailwind is wildly popular right now, I feel like regular CSS is easier to scale out across all different integrations.

website-next13 - can't be build -

I just wanted to build website-next13 example.
But I got multiple errors.
first, in the 2 page.tsx files:

./app/[slug]/page.tsx:1:22
Type error: Cannot find module 'lib/directus' or its corresponding type declarations.

> 1 | import directus from 'lib/directus';

I fixed it.

second, also in page.tsx:

./app/[slug]/page.tsx:3:26
Type error: Cannot find module '@directus/sdk/rest' or its corresponding type declarations.

  1 | import directus from '../../lib/directus';
  2 | import { notFound } from 'next/navigation';
> 3 | import { readItem } from '@directus/sdk/rest';
    |                          ^

then I got this error:

./app/[slug]/page.tsx:7:33
Type error: Property 'request' does not exist on type 'DirectusClient<any> & object'.

   5 | async function getPage(slug) {
   6 |   try {
>  7 |     const page = await directus.request(readItem('pages', slug));

Does it work for anyone else?

node --version
v20.9.0

NuxtJS example is broken

Hey folks.

Screenshot of error:

I just did a fresh
git clone https://github.com/directus/examples.git
cd examples/nuxtjs
cp .example.env .env
npm install
npm run dev

Error message shown above.

Am I missing something?

Add Auth Examples

Auth examples for end-user to handle common scenarios, including logging in, signing up, magic link and forgot password forms. This will help users build auth features within their projects faster.

Would this use Directus Users, a custom Members table... or both?

Could be in dedicated repo, or all examples... up to @rijkvanzanten and @azrikahar.

Improve error handling when .env file is not present

Need to verify this for all existing examples except SvelteKit (which was implemented in #70).

useAsyncData example for static generation

How one would use directus API to generate a completely static site using Directus? Simple html/js files that do not trigger backend requests.

I'm trying to implement the following:

export const asyncDirectusItems = async (key, config, transform) => {
  const { getItems } = useDirectusItems();
  const { data } = await useAsyncData(key, async () => await getItems(config), {transform});
  return data;
};

export const asyncDirectusItemById = async (collection, id, transform) => {
  const { getItemById } = useDirectusItems();
  const key = `${collection}#${id}`;
  const { data } = await useAsyncData(key, async () => await getItemById({ collection, id }), {transform});
  return data;
};

But recent Nuxt 3 RC's (9 and 12) either fail to generate directly accessible SSR pages or mix their markup with the front page. Also I'm having trouble to prevent Directus API calls (which are unnecessary for a completely static website).

<script setup>
const categories = await asyncDirectusItems('blog_categories', {
  collection: "Blog",
  params: {
    fields: "category",
    groupBy: "category"
  }
});

const posts = await asyncDirectusItems('published_blogs', {
  collection: "Blog",
  params: {
    filter: {
      status: "published"
    }
  }
});
</script>

Add Iles example

Please add iles example. https://iles.pages.dev/

iles is different enough from the Vue and Nuxt setups that it deserves its own example.

Add an example with Quasar Framework

It will be really helpful for Quasar + directus users.

• Setup Directus SDK
• Add basic authentication with Directus SDK
• CRUD with Directus SDK.

Vue example doesn't work - docker-compose file is invalid

On Ubuntu at least, it appears pull request #190 does not, in fact, fix CORS issues, but rather breaks the docker-compose file.

Version used

• this repository: commit afd391c
• directus: 9.22.1
• docker-compose: version 1.24.0 (build 0aa59064), also tested with version 1.25.0 (installed using apt-get, build unknown)

Steps to reproduce (on Ubuntu 22.04)

• Clone the repo

  git clone https://github.com/directus/examples

• In a terminal, cd into directus within the repo, and docker-compose up

Expected behaviour

The containers specified in the docker-compose.yml file should be started.

Actual behaviour

Docker-compose fails with an error:

ERROR: The Compose file './docker-compose.yml' is invalid because:
services.directus.environment.CORS_ENABLED contains true, which is an invalid type, it should be a string, number, or a null

Comments

The same error also occurs on Fedora 38, running docker-compose version 1.29.2. I'm curious as to how pull requests to this repository are being tested before they're merged. If no testing of pull requests is being done, perhaps that's something you could incorporate into your processes.

It might also be a good idea to test that bugs are fixed before they are closed, since even a very cursory attempt to reproduce bug #189 would likely have revealed the bug being reported in this issue.

I realise the examples in this repo aren't intended to be "production ready", but still, closing bugs as fixed when they are not doesn't seem like best practice.

Add Next.js example

Add Eleventy example

Add Nuxt example

Add SvelteKit example

404 Page

Not sure if this will be "out of scope" in terms of simplicity for the examples, but my current experience/research leads to thinking we may need a 404 page as sort of the failsafe for try-catch when fetching posts/articles during site generation.

"Raw" frameworks

Eg the "raw" counterparts to the big frameworks:

• Vue #24
• React #29
• Angular #32
• Svelte #30
• ??

Astro example is broken

UPDATE: CLOSE ISSUE
It was a silly config problem by me the whole time. My apologies!

The following error shows:

const { location, pluginName, text } = e.errors[0];

TypeError: Cannot destructure property 'location' of 'e.errors[0]' as it is undefined.
    at collectErrorMetadata (/examples/astro/node_modules/astro/dist/core/errors.js:111:13)
    at handleRequest (/examples/astro/node_modules/astro/dist/vite-plugin-astro-server/index.js:229:31)

I have played around but anytime I try to bring in directus and call the API using the SDK the app explodes.

Sveltekit example out of date.

it would be great to update the sveltekit example to work with the latest breaking changes.

Vue example not displaying content

Fresh installation based on the Examples directions.

I tested the Astro example, works fine.
However, the Vue example, does not. The .env.example copied as .env.

I closed the Directus server and the Vue/Vite server - and relaunched.

http://localhost:8055/ comes up fine.

http://localhost:3000/ just does not display any articles.

Astro example isn't working

Followed the guide.
npm run dev starts, but when I open the app in browser, it immediately errors out.

directus-examples/astro/node_modules/astro/dist/core/errors/errors.js:42
return err.type === "AstroError";
^

Add note on Gatsby's `gatsby-plugin-sharp` limit known-issue

I don't fully understand the details tbh.

Sveltekit example doesn't work

I tried to fix it during two hours but without success... I also tried the next.js example to compare and everything's fine.

I have this error:
Unexpected token < in JSON at position 0 SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at Proxy.<anonymous> (file:///F:/Git/svelteDirectus/sveltekit/.svelte-kit/runtime/server/index.js:1824:21) at processTicksAndRejections (internal/process/task_queues.js:95:5) at async load (index.svelte:6:21) at async load_node (file:///F:/Git/svelteDirectus/sveltekit/.svelte-kit/runtime/server/index.js:1853:12) at async respond$1 (file:///F:/Git/svelteDirectus/sveltekit/.svelte-kit/runtime/server/index.js:2222:15) at async render_page (file:///F:/Git/svelteDirectus/sveltekit/.svelte-kit/runtime/server/index.js:2423:19) at async resolve (file:///F:/Git/svelteDirectus/sveltekit/.svelte-kit/runtime/server/index.js:2697:11) at async respond (file:///F:/Git/svelteDirectus/sveltekit/.svelte-kit/runtime/server/index.js:2594:20) at async file:///F:/Git/svelteDirectus/sveltekit/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/chunks/index

The response.status on index.svelte (line 5) is 404, so I think there is an issue to access the endpoint.

More than one instance …

We have 2 different servers, each with a Directus account. Example news and events. On one website we want to make 2 queries, on both servers. We use nuxt 3 to build up the frontpage. We want to use the nuxt-directus plugin, to get the data from the 2 instances …

The website needs two querys:

1. The news
2. The events

Is it possible to do this with the nuxt-directus module???
If yes, how? (Where is the documentation?)

Of course there can be 2 different authorizations and so on …

Posts/Articles

Might be pedantic here... but should we name them as Posts (as in blog posts) or Articles in the examples?

Or perhaps is there an actual categorization/naming of the current example as a whole?

Articles timestamp

For these timestamps, do we want it to be 3 hours ago relative format, or just something like a date?

The former will likely need custom code/library to achieve it, whereas the latter might be achievable with vanilla JS toLocaleString() 🤔

EDIT: or is there a way to format it the date in the API result out-of-the-box? (seems like an interesting separate how-to tutorial/guide for custom endpoint in general, not specific to this example)

NextJS example needs updates

The NextJS example can be improved to show how to use it with the app directory

Responsive font size

Currently the font size "jumps" between breakpoints significantly.

Options:

• Add several breakpoints (likely the general approach now)

• Use clamp(), but depends on whether the current percentage of support is acceptable or not: https://caniuse.com/?search=clamp

Auth example for OAuth2.0 integration

Directus server is integrated with Github OAuth2. Would love to look at example, how to integrated JS(Svelte) Client login?

Other frameworks/languages

@azrikahar @rijkvanzanten — Just curious, do we want to add Hugo and JavaScript (vanilla) into this list?

SQLITE_ERROR: table directus_sessions has no column named origin

I'm getting the following error when running the example directus database, and then trying to login with admin credentials. Perhaps the schema is out of date?

insert into `directus_sessions` (`expires`, `ip`, `origin`, `token`, `user`, `user_agent`) values ('2022-11-23 18:35:00.275', '127.0.0.1', 'http://0.0.0.0:8055', 'f0GyAAjmTWTIZk-u8hvieDZFN5b5b0mQjCs6XFGoMQhr0CO0YSbHLqriMqe3H8WW', '2ba135e9-c12a-41ce-aef6-2867077e8836', 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36') - SQLITE_ERROR: table directus_sessions has no column named origin 

Fails to install dependencies

On an ARM Mac I tried to install dependencies with Node 16.14 and v14.

I followed the instructions here: https://github.com/directus/examples/blob/main/directus/README.md

❯ node -v
v16.14.2

/Volumes/Evo/Sites/astro-directus/directus                                                                               12:50:50 PM
❯ npm i
npm WARN deprecated @types/[email protected]: This is a stub types definition. pino provides its own type definitions, so you do not need this installed.
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: This module renamed to process-warning
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm ERR! code 1
npm ERR! path /Volumes/Evo/Sites/astro-directus/directus/node_modules/sqlite3
npm ERR! command failed
npm ERR! command sh -c node-pre-gyp install --fallback-to-build
npm ERR! CC(target) Release/obj.target/nothing/node_modules/node-addon-api/nothing.o
npm ERR!   LIBTOOL-STATIC Release/nothing.a
npm ERR!   ACTION deps_sqlite3_gyp_action_before_build_target_unpack_sqlite_dep Release/obj/gen/sqlite-autoconf-3340000/sqlite3.c
npm ERR! Failed to execute '/Users/scottrod/.nvm/versions/node/v16.14.2/bin/node /Users/scottrod/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Volumes/Evo/Sites/astro-directus/directus/node_modules/sqlite3/lib/binding/napi-v3-darwin-arm64/node_sqlite3.node --module_name=node_sqlite3 --module_path=/Volumes/Evo/Sites/astro-directus/directus/node_modules/sqlite3/lib/binding/napi-v3-darwin-arm64 --napi_version=8 --node_abi_napi=napi --napi_build_version=3 --node_napi_label=napi-v3' (1)
npm ERR! node-pre-gyp info it worked if it ends with ok
npm ERR! node-pre-gyp info using [email protected]
npm ERR! node-pre-gyp info using [email protected] | darwin | arm64
npm ERR! node-pre-gyp info check checked for "/Volumes/Evo/Sites/astro-directus/directus/node_modules/sqlite3/lib/binding/napi-v3-darwin-arm64/node_sqlite3.node" (not found)
npm ERR! node-pre-gyp http GET https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v5.0.2/napi-v3-darwin-arm64.tar.gz
npm ERR! node-pre-gyp ERR! install response status 403 Forbidden on https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v5.0.2/napi-v3-darwin-arm64.tar.gz 
npm ERR! node-pre-gyp WARN Pre-built binaries not installable for [email protected] and [email protected] (node-v93 ABI, unknown) (falling back to source compile with node-gyp) 
npm ERR! node-pre-gyp WARN Hit error response status 403 Forbidden on https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v5.0.2/napi-v3-darwin-arm64.tar.gz 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info find Python using Python version 3.9.9 found at "/opt/homebrew/opt/[email protected]/bin/python3.9"
npm ERR! gyp info spawn /opt/homebrew/opt/[email protected]/bin/python3.9
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/Users/scottrod/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Volumes/Evo/Sites/astro-directus/directus/node_modules/sqlite3/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/scottrod/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/scottrod/Library/Caches/node-gyp/16.14.2/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/Users/scottrod/Library/Caches/node-gyp/16.14.2',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/Users/scottrod/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/scottrod/Library/Caches/node-gyp/16.14.2/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Volumes/Evo/Sites/astro-directus/directus/node_modules/sqlite3',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp info ok 
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! warning: /Library/Developer/CommandLineTools/usr/bin/libtool: archive library: Release/nothing.a the table of contents is empty (no object file members in the library define global symbols)
npm ERR! /bin/sh: python: command not found
npm ERR! make: *** [Release/obj/gen/sqlite-autoconf-3340000/sqlite3.c] Error 127
npm ERR! gyp ERR! build error 
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/Users/scottrod/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:526:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Darwin 21.4.0
npm ERR! gyp ERR! command "/Users/scottrod/.nvm/versions/node/v16.14.2/bin/node" "/Users/scottrod/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--module=/Volumes/Evo/Sites/astro-directus/directus/node_modules/sqlite3/lib/binding/napi-v3-darwin-arm64/node_sqlite3.node" "--module_name=node_sqlite3" "--module_path=/Volumes/Evo/Sites/astro-directus/directus/node_modules/sqlite3/lib/binding/napi-v3-darwin-arm64" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=3" "--node_napi_label=napi-v3"
npm ERR! gyp ERR! cwd /Volumes/Evo/Sites/astro-directus/directus/node_modules/sqlite3
npm ERR! gyp ERR! node -v v16.14.2
npm ERR! gyp ERR! node-gyp -v v8.4.1
npm ERR! gyp ERR! not ok 
npm ERR! node-pre-gyp ERR! build error 
npm ERR! node-pre-gyp ERR! stack Error: Failed to execute '/Users/scottrod/.nvm/versions/node/v16.14.2/bin/node /Users/scottrod/.nvm/versions/node/v16.14.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Volumes/Evo/Sites/astro-directus/directus/node_modules/sqlite3/lib/binding/napi-v3-darwin-arm64/node_sqlite3.node --module_name=node_sqlite3 --module_path=/Volumes/Evo/Sites/astro-directus/directus/node_modules/sqlite3/lib/binding/napi-v3-darwin-arm64 --napi_version=8 --node_abi_napi=napi --napi_build_version=3 --node_napi_label=napi-v3' (1)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/Volumes/Evo/Sites/astro-directus/directus/node_modules/@mapbox/node-pre-gyp/lib/util/compile.js:89:23)
npm ERR! node-pre-gyp ERR! stack     at ChildProcess.emit (node:events:526:28)
npm ERR! node-pre-gyp ERR! stack     at maybeClose (node:internal/child_process:1092:16)
npm ERR! node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! node-pre-gyp ERR! System Darwin 21.4.0
npm ERR! node-pre-gyp ERR! command "/Users/scottrod/.nvm/versions/node/v16.14.2/bin/node" "/Volumes/Evo/Sites/astro-directus/directus/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
npm ERR! node-pre-gyp ERR! cwd /Volumes/Evo/Sites/astro-directus/directus/node_modules/sqlite3
npm ERR! node-pre-gyp ERR! node -v v16.14.2
npm ERR! node-pre-gyp ERR! node-pre-gyp -v v1.0.8
npm ERR! node-pre-gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/scottrod/.npm/_logs/2022-03-28T16_50_59_788Z-debug-0.log

Add Gatsby example

CORS Issue with React Example and Directus Cloud

I tried to migrate the React Directus example instance from a local port 8055 instance to the Directus Cloud. The react client code example remains on my local machine. (Note: it would be nice if I could have exported the articles data model from the local instance and into the Directus cloud, but that did not appear possible, so I retyped the "articles" data model into the Directus cloud from scratch).

Anyway, because the frontend and backend of the example program are now on two different domains, there is a CORS issue. Specifically, the error in the browser developer console is that "... from origin http://localhost:3000 has been blocked by CORS policy: Response to preflight request doesn't pass access control check. Redirect is not allow for a preflight request."

Note that the cloud API works fine when the URL is entered directly into the browser; the CORS issue arises with the REACT example program running locally on port 3000 connecting to the Directus cloud..

I changed the .env file to the following but that did not help:
REACT_APP_DIRECTUS_URL="http://wfqfwpau.directus.app"
CORS_ENABLED"='true'
CORS_ORIGIN='*'

Any hints on how to get the REACT example to work with the Directus Cloud?

Thanks

Cannot query field "directus" on type "Query".

I followed this tutorial:
After starting directus, I tried to run gatsby and then it throws this GraphQL error:

There was an error in your GraphQL query:

Cannot query field "directus" on type "Query".

If you don't expect "directus" to exist on the type "Query" it is most likely a typo. However, if you expect
"directus" to exist there are a couple of solutions to common problems:

• If you added a new data source and/or changed something inside gatsby-node/gatsby-config, please try a restart of
  your development server.
• You want to optionally use your field "directus" and right now it is not used anywhere.

It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

File: src\pages\index.jsx:41:5

Add Gridsome example

New Sveltekit example

I found out, that Sveltekit example is still using old Sveltekit version structure (index.svelte instead of +page.svelte
__layout.svelte instead of +layout.svelte). It would be nice to recreate the example in latest version od Sveltekit (after major changes).

Docker directus example and git workflow database

Hello,

I am looking for a way to make my directus available on github as a public repos. Just like in your directus folder, the directus database is in raw binary. I find it difficult to do a versioning on a binary file. I found in your documentation about how to dockerise your app, but about dumping the database, I am not sure what to do.

Is it possible to make a PR named directus-docker for example and give an example of a workflow with exporting/importing the dump database so that it is easier to keep track of the versioning of my dataset with git? Would it be usefull for someone?

React Example .env file

Successfully executed the NextJS example with Directus. However, when I run the react example, does not appear to be reading the .env file.

Astro Example: You don't have permission to access this.

docker image is running,
static token is provided (same error even without)
login data is correct

SvelteKit: .env not being detected

I followed the instructions using this article, ensuring that:

1. npm install had successfully run in both the directus directory and sveltekit directory
2. .env.example was copied and the copy renamed to .env, ensuring that no changes were made.
3. Running both projects using npm run dev for the sveltekit and npx directus start in the appropriate directories

I can login succesfully into the Directus admin panel. The directus-sveltekit's 404 appears on the homepage of the frontend, and the following message appears in the terminal for the sveltekit directory:

Unable to connect to the Directus instance. Make sure the .env file is present and the VITE_DIRECTUS_URL variable is pointing the correct URL.

Restarting both projects has failed to yield different results*, no matter which one I start first.
I have double checked that I have not changed the .env is indeed saved as .env, that it is in the root of the sveltekit directory, and that the URL set is 'http://localhost:8055'.

No other errors that I can find.

*edit: for clarity

Install error on examples/nuxt3/nuxt3-directus-blog/

Hello,

I copy this directory, run npm install and then when I run npm run dev I get:

` WARN Module nuxt-directus is disabled due to incompatibility issues: 12:49:48

• [nuxt] Nuxt version ^3.0.0 || ^2.16.0 is required but currently using 3.0.0-rc.3
  `

Can this please be looked at?

I found this repo following along from this guide https://directus.io/guides/get-started-building-a-nuxt-3-blog-with-directus/ at the bottom there is a link to the example.

Add example for Nuxt 3

NextJS Example doesn't work

Codesandbox, Stackblitz or even locally on my machine. None works.
On my machine it's having some issue with the await function of the auth/login.jsx
And on the other two it's a dependency issue with next/babel and config respectively.
This is why I keep jumping off of directus for production. It's so unreliable with modern tools.
Sorry vue.js ain't cutting it… ugly html syntax that mix and mashes JS with HTML is not desirable

• we have gotten rid of those messy times a long time ago, thank god.
  Even back when it was running on PHP (simple reliable setup at least), it would self-destruct after a while.
  Will this CMS ever focus on one technology and get it right?! Code maintenance seems to be very short lived here (days, if weeks)

Add example for Hugo

Vue example doesn't work - fails with CORS error

Possibly related to the issue with the Nuxt example, #187.

Version used

• this repository: commit 8790e61
• directus: 9.22.1
• docker-compose: version 1.24.0, build 0aa59064

Steps to reproduce (on Ubuntu 22.04)

• Clone the repo

  git clone https://github.com/directus/examples

• In a terminal, cd into directus within the repo, and docker-compose up

• In another terminal,cd into vue within the repo, then

  $ docker run --rm -it -v $PWD:/work --network=host --workdir /work --entrypoint bash node:20.0.0-bullseye

  and within the Docker container:

  $ cp .env.example .env
  # test that we can reach Directus
  $ curl http://127.0.0.1:8055/admin
  $ npm run dev

• Visit http://localhost:3000/ (or http://127.0.0.1:3000)

  Open up the Javascript console/developer tools in a browser, and observe error messages like:

  Access to XMLHttpRequest at 'http://127.0.0.1:8055/items/articles?fields[]=*&fields[]=author.avatar&fields[]=author.first_name&fields[]=author.last_name&sort=-publish_date' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  

Comments

The docker-compose.yml file (added in commit 196c3fe) does not appear to be correct. In my version of docker-compose, the .env file isn't picked up at all, so the CORS variables (CORS_ENABLED and CORS_ORIGIN) in it are never set.

(You can observe this by, for example, changing the PORT in the .env file to, say, 8056; it doesn't get processed by Directus at all.)

The docker documentation on environment variable precedence (https://docs.docker.com/compose/environment-variables/envvars-precedence/) says an environment key in the .yml file takes precedence over an .env file, so I am guessing this is the intended behaviour for Docker. The docker-compose.yml presumably needs to be fixed somehow.

If the .env file is manually processed (e.g. by adding to the .yml file entrypoint: ["sh", "-c", "tail -f /dev/null"] to get a running container, docker exec-ing in, and manually source-ing the .env file and running docker-entrypoint.sh), then Directus does indeed work without CORS issues.

Presumably this has been a problem the entire time the docker-compose.yml file has existed in this repository; testing the examples to make sure they work might be a good idea in future.