In this tutorial, we will explore how to get started with Svelte, a JavaScript framework that offers a unique approach to building web applications. Unlike other frameworks like React, Vue, and Angular, Svelte compiles your app beforehand. This means that your site visitors don’t need to download the framework and library code, resulting in a smoother user experience with lower bandwidth usage.

Just like using Hugo as a static site generator, where the generated pages are plain HTML, Svelte also disappears at deployment, leaving you with plain JavaScript.

Now let’s dive into how to get started with Svelte.

Prerequisites

Before you begin, make sure you have Node.js installed on your machine. If you don’t have it, you can check out my previous post on how to install Node.js. Additionally, ensure that you have the latest version of Node.js installed. If not, you can refer to how to update Node.js for instructions.

Setting up a Svelte project

Node.js comes with a convenient command called npx that we’ll use to run Svelte commands. To initialize a new Svelte project, open your terminal or command prompt and run the following command:

npx degit sveltejs/template firstapp

This command will download and run the degit command, which in turn downloads the latest Svelte project template from https://github.com/sveltejs/template into a folder named firstapp.

Navigate to the firstapp folder in your terminal and run the following command to install additional dependencies:

npm install

At the time of writing, the project template has the following dependencies:

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

These dependencies include the Svelte core, Rollup (a Webpack alternative), and some related plugins. Additionally, the npm-run-all package is used as a CLI tool for running multiple npm scripts in parallel or sequentially.

Running the Svelte app in development mode

To start the Svelte app in development mode, run the following command:

npm run dev

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

CLI

If you open your browser and navigate to http://localhost:5000, you should see the “Hello world!” example.

Browser

Now that our Svelte app is up and running, let’s explore the code in your favorite editor. The src folder contains all the files you need to tweak the app. The entry point is the main.js file.

Editor

In the main.js file, you will find the initialization of the App component, which is defined in the App.svelte file. This file represents a single file component, where you can define the markup, style, and JavaScript for each component.

<script>
export let name;
</script>

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

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

If you are familiar with Vue.js, you will find that the concept is similar. Each component is defined in a single .svelte file, encapsulating the markup, style, and JavaScript logic.

Congratulations! You have successfully set up a Svelte project and explored the basic structure of a Svelte app. Now, you can start building your own Svelte applications.