diff --git a/examples/tutorials/sveltekit.md b/examples/tutorials/sveltekit.md index 9118955d..3cdac6e0 100644 --- a/examples/tutorials/sveltekit.md +++ b/examples/tutorials/sveltekit.md @@ -1,14 +1,19 @@ # Building a SvelteKit app with sv and Dino -SvelteKit has been a stable popular vote since its launch and with Svelte version 5 releasing recently, as of time of writing, there isn't a better time to show off running it with Deno! +SvelteKit has been a stable popular vote since its launch and with Svelte +version 5 releasing recently, as of time of writing, there isn't a better time +to show off running it with Deno! -Through this tutorial we will walk through setting up a SvelteKit project, made easier with the sv cli release and look at loading patters. +Through this tutorial we will walk through setting up a SvelteKit project, made +easier with the sv cli release and look at loading patters. -You can see the finished app at [GitHub](https://github.com/s-petey/deno-sveltekit) +You can see the finished app at +[GitHub](https://github.com/s-petey/deno-sveltekit) ## Getting started -We can scaffold an application easily with `npx sv create`. This is [SvelteKit's CLI](https://github.com/sveltejs/cli) which has a lot of utility. +We can scaffold an application easily with `npx sv create`. This is +[SvelteKit's CLI](https://github.com/sveltejs/cli) which has a lot of utility. https://github.com/user-attachments/assets/8357d46b-b535-44e3-9191-1496e0632bd1 @@ -28,40 +33,54 @@ If you have followed the video above great! If not, here are the selections: - Package manager - Deno -For the remainder of this, you should have `deno task dev` running in the background so you can see your changes and the application running locally. +For the remainder of this, you should have `deno task dev` running in the +background so you can see your changes and the application running locally. ### Walkthrough There are a few different folders to be mindful of. -`src` this is the root of your application code and where most of your time and effort will go. +`src` this is the root of your application code and where most of your time and +effort will go. -`src/lib` this is a SvelteKit aliased directory for fast import and where many of your helpers or library code will live. +`src/lib` this is a SvelteKit aliased directory for fast import and where many +of your helpers or library code will live. -`src/routes` this is the rendered pages for your application with SvelteKit, there is folder routing. +`src/routes` this is the rendered pages for your application with SvelteKit, +there is folder routing. #### Good info -There are a few conventions which we will use in our SvelteKit application. (Although there are more available, I am only covering the ones used). +There are a few conventions which we will use in our SvelteKit application. +(Although there are more available, I am only covering the ones used). -- Files or folders with `server` in the name are meant to **only** be run on the server and may cause errors if you try to run them in the client. +- Files or folders with `server` in the name are meant to **only** be run on the + server and may cause errors if you try to run them in the client. - Within `src/routes` files have a naming conventions: - `+page.svelte` -- this is the rendered file in the browser - - `+page.server.ts` -- This file will run on the server and sends, and can receive, data directly and type safely to the `+page.svelte` it is directly next to. - - `+layout.svelte` -- a file which defines a layout with an outlet to be added to any `+page.svelte` on the same directory or any child directories. - - `+error.svelte` -- A custom error page you can add to make error pages nicer to come across. - -Additional note later you will see we put the `dino.ts` file within a `lib/server` directory. This will mean as stated above that this file is meant to **only** be accessed by other server files. + - `+page.server.ts` -- This file will run on the server and sends, and can + receive, data directly and type safely to the `+page.svelte` it is directly + next to. + - `+layout.svelte` -- a file which defines a layout with an outlet to be added + to any `+page.svelte` on the same directory or any child directories. + - `+error.svelte` -- A custom error page you can add to make error pages nicer + to come across. + +Additional note later you will see we put the `dino.ts` file within a +`lib/server` directory. This will mean as stated above that this file is meant +to **only** be accessed by other server files. ### Setup our "database" -We will be using a ts file with a `Map` to access and find our items for simplicity. Create a file and folder: +We will be using a ts file with a `Map` to access and find our items for +simplicity. Create a file and folder: ``` src/lib/server/dino.ts ``` -Within this file we will set up a type for our `Dino`s and store the array of data to be exported as a map. +Within this file we will set up a type for our `Dino`s and store the array of +data to be exported as a map. ```ts export type Dino = { name: string; description: string }; @@ -83,7 +102,8 @@ With this setup we have our "database"! Next to access it on a page. ### Loading data to be rendered -We now need to create a `+page.server.ts` file which will be at the root of our routes directory. There should already be a `+page.svlete` there. +We now need to create a `+page.server.ts` file which will be at the root of our +routes directory. There should already be a `+page.svlete` there. ``` src/routes/+page.server.ts @@ -100,7 +120,9 @@ export const load = async ({ url }) => { }); ``` -All we are doing here is converting our map to an array so we can see them rendered on the `+page.svelte`. Within this page you can remove anything you'd like or just add the following. +All we are doing here is converting our map to an array so we can see them +rendered on the `+page.svelte`. Within this page you can remove anything you'd +like or just add the following. ```svelte