❤️ Svelte and SvelteKit
🧑🏽🎓 How do you get started with Svelte?
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 and until you have covered the basics and then jump in to building your own toy apps and taking 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.
🧱 How do you create a Skeleton SvelteKit app?
Before looking at how to create a SvelteKit app, let's quickly look at what SvelteKit is. Essentially SvelteKit is a tool for taking your Svelte code and converting it into a node app. Svelte is the underlying language and SvelteKit is a tool for building sites with it. SvelteKit brings server-side rendering (SSR) and code-splitting to your app. The Svelte/SvelteKit relationship is much like that between React and Gatsby or 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 or Gatsby, you probably have everything you need. Now, run the following commands. For now use the
Skeleton project option for a quick start. 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
3000, see the tip below on changing the default SvelteKit dev server port.
🧐 Getting Started with SvelteKit: What's Inside?
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. If this is your first SvelteKit project, I would keep files in their default locations.
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
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/global.d.ts: if you're a TypeScript person, you already know what this is for!
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 or Gatsby 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.
10 Tips for Getting Started with Svelte
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.
⛔ 1: Changing the Default Dev and Preview Server Ports
Both SvelteKit dev and preview servers run on port
3000 locally by default. There's 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.
⛔ 2: Getting Started with SvelteKit: SvelteKit Tooling
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.
3: SvelteKit Accessibility
To make your app accessible, it is important that the HTML document includes a title and the language. The
lang attribute is helpful for Screen Readers to choose the best pronunciation. Although you can set the
lang attribute in
app.html 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):
element is one of the special elements in Svelte, you can learn more about them in the Svelte tutorial . For more language codes see the W3C Internationalisation Guide .
4: Getting Started with SvelteKit: SvelteKit Layouts
You will probably already be familiar with layouts if you have previously built a Gatsby 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. It is easy to tell SvelteKit not to use a Layout for particular pages , though we won't get into that here.
Remember to use semantic HTML (e.g.
etc.) where possible to keep the app accessible.
5: Getting Started with SvelteKit: SvelteKit 404 Page
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.
6: Privacy in SvelteKit
Kudos to SvelteKit for switching off Google FLoC by default. It is admirable that they take this privacy protection step. If you need to switch on FLoC for your app, it is not difficult, just edit
7: Environment Variables in SvelteKit
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.
How to use Environment Variables in SvelteKit
- In general to use environment variables in SvelteKit. First define them in a
.envfile: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!
- If you get cryptic errors in the terminal, read on for some solutions.
Cryptic Error Messages
There's a couple of error messages you might see in the terminal when using environment variables. I had this one several times, when ESLint was trying to be helpful and imported something which I did not need. This threw the error:
If you get that error, ESLint probably added this line to your page, near the top of your file:
There is one more cryptic error I got a few times. If you are using environment variables and get an error in the terminal, something like
[rollup-plugin-dynamic-import-variables] Unexpected token,
<style>tag in a page which also uses environment variables. There is a workaround which involves a small refactor. Basically we will 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.
8: Where do you put your Favicon in SvelteKit?
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.
9: Getting Started with SvelteKit: Using your Components in Pages
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 home page:
Note in line
7 we use a shortcut syntax (another developer experience perk in Svelte). This is equivalent to writing:
10: Getting Started with SvelteKit: SvelteKit SEO
Finally, our last tip on getting started with SvelteKit. Like for Gatsby, 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
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. Let me know if you would like me to write a separate post on SEO for Social Media in SvelteKit, or more generally — it's a little too much detail to go into here. I could include a complete example, showing how to add and test social images and generate rich search engine results if you would find that helpful.
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 type
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
, but to stop ESLint in its tracks, we wrap the opening angular bracket using the interpolated template variable syntax.
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:
All Good Things Must Come to an End!
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?
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.
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 Gatsby JS as well as SvelteKit. Also subscribe to the newsletter to keep up-to-date with our latest projects.