Getting Started

In this module, we are going to create a new SvelteKit project and explore the SvelteKit demo app. We will take a deep dive into the codebase to get a basic understanding of what's going on.

Let's start by creating a demo app and running it locally.

If you do not have Node.js installed, you'll need to do that first. If you are unsure what version of Node.js you have, you can check by running the command node -v in your terminal. If you need to update Node.js, or you don't have it installed at all, you can do that at nodejs.org.

To install Node.js, click the button that says "current" and then install it onto your computer.

Next, initiate a new SvelteKit project by running the following command in our terminal:

npm create svelte@latest svelteKit-app

svelteKit-app is the name of your project (and the folder on your computer).

After running this command, we are prompted to answer a few questions in the terminal.

1. We need to install this create-svelte@next package, so the terminal asks if we wish to proceed. We do, so we can respond with ‘y'. Now, SvelteKit is installed and we can finish creating our project.
2. Next, we are asked which template we would like to start from. For this example let's select "SvelteKit demo app". This will create a new SvelteKit project with a counter, todo list, and routing for us to look through and learn from. In the future you can start from a blank project by selecting the second option "Skeleton project", but for learning purposes we will start with the demo app.
3. We are then prompted to answer a few more questions, to which your responses do not really matter. Feel free to set up your project however you prefer. In this example, however, we will respond 'no' to TypeScript, 'yes' to ESLint and Prettier, which is a code formatter, and no testing currently.

Next, move into our project directory using the cd command and install dependencies with npm install. The next recommended step that our terminal gives us is to commit the project to GitHub, however, we are going to skip this step since we are just using this demo project for learning purposes. We will go over how to commit your work to GitHub later in the course when we go over adapters and deploying to Vercel.

Finally, we can run the following command to view the demo locally in our browser.

npm run dev

Now that our demo app is running in the browser, let's go through each file and get an understanding of what's going on. Looking in the browser, we see we have our welcome page with a counter component.

If you click on this counter, you'll notice it has a nice animation. We will go over animations with SvelteKit in a later module. At the top of our app, we have a navigation bar. If we click 'about' and 'todos', we will observe a route change. We will cover routing in detail in a future video.

Let's explore the code.

1. First, we have node_modules, which is normal if you are working with a Node.js application. This folder includes all of the dependencies that are installed through your package.json file.
2. Moving into package.json, we see a few dependencies, but the only one we absolutely need to create an application is svelte. All of the other dependencies are optional. For example, we have this adapter-auto, which we actually will end up using later, but is not necessarily required. I'll go over what this is later in the course when we cover adapters and deploying our app.
3. svelte.config.js is the configuration file for SvelteKit. We will work out of this file a bit in the future when adding SCSS and working with adapters.

Now, let's dive into our folders.

1. First we have our static folder. This folder is the home of our static assets such as images, icons, and more.
2. Next, we have our source or src folder. This is where we will mostly be working out of. Within this folder, we have our lib folder, routes folder, app.css, app.html, and our hooks.js. Let's dive a little deeper into these.

First, we have this hooks.js file, which is not something we need to be too concerned with. It is just a JavaScript file containing a single method for parsing cookies and looking for a user ID. It does not really involve Svelte and is just some logic to make the demo work correctly. This file is not present in a skeleton project.

We also have app.html in our src folder, which is the main entry point for the application. Notice we have some template replacement tags. Here we have %sveltekit.head% which takes our meta data and inserts it here. We also have %sveltekit.body%, which is basically a <div> that Svelte will insert the entire application into.

Let's open our routes folder and move into our +layout.svelte file. Every file within the routes folder corresponds to a route, unless it is a layout. Within our layout file, notice that we are importing our app.css. This layout will be applied to the entire app, making it an appropriate place to import our default CSS.

The most important thing to point out in this file is our <slot/> tag. Slot is where everything is inserted into, such as any of our page routes. The only requirement of a layout is that it contains a slot tag. We will take a deep dive into layouts and slots in future videos.

Next, let's take a look at +page.svelte. This is an example of a page, so the layout we just looked at will be applied here. This is actually our root page, so if we look in our browser we see it lives at our root URL. We also see the header, which is part of our layout, as well as all the content written within our +page.svelte file. Looking at the code, we see that our counter component is imported, as we'd expect, and we also have this <svelte:head> tag which allows us to insert metadata.

We also have an /about/+page.svelte page within our routes folder. Anytime a file exists in the routes folder, a URL is automatically generated for the page. This is a bit different, however, because /about displays our +page.svelte within the about folder. This is because SvelteKit uses file-based routing. We will talk about routes in-depth in a future module. Within our todos folder we see another interesting file, +page.server.js. This is a server-side route, or an endpoint, which we will cover more in the future.

Components that are not pages can be found within the lib folder. For example, we have a JavaScript file for form validation, and we also have reusable components written in .svelte files, which are a superset of HTML files.

In our .svelte files, we have a <script> tag and <style> tag – as well as HTML. The styles within .svelte files are scoped to the specific file. For example, down in the style tag within our /lib/header/Header.svelte file, we are styling our <header>. In this case, it is talking about the header within this single file. We can use <header> anywhere else in the app and it will not get these styles. Scoping CSS offers a lot of benefits which we will cover in the CSS module.

Now that we understand our project structure and have a basic idea of what's going on in our code base, let's get into the Svelte fundamentals. In the next module, we will start by learning about Svelte's reactivity.