Svelte have written an excellent set of tutorials . These cover quite a bit of ground and take some time to complete. Depending on how you like to learn, I would run with the tutorials until you have covered the basics and then jump to building your own toy apps and take it from there. You will probably need to dip into the tutorials again to understand features such as Stores and Special Elements, which come later on. However, by no means do you have to complete the tutorials to write your first app.
As well as those tutorials, there is also the Starting out Svelte and SvelteKit tutorial . In that tutorial, you build out a real world app while getting to learn not just the basics plus Stores, but also Svelte’s newest features like style directives and local constants. If you want yet more ideas for getting started with SvelteKit, try Colby Fayock's e-book of 50 React Projects (using Svelte instead of React).
Before looking at how to create a SvelteKit app, let’s quickly look at what SvelteKit is. In essence, SvelteKit is a tool for taking your Svelte code and converting it into a packaged app. Svelte is the underlying language while SvelteKit is a tool for building sites with it. SvelteKit brings server-side rendering (SSR) and code-splitting to your app, though you can also create static apps with SvelteKit. The Svelte/SvelteKit relationship is not all that different to that between React and Next.js.
With that out of the way, let’s look at how to get stared with creating a SvelteKit app.
To get going you will need to have node installed on your machine
. If you are already running Next.js, Remix or Astro, then you probably have everything you
need. Now, run the following commands. For now use the
It literally only takes about 40 seconds to download everything you need and start up your
local server. Next, open up your browser and go to http://localhost:3000
. If you already have a process running on TCP port
the tip below on changing the default SvelteKit dev server port
We'll have a quick run through what files and folders we have and some that it's worth creating. Skip onto the next section if you are already familiar with the structure.
README.mdfile contains some tips on getting going, handy to keep while you are still getting used to SvelteKit.
jsconfig.jsondefines some paths which the compiler needs (note that this will be
tsconfig.jsoninstead if you opted for TypeScript).
package.json: remember you will find the npm script definitions here so you can check back on the build, dev and preview commands if you have as bad a memory as I do. We'll look at some scripts you might want to modify in
package.jsonfurther down .
src/app.htmlis an HTML template, which SvelteKit injects your code into. You can set some accessibility properties here, or alternatively hang on and you will see a way to set meta tags programmatically , further down.
src/app.d.ts: if you're a TypeScript person, you might want to define some global types in here!
src/lib: create this directory and use it to store your own components, utility functions etc. SvelteKit has a nice way of importing files from here, so you don’t need to use
../../../../file-i-want.jsnotation, which can become burdensome when refactoring code. We go into this later.
src/routes: SvelteKit creates app pages based on the file and folder structure here. You will find this familiar is you are already have Next.js, Remix or Astro experience.
static: by default this directory contains a Svelte favicon, replace that with your own favicon. Also use this directory for logos and other assets which you do not need SvelteKit to generate at compile time (such as PGP public keys) in here.
svelte.config.jsdoes what is days on the tin! We will drill into a couple of options below.
Up next it's the 10 tips for getting started with SvelteKit.
With all of the preliminaries out of the way, let's look at some SvelteKit details. Here is a list of 10 tips you should find handy if you are new to SvelteKit.
Both SvelteKit dev and preview servers run on port
3000 locally by
default. There are a few different services and apps which also use that port so you might find you
need to switch. To save having to remember command line switches, I would just update your
Here we change the default port to
4000 for both the dev server and
the preview server. Here’s a video which takes you through changing SvelteKit dev and preview servier ports
in a little more detail.
If you are using VSCode, it is worth installing Svelte for VSCode . This will give you syntax highlighting and completion options (intellisense). This is something you can just set and forget. The extension is the official one, developed by Svelte.
To make your app accessible, it is important that the HTML document includes a title and the
lang attribute is helpful for Screen Readers to choose the best
. You can set the
lang attribute in
app.html. The default is
you might consider setting it programmatically (if you do this delete the lang attribute in
app.html). There are a few options, varying in complexity. Let's see the simplest below. You might,
instead, choose to use a Svelte Layout (explained further down)
in a more complex project. If your project will have more than a couple of pages, it is worth
creating a Svelte SEO component
in which you can include meta tags for search engines and social media sites to ingest, alongside
these accessibility tags. However for a small site you can just do something like this on each page
(changing the title to match the page):
You will probably already be familiar with layouts if you have previously built an Astro site.
Basically they save you having manually to add repeated content, like headers and footers to every
single page they need to appear on. In SvelteKit, if you create a file with the path
src/routes/__layout.svelte, this is automatically interpreted as the default layout for your app. In that file you define
your layout (e.g. header and footer) and just need to include a
<slot /> element. This is where the content from whichever page is using the layout goes:
That’s all you need. Save the file and navigate to the home page. You will see you now have a header and footer. For clarity, you don’t need to change code in any pages using the layout. They will pick it up automatically. You can use layout scoping if you need a little more control over which layout file to pick, though we won’t get into that here.
Remember to use semantic HTML (e.g.
<footer> etc.) where possible to keep the app accessible.
Similar to the default layout, include a default 404 page but creating a file with the path
We’re half way through the tips now. Hope you have learned a couple of handy bits already. There’s more on SEO and environment variables coming up.
SvelteKit uses Vite under the hood, which makes importing JSON files straight into your Svelte source files a walk in the park. You can import the entire JSON file using a default import. As well as the entire file, you can just import top level items from the JSON file as named imports.
Let’s says we have a JSON file which looks like this:
Then, we can import
ticketPrices as named imports, right from our JSON file:
For more on this, see the video on SvelteKit JSON Imports . By the way, Vite tooling also makes glob imports possible. For example:
Environment variables provide a convenient way to store API keys and other private information which we do not want to keep in our repo. There will be some environment variables which you want the user’s browser (client-side) to have access to. You might have an API site key which is needed on the client side to identify your site to a service. Beyond client environment variables you will possibly have secret environment variables which only the server has access to. API secret keys, used to authenticate your site to a service, are included in this category. SvelteKit can handle both types easily. For secret, server side API keys Scott Spence has written a fantastic article explaining the process. We will focus on client side secrets here.
SvelteKit has the easiest way for handling client side environment variables I have seen. There is no need to install any external packages. You have to be careful importing environment variable into files which have a style element though. If you do this you will probably get an error message in the terminal. There is a workaround which is not too much bother to code up.
In general to use environment variables in SvelteKit. First define them in a
note the variables are prefixed
VITE__(you will omit this prefix for server side secrets).
To use the variables in a file, just import them like so: If you needed to use an environment variable in the rendered content (for example a public email address stored as an environment variable), you can use and reference it in exactly the same way. Be careful with what you output to the browser though!
We can import all of the environment variables into a library file and reference them from there wherever we need them.
Now you can import the environment variables and use them in pages with style tags:
Note the convenient notation in the second line above. We don't have to use a relative path back to the
constants folder. More on this later.
By default, the assets folder for static files is
static/ at the project
root. Put any files which SvelteKit does not need to process in here (e.g. small logo files and public
PGP keys). You will need to create the folder if you selected a skeleton project when you initialised
the app. You can also add the manifest.json file for a Progressive Web App (PWA)
here. Don’t forget to as
<link> tags in
src/app.html. If you want to generate your favicon files locally using open source tools, see the post on creating the five favicon files needed for wide support
in modern and legacy browsers.
For convenience, I create the
src/lib/components folder for SvelteKit
for placing components in. As previously mentioned, another of the developer experience tweaks in SvelteKit
saves you having to work out and then type out the relative path from the page you are editing to the
components folder. The
src/lib folder is accessible throughout the
project, just using
$lib. Here is an example for importing an
SEO component with path
src/lib/components/SEO.svelte, used on the
Note in line
7 we use a shortcut syntax (another developer experience
perk in Svelte). This is equivalent to writing:
You might want to share components between different SvelteKit projects. SvelteKit also makes this easy with the package command. Check out the post on Creating a SvelteKit component library to see how you can share code between SvelteKit projects .
Finally, our last tip on getting started with SvelteKit. Like for Astro, adding SEO meta tags in SvelteKit is quite easy. In the case of SvelteKit, following the Svelte philosophy of simplicity, we have already seen that you don't even need to install any extra packages to update the HTML head section. We'll look at some example code so exactly you can see how to do it.
For a decent sized app, you would probably want to create separate SEO components for Twitter , OpenGraph (used principally for Facebook but also for What's App and others) and Schema.org (used mainly by search engines to serve rich results). Here I have a principal SEO file which imports the other mentioned SEO components:
As mentioned earlier, to add elements to the output HTML head, we just wrap them in a
<svelte:head> tag. Here we have the accessibility
title elements defined within our SEO component. As well as those, we have a
robots tag which tells search engines we are happy for them to index the page. The Twitter and OpenGraph
components work in a similar way so we won't look at those here. For a deeper dive into SvelteKit SEO, take a look at the series of posts dedicated to Search Engine
Optimisation in SvelteKit
Because of the way in which we need to define Schema.org in the HTML document, we need to tweak
the code a little. This is partly so that Svelte compiles it as intended but also to stop ESLint
breaking the code (albeit with good intentions). Schema.org metadata is included as a script of
application/ld+json. We create this tag in a few stages. Take
a look through the code then see the explanation below:
Let's start at the bottom and work our way up. In lines
40–42 we add
the script to the HTML head. The
@html in line
41 is important for the correct compilation of our Svelte code. In lines
33–37 we define the script tag which we inject into the DOM at end of the file. The funkiness in line
36, is the workaround I mentioned to prevent ESLint messing up the
code. What we need to output is simply
</script>, but to
stop ESLint in its tracks, we wrap the opening angular bracket using the interpolated template
The rest of the file defines the Schema.org data as a JSON object. I have trimmed this down, for simplicity. Normally you will include further fields in the object, such as a breadcrumb list and details on the publishing entity. Again let me know if you would value a post on this with a full example. SchemaOrg is quite good for SEO, as an example, if you include the right meta, your page will appear like this, above all other results:
That's all for now on getting started with SvelteKit. If you have found this post useful, you should also look at the follow-up post on using Netlify to host your SvelteKit site . Did you learn at least one thing here? Is there anything I should have added. Or, even anything that I did include but was so obvious that I shouldn't have bothered? Please let me know either way. I also want to know how you are finding SvelteKit. Which libraries or frameworks are you more used to? Do you use Netlify? Let me know if you would find a post on using Netlify with SvelteKit and the Netlify adapter. Finally, what have you built so far in SvelteKit?
- SvelteKit is a tool for building sites and web apps coded in Svelte. SvelteKit is kind of a NextJS for Svelte. SveletKit uses modern vite tooling to create your app. It can generate server-side rendered sites or static ones. On top you can decide only to create certain pages as static ones. SvelteKit uses ES Modules by default which helps with code splitting and hot module reloading. This gives SvelteKit a fast developer experience while Svelte itself creates a fast user experience.
- SvelteKit is still in beta at the time of writing. Despite that it is fairly stable and some companies are already using it for production sites.
- SvelteKit is written by the Svelte maintainers so you might expect better stability using SvelteKit over Astro. That said Astro is able to offer partial hydration which speeds up page load offering visitors a better user experience. On top the islands of interactivity model used by Astro lets you have more control over how your page loads. Finally Astro lets you combine Svelte with other languages so might be a good starting point for you to dip a toe in the Svelte pool. If you need a server side rendered app, SvelteKit will be the better choice and Astro is optimised for static site generation.
How did you find this guide on getting started with SvelteKit? It's a little different to other posts I have written. Normally I like to work on a single project and build out a complete working example. The idea is to see how everything fits together. Once that is clear it is easier to take components out and use them in your own projects. How did you find this format? Would you like to see some complete examples using SvelteKit? Keen to hear your views and also learn where your pain points with learning SvelteKit are. If you have found this post useful and can afford even a small contribution, please consider supporting me through Buy me a Coffee .
Here’s a post you might find handy if you are looking for some free resources to help you get up and running with ❤️ SvelteKit.— Rodney (@askRodney) June 7, 2022
We look at 10 key tips including tooling, adding favicons and even SEO.
Hope you find it useful!
#SvelteJS #SvelteKit https://t.co/yI6LOspQjX
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. You can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab . I post regularly on Astro as well as SvelteKit. Also subscribe to the newsletter to keep up-to-date with our latest projects.