Get started with SvelteKit | InfoWorld

So-called metaframeworks like Next.js and Gatsby have taken off in the last few years. This article introduces you to one of the most recent examples, the SvelteKit framework for Svelte. Like Next.js before it, SvelteKit provides an all-in-one, full-stack platform for building reactive web apps.

SvelteKit is the successor to Sapper, the previous generation of the full-stack prerendering framework for Svelte.

What is SvelteKit?

The idea behind SvelteKit is to roll together a front end and back end and obtain the best of both worlds. In addition to making for a simple build process (because the entire stack is combined), SvelteKit provides the following benefits out of the box:

  • Server-side rendering
  • Code splitting
  • Client-side routing
  • Simplified data pre-fetching
  • One-command static-site export
  • Full-stack hot deploy (dev mode)

The trade-off for these benefits is a steeper learning curve: You have to accept and absorb the conventions that the framework uses to tie together the two elements of the application. These conventions are not terribly onerous, however, and once mastered, development moves along at a snappy pace.

To begin exploring, we will start with the default SvelteKit app template. (If you want to follow along, the whole sample app is available here.) We’ll use the template with Rollup (Webpack is also available). In a console, type

npm init svelte@next svelte-kit-intro

Now move into the newly created /svelte-kit-intro directory and run npm install to install the Node.js modules.

Copyright © 2021 IDG Communications, Inc.

Source link