• 11 Nov 2021
• Comments (0)
• 2078 reads

Get started with SvelteKit and build your first web app

Svelte in itself is amazing. By compiling your code into ideal JavaScript Svelte manipulates the DOM (Document object model) to update itself as you see in frameworks like React. Instead of using a virtual DOM Svelte uses the real DOM which makes it faster and the bundles smaller. 

In this article, we will look at what SvelteKit is and how you get started building your first SvelteKit web app. If you want to skip the introduction and jump straight into the code, please skip to the last section of this article.

At the time of writing this article, SvelteKit is still in its beta state. Therefore we don't recommend using it for production projects yet, since bigger parts of the framework might change before reaching the first stable version.

What is SvelteKit

SvelteKit is a framework made by Svelte that will help you as a developer creating web apps and websites faster. You write your Svelte code as usual, and then SvelteKit compiles it into the ideal Javascript that will be served in your browser. Using this framework will get you up and running in no time. Just by writing one line you will have installed and imported everything you need to build your web application or website.

When using SvelteKit over other frameworks such as React, you are sure to not compromise on your SEO. This framework has SSR (Server side rendering) implemented to ensure your website works perfectly even for search engine bots.

You can read more about SvelteKit here: https://kit.svelte.dev/docs#introduction-what-is-sveltekit.

Features in SvelteKit

SvelteKit is full of useful features out of the box and all of them are there to ensure you build highly optimized web applications or websites faster than you would without it.

SvelteKit contains features such as:

• Build optimizations - Automatically optimize your code into the most ideal version of Javascript.
• Offline support - In SvelteKit you are automatically given a service worker in which you can choose to use for offline support. You can also use it for caching scripts and CSS files.
• Prefetching - Prefetching URLs are helping to ensure that your web application or website won't be lagging between pages.
• SSR (Server-side rendering) - This feature allows you to first render your page on the server-side and then send it to the front end. 

How to build your first web app with SvelteKit 

Starting your first project using SvelteKit is easy and can be done in only a few lines of code in your terminal. To begin with, we write the following to start a new project and CD into it:

npm init [email protected] my-app
cd my-app
npm install
npm run dev

What the code above does, is first starting a new project using the [email protected] package. After that we CD into the new project's folder, install the dependencies, and start the development server. Starting the development server will open the browser and show you the standard template.

Your SvelteKit's project structure

When it comes to routes and static files, SvelteKit has a specific structure which we will dive into in this section. If you already know the structure you can jump to the next section instead.

Routing in SvelteKit

Routing in SvelteKit is done with SSR (Server side rendering) and it is set up in a similar way to Next JS and Sapper. At the root of your project, you will find an "src/routes" folder where all of your routes are located. The routes will match the name of your files so a file located in "src/routes/about/index.svelte" will become localhost:3000/about. 

In the section above you saw an example of a simple route going to "/about". If you add another file in the same "about" folder named "history.svelte" underneath, then the route would become localhost:3000/about/history. This means your routes are automatically added as a tree.

SvelteKit also supports advanced routing and it is quite easy to set up and use. If we pretend to work on a project where we need a route going to localhost:3000/user/[user-id], then we can simply do it by first creating a folder called user and inside of it create a file called [user-id].svelte. Once we have done this, Svelte will figure out to use this file when we replace [user-id] with the id from a user. 

Layouts in SvelteKit

Normally when creating web applications and websites you have elements that are being used again and again. This could for example be a header, navigation, or a footer. SvelteKit has support for this and you can easily create a layout file where you import your reused components so that you don't have to remount them every time you go to a new URL.

To create a layout file you start by creating a new file called "__layout.svelte". After you will add the example code below and customize it to fit your needs: 

<nav>
  <a href="/home"></a>
</nav>

<slot />
 
<footer>I am the footer</footer>

The simple code from the example above will be rendering a layout with navigation at the top, a slot element, and a footer at the bottom. The navigation and the footer will stay the same, but the slot will be used to render your pages when you click on a new URL. When doing it this way, the navigation and footer won't be rerendered each time.

Adding static files in SvelteKit

Static files such as images and files can easily be added to your project. When adding these files inside the "static" folder, you will be able to access them from your Svelte project using "/file-name.extension". 

<img src="/photo.png" alt="" />

Conclusion

By this time you will know what SvelteKit is and have a general idea of what it is capable of. You know how to add routes to your web application and how to display static files.

As SvelteKit develops we will update this article and add to it to provide you with the most relevant information possible. If you have any additional information you find relevant to add, please contact us so that we can update the article. 

If you want to see how an example project looks like before starting one yourself, please consider this project from Github: https://github.com/sveltejs/realworld

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.