We see how to create a Svelte app from scratch in this post. This will be handy equally if you are new to Svelte and want to hit the ground running or have more experience but want a cheatsheet. If you are a Svelte pro, but can never remember the spin-up commands, you can treat the post like a cheatsheet with the commands for a skeleton SvelteKit project. We focus on creating a Svelte app with SvelteKit here. However if you prefer Astro for quickly spinning up a Svelte app, there’s a link lower down for how to do this, but with Astro. I really hope you find it useful, and please do reach out or drop a comment below if there is something missing. You can find contact details further down the page.
To get going you will need to have NodeJS installed
16.9 or higher to run the latest version of SvelteKit. NodeJS comes with the
npm packet manager, but we use
pnpm: performance npm
To set the ball rolling, run the Create Svelte app command.
Here our project gets created in a new
&& cd$_” will put us in the new directory when everything is ready. “
&& code .” will open up VSCode in the new directory (change this to “
&& codium .” or “
&& subl .” if you use Codium or Sublime Text).
SvelteKit lets you build static (SSG) or server-server side rendered apps. A third option is
mixing the two. If you want to go for the first, static, option, create a
src/routes/+layout.jsfile with this content:
Spin up the dev server:
The CLI will give you a link so you can open the new app in your browser, the default is
localhost:5173/. If you already have something running on TCP port
5713SvelteKit will find another free port.
Making all pages static
That’s all there is to it! If you are new to SvelteKit, check out the free Getting Started with SvelteKit Guide for 10 tips to help you hit the ground running. Also see the Starting out Svelte and SvelteKit tutorial
In this post, we saw how to create a Svelte App. In particular, we saw:
- how to use pnpm to create a SvelteKit project,
- what the various create Svelte CLI options mean,
- how to make your new SvelteKit app fully static (SSG).
Hope you have found this post on creating a SvelteKit app useful! I am keen to hear what you are doing with Svelte and ideas for future projects. Also let me know about any possible improvements to the content above.
- Both SvelteKit and Astro let you create a Svelte app. Initially Astro only built static (SSG) site but it now also support server side rendering (SSR). So what are the relative merits of SvelteKit vs. Astro for your next Svelte app? If it is your first Svelte app, you might find the Astro routing API a little easier to get you head round. Astro uses a file based routing system, just like NextJS, Remix or Deno Fresh. There is a single file for each page. The top part of your page file contains the server logic and below you place your markup. Meanwhile, SvelteKit has a folder for each page. Inside that page the template is in the +page.svelte file, while server code can be split between +page.js and +page.server.js files. Beyond routing, Astro is less flexible on server-side routing. You either have all pages static or all pages SSR. SvelteKit meanwhile, lets individual pages opt in to one or the other. Other Astro features are partial hydration and support for mixing in other frameworks like Preact, React or Vue.
- SvelteKit has out-of-the-box TypeScript support. To configure your new SvelteKit project to run TypeScript, run `pnpm create [email protected]`. Then the CLI tools prompts you for some project settings. When you get the Add type checking with TypeScript? option, just pick Yes, using TypeScript.
- Astro is probably quicker to get going on vs. SvelteKit because the routing API is more straightforward. This makes it a great choice if you are coming from a NextJS, Remix or Deno Fresh background. However, while Astro is ideal for static sites, SvelteKit allows more flexibility for server side generated sites. So really the answer to SvelteKit vs. Astro depends on what kind of site you will be building more of. Astro is better suited to content sites like brochure websites and blogs. SvelteKit might be a better choice if you need to render dynamic content, for example if logged in visitors or subscribers see different content to visitors.
If you have found this post useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny 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. As well as leaving a comment below, you can get in touch via @askRodney