You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Login to [Supabase](https://supabase.com) and create a database. Once done, you should be on your database's dashboard. Duplicate the `.env.example` file and rename it to `.env.local`, and set these environment variables:
15
+
16
+
-`SUPABASE_URL`: The config URL
17
+
-`SUPABASE_KEY`: The public API key
18
+
19
+
Then, navigate to your database's "SQL Editor", click on "New query", and paste in [setup.sql](./setup.sql). Run this SQL to seed the database and you're good to go.
20
+
21
+
## Tutorial
22
+
23
+
The tutorial consists of two technically different parts: The Svelte tutorial and the SvelteKit tutorial. The SvelteKit tutorial uses [WebContainers](https://webcontainers.io/) under the hood in order to boot up a Node runtime in the browser. The Svelte tutorial uses Rollup in a web worker - it does not use WebContainers because a simple web worker is both faster and more reliable (there are known issues with iOS mobile).
24
+
25
+
WebContainers require [cross-origin isolation](https://webcontainers.io/guides/quickstart#cross-origin-isolation), which means the document needs to have these headers:
26
+
27
+
```
28
+
Cross-Origin-Embedder-Policy: require-corp
29
+
Cross-Origin-Opener-Policy: same-origin
30
+
```
31
+
32
+
The result of setting these headers is that the site can no longer embed URLs from other sites (like images from another domain) without those domains either having a `cross-origin-resource-policy: cross-origin` header (which most don't) or us adding the `crossorigin="anonymous"` attribute (or the experimental-only-working-in-chrome `credentialless` for iframes) to the elements that load those URLs. For this reason, navigations between the SvelteKit tutorial and other pages (and vice versa) are full page navigations so the headers don't interfere with the rest of the page.
33
+
34
+
When writing content for the tutorial, you need to be aware of the differences of loading content:
35
+
36
+
- When using root-relative paths, for a SvelteKit exercise the 'root' is the `static` directory inside the exercise itself, but for a Svelte exercise it is the root of the app so assets should do inside `apps/svelte.dev/static/tutorial`.
37
+
- When importing relative assets in a Svelte exercise, Rollup inlines them into the bundle as base64
38
+
39
+
## Dependencies
40
+
41
+
If you look in the site's package.json you'll notice several dependencies that don't appear to be used, such as `@testing-library/svelte`. These are present because they're referenced in the docs, and Twoslash needs to be able to find type definitions in order to typecheck snippets. Installing the dependencies was deemed preferable to faking it with `declare module`, since we're liable to end up with fictional types that way.
Copy file name to clipboardExpand all lines: apps/svelte.dev/README.md
+1-30
Original file line number
Diff line number
Diff line change
@@ -14,33 +14,4 @@ The tutorial, blog and examples are maintained within this repository.
14
14
15
15
## Development
16
16
17
-
### Database setup
18
-
19
-
Login to [Supabase](https://supabase.com) and create a database. Once done, you should be on your database's dashboard. Duplicate the `.env.example` file and rename it to `.env.local`, and set these environment variables:
20
-
21
-
-`SUPABASE_URL`: The config URL
22
-
-`SUPABASE_KEY`: The public API key
23
-
24
-
Then, navigate to your database's "SQL Editor", click on "New query", and paste in [setup.sql](./setup.sql). Run this SQL to seed the database and you're good to go.
25
-
26
-
### Tutorial
27
-
28
-
The tutorial consists of two technically different parts: The Svelte tutorial and the SvelteKit tutorial. The SvelteKit tutorial uses [WebContainers](https://webcontainers.io/) under the hood in order to boot up a Node runtime in the browser. The Svelte tutorial uses Rollup in a web worker - it does not use WebContainers because a simple web worker is both faster and more reliable (there are known issues with iOS mobile).
29
-
30
-
WebContainers require [cross-origin isolation](https://webcontainers.io/guides/quickstart#cross-origin-isolation), which means the document needs to have these headers:
31
-
32
-
```
33
-
Cross-Origin-Embedder-Policy: require-corp
34
-
Cross-Origin-Opener-Policy: same-origin
35
-
```
36
-
37
-
The result of setting these headers is that the site can no longer embed URLs from other sites (like images from another domain) without those domains either having a `cross-origin-resource-policy: cross-origin` header (which most don't) or us adding the `crossorigin="anonymous"` attribute (or the experimental-only-working-in-chrome `credentialless` for iframes) to the elements that load those URLs. For this reason, navigations between the SvelteKit tutorial and other pages (and vice versa) are full page navigations so the headers don't interfere with the rest of the page.
38
-
39
-
When writing content for the tutorial, you need to be aware of the differences of loading content:
40
-
41
-
- When using root-relative paths, for a SvelteKit exercise the 'root' is the `static` directory inside the exercise itself, but for a Svelte exercise it is the root of the app so assets should do inside `apps/svelte.dev/static/tutorial`.
42
-
- When importing relative assets in a Svelte exercise, Rollup inlines them into the bundle as base64
43
-
44
-
### Dependencies
45
-
46
-
If you look in the site's package.json you'll notice several dependencies that don't appear to be used, such as `@testing-library/svelte`. These are present because they're referenced in the docs, and Twoslash needs to be able to find type definitions in order to typecheck snippets. Installing the dependencies was deemed preferable to faking it with `declare module`, since we're liable to end up with fictional types that way.
0 commit comments