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.5 KiB
| title | description | author | authorURL |
|---|---|---|---|
| The easiest way to get started with Svelte | This'll only take a minute. | Rich Harris | https://twitter.com/Rich_Harris |
Svelte is a new kind of framework. Rather than putting a <script src='svelte.js'> tag on the page, or bringing it into your app with import or require, Svelte is a compiler that works behind the scenes to turn your component files into beautifully optimised JavaScript.
Because of that, getting started with it can be a little bit confusing at first. How, you might reasonably ask, do you make a Svelte app?
1. Use the REPL
The Svelte REPL (Read-Eval-Print Loop) is the easiest way to begin. This is an interactive environment that allows you to modify code and instantly see the result.
You can choose from a list of examples, click the REPL link, and then tweak them until they do what you want.
At some point, your app will outgrow the REPL. Click the download button to save a svelte-app.zip file to your computer and uncompress it.
Open a terminal window and set the project up...
cd /path/to/svelte-app
npm install
...then start up a development server:
npm run dev
This will serve your app on localhost:8080 and rebuild it with Rollup every time you make a change to the files in svelte-app/src.
2. Use degit
When you download from the REPL, you're getting a customised version of the sveltejs/template repo. You can skip messing around with zip files by using degit, a project scaffolding tool.
In the terminal, you can instantly create a new project like so:
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
# to use TypeScript run:
# node scripts/setupTypeScript.js
npm install
npm run dev
This will create a new project in the my-svelte-project directory, install its dependencies, and start a server on http://localhost:8080.
You can find more information about using TypeScript here.
Once you've tinkered a bit and understood how everything fits together, you can fork sveltejs/template and start doing this instead:
npx degit your-name/template my-new-project
And that's it! Do npm run build to create a production-ready version of your app, and check the project template's README for instructions on how to easily deploy your app to the web with Vercel or Surge.
You're not restricted to using Rollup — there are also integrations for webpack, Browserify and others, or you can use the Svelte CLI (Update from 2019: with Svelte 3 the CLI was deprecated and we now use sirv-cli in our template. Feel free to use whatever tool you like!) or the API directly. If you make a project template using one of these tools, please share it with the Svelte Discord chatroom, or via @sveltejs on Twitter!