Svelte JS and SvelteKit Setup and Example Application Overview

Purpose : In this example tutorial we going to learn about sveltekit and how to set up application environment

Svelte JS

1. What is Svelte JS and SvelteKit
2. Create sample demo application
3. IDE extension for svelte js applications
4. Project Structure

My Setup

Node version — v18.12.1

NPM version — 9.2.0

VS Code IDE

Overview

1. Svelte JS and Svelte Kit

a. It is open source front end development framework created by Rich Harris

b.Its light wight framework with fast performance

c. Reduces boilerplate code so developers can concentrate on actual logic

d. It doesn't use virtual DOM , compiles code into simple java script , so it will help in boosting performance

e. Svelte Kit is built on top of svelte to make web development easier and effective . please refer more documentation in official website https://kit.svelte.dev/

2. Creating Sample Application

We can create application using following simple commands (make sure you installed node/npm in your system )

a. Go to required folder where project to be created then run , it will ask you for some of options showing YES/NO for plug/template installation . please provide same (have added sample screenshot below )

npm create svelte@latest my-demo-app

b. Once you get above required output , navigate to project folder and run following commands (added screenshot below )

cd my-demp-app (my-demo-app is my application name )
npm install
npm run dev

you can see in above command line result application is started and running on http://localhost:5173/ with following page to display .

3. Svelte VS Code IDE Extension

we can use svelte code extension for our IDE , for example as am using Visual Studio Code for my development so we can use Svelte for VS Code extension like below

Once you import project in VS code project structure of created project looks like below

THANK YOU . In next article will explain each individual components in project structure of the application .