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.