Setting Up a Svelte Project (in seconds) with Degit
October 20, 2019
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
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.
You can also follow me on Twitter, where I make silly memes and talk about being a developer.