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.