Brought to you by CloudCannon, the Git-based CMS for SvelteKit.
Learn how to get SvelteKit set up and installed for the rest of the tutorial series.
Let’s get started!
SvelteKit on the other hand, is a web framework which is powered by Svelte. It provides tooling around the front end rendering of Svelte such as routing, layouts, and content fetching to create entire web pages or apps.
SvelteKit can handle a broad range of applications from simple informational websites to full blown web apps. In this tutorial, we going to focus on the simpler side of the spectrum by creating an informational website with a blog and treat SvelteKit as a static site generator.
With npm installed, we can set up our first SvelteKit application by running a single command in the terminal:
npm init svelte my-first-svelte-app
This will prompt you to select an app template. Let’s use “Skeleton project”.
Answer the rest of the questions with ‘no’.
Svelte has set up the skeleton code for our first Svelte app. Let’s take a look. First
cd into the directory:
We’ll install the npm packages the skeleton code requires (Svelte + SvelteKit):
And finally run the SvelteKit server:
npm run dev
If you open a browser and go to http://localhost:3000/, you’ll see a basic page welcoming you to SvelteKit. Congrats! SvelteKit is now installed.
By default, SvelteKit uses the auto adapter for rendering pages. This adapter will prerender where it can and fall back to edge functions for dynamic content. To keep this tutorial simple, we’ll switch to the static adapter which renders static HTML for all pages.
First we need to install the static adapter:
npm i -D @sveltejs/adapter-static@next
And then configure SvelteKit to use it. Open
svelte.config.js and replace:
import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-static';
You may be wondering what all those files are in the Skeleton project. Here’s a quick overview of what they do. We’ll be using most of them throughout this tutorial, so don’t worry if it doesn’t make sense right now:
- .svelte-kit — this is the default location SvelteKit adds its generated files to during a build.
- src — we’ll mostly be dealing with this directory, the source files for your SvelteKit site.
- src/app.html — the main template for HTML responses. All other HTML layouts extend from this one.
- src/routes — SvelteKit creates pages on the site based on the files in this directory.
- static — Assets that don’t require SvelteKit to build them. Images, fonts, PDFs etc.
- package.json — Lists your npm dependencies and commands for running the site.
- svelte.config.js — the configuration settings for Svelte.
In our next lesson, we’ll create our first page and set up a layout.