How to Create a Svelte App: SvelteKit Cheatsheet
Tags: svelte, webdev, tutorial, javascript
Published: 2022-10-24 10:09:13

---
title: "How to Create a Svelte App: SvelteKit Cheatsheet"
published: "true"
description: "How to create a Svelte app: cheatsheet reference guide to spinning up, launching and customising your new SvelteKit project quickly."
tags: "svelte, webdev, tutorial, javascript"
canonical_url: "https://rodneylab.com/how-to-create-svelte-app/"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8uvuwwlyiiiste2aczs.png"
---

## 🚀 Spinning up a New Svelte App

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 cheat sheet.  If you are a Svelte pro, but can never remember the spin-up commands, you can treat the post like a cheat sheet 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&rsquo;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.

## 🧱 How to Create a Svelte App

To get going, you will need to have <a aria-label="Open Node J S install how to docs" href="https://nodejs.dev/en/learn/how-to-install-nodejs/">NodeJS installed</a> on your system.  At the time of writing, you should have NodeJS version `16.9` or higher to run the latest version of SvelteKit.  NodeJS comes with the `npm` packet manager, but we use <a aria-label="Open p n p m installation guide" href="https://pnpm.io/installation">`pnpm`: performance npm</a> here. The benefit is that it keeps a local cache of packages on your machine. This saves you downloading a package if you already used the same version in another project.

### How to Create a Svelte App
- To set the ball rolling, run the Create Svelte app command. 
```shell
pnpm create svelte@latest my-new-svelte-app && cd $_ && code .
```
Here, our project gets created in a new <code>my-new-svelte-app</code> directory.  &ldquo;<code>&& cd$_</code>&rdquo; will put us in the new directory when everything is ready.  &ldquo;<code>&& code .</code>&rdquo; will open up VSCode in the new directory (change this to &ldquo;<code>&& codium .</code>&rdquo; or &ldquo;<code>&& subl .</code>&rdquo; if you use Codium or Sublime Text).
- Next, the CLI gives you some options for configuring your project.  You can select <strong>Skeleton project</strong> if you want just the basics and then to build the rest up yourself.  Alternatively,  the <strong>SvelteKit demo app</strong> option gives you some training wheels (stabilizers).

Next you can go all in on TypeScript or if you are not a fan opt for no type checking or JavaScript with JSDoc.  If you are comfortable with TypeScript, then choose that option. Otherwise, even if you are not a huge TypeScript fan, I would go for the JSDoc option.  This adds some TypeScript benefits like Intellisense and auto-completion without having to be strict about your types.
	
Finally, you can pick <strong>ESLint</strong> for code linting, <strong>Prettier</strong> for formatting and <strong>Playwright</strong> for end-to-end testing.  You can opt in to whichever of these you want to use.

<h4>Making all pages static</h4>
- 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, <strong>static</strong>, option, create a <code>src/routes/+layout.ts</code> or <code>src/routes/+layout.js</code> file with this content:
```typescript
// OPTIONAL: fully SSG (static site) only
 
export const prerender = true;
```
- Spin up the dev server:
```shell
pnpm dev
```
The CLI will give you a link, so you can open the new app in your browser, the default is <code>localhost:5173/</code>. If you already have something running on TCP port <code>5713</code>&nbsp;<a aria-label="Open video on Svelte Kit port" href="https://rodneylab.com/sveltekit-port/">SvelteKit will find another free port</a>.


That&rsquo;s all there is to it!  If you are **new to SvelteKit**, check out the <a aria-label="Open the getting started with Astro guide" href="https://rodneylab.com/getting-started-with-sveltekit/">free Getting Started with SvelteKit Guide for 10 tips to help you hit the ground running</a>.  Also, see the <a href="https://plus.rodneylab.com/tutorials/starting-out-svelte-sveltekit">Starting out Svelte and SvelteKit tutorial</a> which even goes right up to publishing your SvelteKit site on Netlify, Cloudflare or Vercel.

## 🙌🏽 How to Create a Svelte App: Wrapping Up

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; and
- 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.

## 🙏🏽 How to Create a Svelte App: Feedback

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 <a aria-label="Support Rodney Lab via Buy me a Coffee" href="https://rodneylab.com/giving/">consider supporting me through Buy me a Coffee</a>.

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 <a href="https://twitter.com/messages/compose?recipient_id=1323579817258831875">@askRodney</a> on Twitter and also <a aria-label="Contact Rodney Lab via Telegram" href="https://t.me/askRodney">askRodney on Telegram</a>. Also, see <a aria-label="Get in touch with Rodney Lab" href="https://rodneylab.com/contact/">further ways to get in touch with Rodney Lab</a>. I post regularly on <a aria-label="See posts on svelte kit" href="https://rodneylab.com/tags/sveltekit/">SvelteKit</a> as well as <a href="https://rodneylab.com/tags/seo/" aria-label="See posts on search engine optimisation">Search Engine Optimization</a> among other topics. Also, <a href="https://newsletter.rodneylab.com/issue/latest-issue">subscribe to the newsletter to keep up-to-date</a> with our latest projects.