× Search About Posts Code Music Links
Blank Try
experiment
lots
learn
more

Svelte Notes

Updated on
Last site update: 8 May 2024

Unfinished article

What is it?

Svelte works in a similar way to JavaScript frameworks like React and Vue. But it’s not a framework it’s a compiler. This means when building it works in a similar way the final website or project is compiled down to plain HTML, CSS and JavaScript. This makes it faster than other frameworks. It also has a really nice, easy to learn syntax.

Setting up

There are several ways to set up Svelte but the best probably at the moment is to use Vite.

Go your projects or website directory and type:

1npm init vite@latest

You choose a name for your project and that will be the name of the folder created to house it in.

You then select the framework to use and choose svelte or svelte-ts if you want to use TypeScript.

Next change directories to that of your new project:

1cd new-project-name
2npm install # to install dependencies
3npm run dev

Your new project should be running on localhost:3000.

Directories

You should then have directories and files like this:

├── .vscode
├── node_modules/
├── public/
│    └── favicon.ico
├── src/ # source code - where you develop your app
│    └── svelte.png
├── .gitignore
├── index.html  # Main app file
├── jsconfig.json
├── package-lock.json
├── package.json
├── README.md
└── vite.config.js

See MDN for a detailed description of what the files are for.

In the src folder is a folder called lib and in this is a file called App.svelte and main.js

The main.js has the following:

1import App from './App.svelte'
2
3const app = new App({
4  target: document.getElementById('app')
5})
6
7export default app

In this case the whole of the Svelte app is inside an HTML element with the id of app. This should be in the index.html file: <div id="app">

Sources for learning Svelte

decode Lesson 3 24 lessons on Youtube.

▲