Svelte Hello-world

Svelte is a opensource javascript compiler that results in high performance and reduced javascript code/.

It is Less bundle in size compared with other framework 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 an repository to clone to

HelloWorld is a n ame of the project

directory structure

Here is an 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

> svelte-app@1.0.0 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...

> svelte-app@1.0.0 start
> sirv public --no-clear "--dev"


  Your application is ready~! 🚀

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

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

It started 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. Component is a reusable code using HTML,CSS and Javascript. It can be individual component as well as web page.

Each component contains three sections

  • script
  • main
  • style
<script>
</script>

<main>
</main>

<style>
	
</style>

Visual studio code

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

I opened project in VSCode. installed

Advantages

High performance Small package