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.
- We need to install this
create-svelte@nextpackage, 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.
- 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.
- 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.
- 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
- 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.
svelte.config.jsis 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.
- First we have our
staticfolder. This folder is the home of our static assets such as images, icons, and more.
- Next, we have our source or
srcfolder. This is where we will mostly be working out of. Within this folder, we have our
app.html, and our
hooks.js. Let's dive a little deeper into these.
First, we have this
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
.svelte files, which are a superset of HTML files.
.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.