sveltekit is a framework to build a full-stack application with features such as server-side rendering + svelte.

Svelte is a component library similar to React SvelteKit is a framework similar to Next.js to build static applications

It provides the following features

Sveltekit advantages

  • Server-side rendering and Single Page Application development
  • Code splitting
  • SEO
  • Build optimizations
  • Progress app features such as offline, prerender
  • Supports pre-generate HTML in the server as well as in-browser at build/run time
  • It is faster development and development loading is good

Sveltekit disadvantages

  • Still in development, mature not enough
  • Lack of documentation
  • community support is limited and small
  • Limited toots for a full-stack development

How to Create an application with sveltekit

Run the below command to create an application

npm init svelte@next sveltekitexample
A:\work\w3schools\svelte\sveltekitexample>npm init svelte@next .
Need to install the following packages:
  create-svelte@next
Ok to proceed? (y) y

create-svelte version 2.0.0-next.122

Welcome to SvelteKit!

This is beta software; expect bugs and missing features.

Problems? Open an issue on https://github.com/sveltejs/kit/issues if none exists already.

√ Where should we create your project?
  (leave blank to use the current directory) ...
√ Which Svelte app template? » SvelteKit demo app
√ Use TypeScript? ... No / Yes
√ Add ESLint for code linting? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
√ Add Playwright for browser testing? ... No / Yes

Your project is ready!
✔ ESLint
  https://github.com/sveltejs/eslint-plugin-svelte3
✔ Prettier
  https://prettier.io/docs/en/options.html
  https://github.com/sveltejs/prettier-plugin-svelte#options
✔ Playwright
  https://playwright.dev

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-adders

Next steps:
  1: npm install (or ppm install, etc)
  2: git init && git add -A && git commit -m "Initial commit" (optional)
  3: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat.

Next, Run dependencies using the npm install command.

npm install

Now, Run the server by typing the command.

npm run dev

Here is an output

A:\work\w3schools\svelte\sveltekitexample>npm run dev

> [email protected] dev
> svelte-kit dev

Pre-bundling dependencies:
  svelte
  svelte/store
  svelte/transition
  svelte/animate
  svelte/motion
  (...and 2 more)
(this will be run only when your dependencies or config have changed)

  SvelteKit v1.0.0-next.288

  network: not exposed
  local:   http://localhost:3000

  Use --host to expose a server to other devices on this network.