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:
  degit
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
│   README.md
│   rollup.config.js
├───public
│   │   favicon.png
│   │   global.css
│   │   index.html
│   └───build
│           bundle.css
│           bundle.js
│           bundle.js.map
├───scripts
│       setupTypeScript.js
└───src
        App.svelte
        main.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 listen at http://localhost:5000

App.svelte is a main component.

In Svelte, Everything writes in a form of components, and 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
<script>
</script>

<main>
</main>

<style>
 
</style>

Visual studio code

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

I opened the project in VSCode. installed

Advantages

High performance Small package