993b40201c
* New FAQ, new renderer * Push blog stuff * Fix blog posts * Add tutorial to be rendered * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Revamp a lot of renderer, make it (soft) compatible with sveltekit * Remove markdown types * Clean up faq +page * Document stuff * Make the options more explicity * chore(site-2): Restructure docs pt 2 (#8604) * Push * Update readme * Push * inor accessibility fix * minr stuff * Add prepare * Run prettier * Remove test script * pnpm update * Update sites/svelte.dev/src/routes/examples/[slug]/+page.svelte Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update sites/svelte.dev/package.json Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
3.9 KiB
| title |
|---|
| Introduction |
Welcome to Svelte docs. These are for folks who are already familiar with Svelte and want to learn more about the details of how it works.
If that's not you (yet), you may prefer to visit the interactive tutorial or the examples before consulting this reference.
Don't be shy about asking for help in the Discord chatroom.
Using an older version of Svelte? Have a look at the v2 docs.
Start a new project
To try Svelte in an interactive online environment you can try the REPL or StackBlitz.
To create a project locally we recommend using SvelteKit, the official application framework from the Svelte team:
npm create svelte@latest myapp
cd myapp
npm install
npm run dev
SvelteKit will handle calling the Svelte compiler to convert your .svelte files into .js files that create the DOM and .css files that style it. It also provides all the other pieces you need to build a web application such as a development server, routing, and deployment. SvelteKit utilizes Vite to build your code and handle server-side rendering (SSR). There are plugins for all the major web bundlers to handle Svelte compilation, which will output .js and .css that you can insert into your HTML, but most others won't handle SSR.
Alternatives to SvelteKit
If you don't want to use SvelteKit for some reason, you can also use Svelte with Vite (but without SvelteKit) by running npm init vite and selecting the svelte option. With this, npm run build will generate HTML, JS and CSS files inside the dist directory. In most cases, you will probably need to choose a routing library as well.
Differences from SvelteKit
Svelte renders UI components. You can compose these components and render an entire page with just Svelte, but you need more than just Svelte to write an entire app.
SvelteKit provides basic functionality like a router — which updates the UI when a link is clicked — and server-side rendering (SSR). But beyond that, building an app with all the modern best practices is fiendishly complicated. Those practices include build optimizations, so that you load only the minimal required code; offline support; preloading pages before the user initiates navigation; configurable rendering that allows you to render different parts of your app on the server with SSR, in the browser client-side rendering, or at build-time with prerendering; and many other things. SvelteKit does all the boring stuff for you so that you can get on with the creative part.
It reflects changes to your code in the browser instantly to provide a lightning-fast and feature-rich development experience by leveraging Vite with a Svelte plugin to do Hot Module Replacement (HMR).
Editor tooling
The Svelte team maintains a VS Code extension and there are integrations with various other editors and tools as well.
If you're having trouble, get help on Discord or StackOverflow.