Setting Up a Svelte Project (in seconds) with Degit

Getting started with Svelte can be a little bit intimidating for JavaScript developers familiar with one of the more mainstream front-end frameworks.

Thankfully, Rich Harris (who started Svelte) wrote a useful scaffolding tool called degit. The premise of degit is extremely simple by design -- it copies existing git repositories.

All you need to do is install degit with your preferred package manager:

npm install -g degit

Then, you can use the tool to create copies of a git repository (you can specify if you want to use BitBucket or GitLab, but it defaults to GitHub repositories):

npx degit user/repo-name target-directory

As it happens, Rich set up a template for Svelte projects that should be used with degit. To get up and going with a Svelte project all you need to do is run:

npx degit sveltejs/template my-svelte-project

This will set you up with a copy of the official Svelte template in a new directory called my-svelte-project. It's important to note, your copy will not be a git repository, if you plan to use git for version control, you'll have to run git init.

So what does the Svelte template set you up with?

The template's dependencies are pretty lightweight. Basically, you're getting Svelte, Rollup, sirv-cli, and with a few simple scripts to make development easier.

The basic structure is also super simple; you're given a src directory for your Svelte code and a public directory where your compiled code will be output.

Here is a list of the scripts you end up with:

"build": "rollup -c",
"autobuild": "rollup -c -w",
"dev": "run-p start:dev autobuild",
"start": "sirv public --single",
"start:dev": "sirv public --single --dev"

So, in this case, running npm run build will compile the Svelte code in your src folder, you can set the project to automatically compile on save with npm run autobuild. You can save time by running npm run dev, which will kick off a server for you and automatically compile your code when you make changes.

I'll run through an example, to illustrate exactly how easy it is to make a new Svelte project.

npm install -g degit # install degit
npx degit sveltejs/template my-svelte-project # copy the Svelte template

cd my-svelte-project
npm install # install dependencies

npm run dev # kick off a server and auto-compile

Now I can navigate to localhost:5000 and I'm greeted by a simple Hello world! Any change to a Svelte file will result in a compilation step and be autoloaded by my browser.

There's more...

I'm writing a lot of articles these days, I run a podcast, and I've started sending out a newsletter digest about all of the awesome stories I'm hearing.

You can also follow me on Twitter, where I make silly memes and talk about being a developer.