Svelte - Setup

Svelte is a new JS framework in town, which does things a bit differently than React and Vue. Instead of the work these frameworks do in browser, svelte moves most of the heavy lifting to compile time, to improve performance.

Its use in embeddable devices says it's foot print and performance. Let's see how to setup a basic Svelte app.

npx degit sveltejs/template svelte-start
cd svelte-start

it will create a folder svelte-start with all the required local server setup with rollup configuration

.
├── README.md
├── package.json
├── public
│   ├── favicon.png
│   ├── global.css
│   └── index.html
├── rollup.config.js
└── src
    ├── App.svelte
    └── main.js

next install the dependencies and start the local server.

npm install
npm run dev

it will startup the local server. Notice under `src` folder there are 2 files

- App.svelte
- main.js

App.svelte is something similar to JSX it compiles to JS. It holds style, script  scoped to the component.

main.js is the entry point.

You can play around codesandbox here.