Getting started with Svelte-short tutorial

How to start using Svelte

Since I started to use Hugo as a static website generator for creating websites, compared with the past CMS that used CMS to dynamically generate pages, I have become more and more fond of this method of publishing on the Web.

SvelteIt is a JavaScript framework that gives me the same feeling. Compared with React, Vue, Angular and other frameworks, applications built with Svelte areCompiledIn advance, there is no need to provide framework and library code for website visitors, so the results of all experiences are smoother, take up less bandwidth, and everything feels faster and lighter.

Like Hugo, Hugo will disappear upon deployment and generate pure HTML, Svelte will also disappear, and all you get is pure JavaScript.

But let's skip to the point of this article. How to start using Svelte.

You need to install Node.js. Look at mineHow to install Node.jsPublish (if you haven't already)!

And make sure it is the latest version (How to update Node.js).

Node installationnpxCommand, this is a convenient way to run Node commands. In particular, we will run the following code:

npx degit sveltejs/template firstapp

This will download and rundegit command, Download the latest code of the Svelte project template located at the following locations in turnhttps://github.com/sveltejs/template, Enterfirstappfolder.

Enter nowfirstappFolder and runnpm installDownload other dependencies of the template. At the time of writing, these are the dependencies of the project template:

"npm-run-all"
"rollup"
"rollup-plugin-commonjs"
"rollup-plugin-livereload"
"rollup-plugin-node-resolve"
"rollup-plugin-svelte"
"rollup-plugin-terser"
"svelte"

As you can see, it’s the Svelte core, plus Rollup (a Webpack alternative) and some of its plugins. Plus npm-run-all, a CLI tool that is used to run multiple npm scripts in parallel, or sequential.

We’re now ready to run our Svelte site in development mode, by running

npm run dev

This will start the app on localhost, on port 5000, by default:

CLI

If you point your browser there, you’ll see the “Hello world!” example:

Browser

You’re now ready to open the code in your favorite editor. The src folder contains all you need to tweak the app: the main.js file:

Editor

This file is the entry point and in this case initializes the App component, which is defined in App.svelte, a single file component:

<script>
export let name;
</script>

<style> h1 { color: purple; } </style>

<h1>Hello {name}!</h1>

If you are familiar with Vue.js, it’s a similar concept. You define the markup, the style and the JavaScript for each component in a single .svelte file.

Download my free Svelte Handbook


More svelte tutorials: