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.
Top comments (6)
Tho I think the thought for this tutorial was supposed to help onboarding beginners, it actually pissed me off.
When I ran "npm run dev" this is what greeted me:
ERROR: Task not found: "start:dev", autobuild"
Not to mention the npm-run-all should've been mentioned.
I wish writers would dogfood what the tutorials they write as this one comes off as shabby.
P.S. it's not "super simple"
Sorry you feel that way, this has very likely changed since October of last year. This article was written to be part of a series on Svelte, but I never really got around to writing it. Perhaps you'd have better luck looking for a more recent article!
In fact, once you've got it figured out I really encourage you to write a guide on setting up Svelte projects to avoid this same mishap with other folks. :) In the meantime, your comment should help people who might need to find a more up-to-date article.
I don't want to be rude or anything but this is directly ripped of from the readme, isn't it?
Ripped is a strong word. It's a couple of readme's combined, in a prosaic format. I wrote it to serve as part of a series covering Svelte, the purpose is to be a backlink for people following future tutorials that aren't exploring the repositories on their own.
Sorry if it sounded mean, i was just curious cause i had a super strong deja vu feeling while reading it
You're not wrong, it contains the same info, but it's really just intended to be useful for someone who isn't going to go find those repos and readmes on their own.