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.
If you open your browser and navigate to http://localhost:5000
, you should see the “Hello world!” example.
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.
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.