Create a Svelte project from scratch using Vite

In this blog post, the Svelte project is created from scratch using Vite.

What is Svelte?

Svelte is a free and open-source front-end compiler created by Rich Harris and maintained by the Svelte core team members. Svelte compiles HTML templates to specialized code that manipulates the DOM directly, which may reduce the size of transferred files and give better client performance. The Svelte components are written using HTML, CSS, and JavaScript, and during the build process, the Svelte compiles them into tiny standalone JavaScript modules.

Svelte

What is Vite?

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

• A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).
• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Vite

Getting Started

To create a new Svelte project, the following npm command will be used.

npm init vite@latest

The command prompt will ask to install create-vite@latest and confirm it to install. Then enter the desired project name, and select a framework and variant. For the svg-editor project, Svelte framework and Typescript variant is used.

#:~$ npm init vite@latest
√ Project name: ... svg-editor
√ Select a framework: » Svelte
√ Select a variant: » TypeScript

Now change the directory to project, install dependencies, and run the project.

cd project-name
npm install
npm run dev 

Vite + Svelte + TS project