diff --git a/examples/tutorials/sveltekit.md b/examples/tutorials/sveltekit.md index a9f8f0d7..9118955d 100644 --- a/examples/tutorials/sveltekit.md +++ b/examples/tutorials/sveltekit.md @@ -2,19 +2,17 @@ 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 much 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) - - ## 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. - +https://github.com/user-attachments/assets/8357d46b-b535-44e3-9191-1496e0632bd1 -If you have followed the video above great! if not, here are the selections: +If you have followed the video above great! If not, here are the selections: - Template - SvelteKit minimal @@ -30,21 +28,21 @@ 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 into. +`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 a lot 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. There are more but 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. - Within `src/routes` files have a naming conventions: @@ -91,7 +89,7 @@ We now need to create a `+page.server.ts` file which will be at the root of our src/routes/+page.server.ts ``` -With this file created now we need to initialize the function to load our dinos! +With this file created, we need to initialize the function to load our dinos! ```ts /// src/routes/+page.server.ts @@ -102,7 +100,7 @@ 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 everything if 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