First, you have to know what Svelte is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the introductory blog post, you should!
Sapper is a Next.js-style framework (more on that here) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:
It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.
Create a new project, using degit:
npx degit "sveltejs/sapper-template#rollup" my-app - cd my-app - npm install # or yarn! - npm run dev -
Go to localhost:3000. Open my-app in your editor. Edit the files in the src/routes directory or add new ones.
my-app
src/routes
...
Resist overdone joke formats.
In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as sappers.
For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for Svelte app maker, is your courageous and dutiful ally.
Next.js is a React framework from Vercel, and is the inspiration for Sapper. There are a few notable differences, however:
src/routes/blog/[slug].svelte
routes
.js
request
response
<a>
<Link>
We're so glad you asked! Come on over to the Svelte and Sapper repos, and join us in the Discord chatroom. Everyone is welcome, especially you!
This is the 'esports' page.
Try editing this file (src/routes/index.svelte) to test live reloading.
Try editing this file goteem to test live reloading.
Stream Stuff Lives Here