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 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
<script>
</script>
<main>
</main>
<style>
</style>
Visual studio code
You can open the project in Visual Studio Code Atom or Webstorm.
I opened the project in VSCode. installed
Advantages
High performance Small package