Svelte Hello-world

Svelte is an open-source javascript compiler that results in high performance and reduced javascript code/.

It is Less bundle in size compared with other frameworks such as React, VueJS, and Angular.

A:\work\w3schools\svelte>npx degit sveltejs/template HelloWorld
Need to install the following packages:
Ok to proceed? (y) y
> cloned sveltejs/template#HEAD to HelloWorld

sveltejs/template is a repository to clone to a local folder

HelloWorld is the name of the project.

svelte application directory structure

Here is a folder structure

│   .gitignore
│   package-lock.json
│   package.json
│   rollup.config.js
│   │   favicon.png
│   │   global.css
│   │   index.html
│   └───build
│           bundle.css
│           bundle.js
│       setupTypeScript.js

Running Svelte project

Run the below command to run

npm run dev
A:\work\w3schools\svelte\HelloWorld>npm run dev

> [email protected] dev
> rollup -c -w

rollup v2.63.0
bundles src/main.js → public\build\bundle.js...
LiveReload enabled
created public\build\bundle.js in 390ms

[2022-01-04 17:53:20] Waiting for changes...

> [email protected] start
> sirv public --no-clear "--dev"

  Your application is ready~! 🚀

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

It started the server and listened at http://localhost:5000

App.svelte is a main component.

In Svelte, Everything writes in the form of components, and the component extension is .svelte. The component is reusable code using HTML, CSS, and Javascript. It can be an individual component as well as a web page.

Each component contains three sections.

  • script
  • main
  • style




Visual studio code

You can open the project in Visual Studio Code Atom or Webstorm.

I opened the project in VSCode. installed


High performance Small package