directus-labs / examples Goto Github PK
View Code? Open in Web Editor NEWIntegration Examples with Directus
Home Page: https://directus.io/guides
License: MIT License
Integration Examples with Directus
Home Page: https://directus.io/guides
License: MIT License
On Ubuntu at least, it appears pull request #190 does not, in fact, fix CORS issues, but rather breaks the docker-compose file.
apt-get
, build unknown)Clone the repo
git clone https://github.com/directus/examples
In a terminal, cd
into directus
within the repo, and docker-compose up
The containers specified in the docker-compose.yml file should be started.
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
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.
The NextJS example can be improved to show how to use it with the app directory
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";
^
@azrikahar @rijkvanzanten — Just curious, do we want to add Hugo and JavaScript (vanilla) into this list?
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.
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?
Directus server is integrated with Github OAuth2. Would love to look at example, how to integrated JS(Svelte) Client login?
Please add iles example. https://iles.pages.dev/
iles is different enough from the Vue and Nuxt setups that it deserves its own 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).
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)
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
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
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.
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
Possibly related to the issue with the Nuxt example, #187.
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.
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.
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:
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 …
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?
Need to verify this for all existing examples except SvelteKit (which was implemented in #70).
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.
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>
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.
Successfully executed the NextJS example with Directus. However, when I run the react example, does not appear to be reading the .env file.
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
It will be really helpful for Quasar + directus users.
it would be great to update the sveltekit example to work with the latest breaking changes.
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,
}
},
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.
Even though Tailwind is wildly popular right now, I feel like regular CSS is easier to scale out across all different integrations.
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
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
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
^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.
I followed the instructions using this article, ensuring that:
npm install
had successfully run in both the directus
directory and sveltekit
directory.env.example
was copied and the copy renamed to .env
, ensuring that no changes were made.npm run dev
for the sveltekit and npx directus start
in the appropriate directoriesI 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
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:
It is recommended to explicitly type your GraphQL schema if you want to use optional fields.
File: src\pages\index.jsx:41:5
I don't fully understand the details tbh.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.