2 Your first Svelte app

 

This chapter covers

  • Using the Svelte REPL
  • Developing a Svelte app outside the REPL
  • Developing a simple Todo app

In this chapter, you will learn everything you need to know to experiment with Svelte without having to download or install anything. This will be accomplished using a web-based REPL tool.

REPL stands for read, evaluate, print, loop. A REPL reads the code you enter, evaluates it (possibly compiling and reporting errors), prints the result of the code, and loops to allow for repeating this process. There are REPLs for many programming languages and web frameworks.

The REPL is a perfect gateway to developing larger apps locally, outside of the REPL, using common programming editors such as VS Code. This chapter will cover how to download REPL apps for further local development and how to create an app from scratch without using the REPL.

By the end of the chapter, you will be ready to start developing your own Svelte applications.

2.1 The Svelte REPL

Svelte provides a browser-based REPL that supports defining Svelte components, seeing their rendered output, and more. Using the REPL is the easiest way to experiment with Svelte. Your first Svelte application is just a click away!

To get started, browse to the main Svelte website at https://svelte.dev/. Then click the REPL link near the upper-right corner of the page.

2.1.1 Using the Svelte REPL

2.1.2 Your first REPL app

2.1.3 Saving REPL apps

2.1.4 Sharing REPL apps

2.1.5 REPL URLs

2.1.6 Exporting REPL apps

2.1.7 Using npm packages

2.1.8 REPL limitations

2.1.9 CodeSandbox

2.2 Working outside the REPL

2.2.1 Starting with npx degit