Description: https://images.manning.com/360/480/resize/book/5/d3ed2a4-e017-493e-beb6-776c7e2c5cbe/Volkmann-Svelte-HI.png

From Svelte and Sapper in Action by Mark Volkmann

This article delves into the Svelte REPL.

Take 40% off Svelte and Sapper in Action by entering fccvolkmann into the discount code box at checkout at manning.com.

Check out part one for the basics of Svelte REPL.

Saving REPL apps

To save apps created in the REPL to be recalled in the future, click “Log in to save” in the upper-right. This opens the browser window shown below.

Figure 1. REPL Log in to save

Enter your GitHub username and password and press the “Sign in” button.

Figure 2. REPL Sign in

If you don’t already have a GitHub account, browse https://github.com/ and press the large, green “Sign up for GitHub” button to begin the process of creating a free account.

Figure 3. GitHub Sign up

To save the current app, enter a name for it on the left side of the gray bar at the top and press the floppy disk icon. Pressing ctrl-s (or cmd-s on macOS) also saves the app.

Figure 4. REPL save button

To load a previously saved app, hover over your user name in the upper-right and click “Your saved apps”.

Figure 5. REPL Your saved apps

This displays a list of saved app names. Click one to load it.

To make a copy of the current app to modify it without changing the current app, press the “fork” icon.

Figure 6. REPL fork button

Currently it isn’t possible to delete saved REPL apps. This feature has been requested. See https://github.com/sveltejs/svelte/issues/3457. Until it’s added, consider renaming REPL apps you no longer need to something like “delete me”.

Sharing REPL apps

To share a REPL app with other developers, copy its URL from the browser address bar.

Then provide it to others via chat, text message, or email. They can modify the REPL app and save the changes as their own app, but they can’t modify your version of the app.

Sharing REPL apps is great for asking questions in the Svelte Discord chat. Post a question along with a REPL URL.

REPL URLs

The URL of every REPL app ends with a query parameter named “version” that specifies the version of Svelte being used. It defaults to the newest version. You can change this to test the REPL app with a different version of Svelte.

This is particularly useful if you suspect a bug has been introduced in Svelte. You can try the REPL app in several versions and determine if its behavior changes.

Exporting REPL apps

At some point in the development of an app in the REPL, you may want to break out of the REPL. Many reasons explain why you should do this:

  • To avoid the limitations of the REPL described in the next section
  • To manage the project in a source control system such as Git
  • To use a build system (such as npm scripts) for tasks such as building the app for deployment and running unit/end-to-end tests

To download the current app to continue developing it locally, press the download icon.

Figure 6. REPL download button

This downloads a zip file whose name defaults to svelte-app.zip.

To run the app locally:

  1. If not already installed, install Node.js from https://nodejs.org.

This installs the node, npm, and npx commands. unzip this file,

  1. Unzip the downloaded zip file.
  2. cd to the directory it creates.
  3. Enter npm install
  4. Enter npm run dev to run the app in development mode.

Using npm packages

REPL apps can import from npm packages. For example, to use the capitalize function from the lodash package:

 
 import capitalize from 'lodash/capitalize';
 

Call this function with capitalize(someString).

Alternative the entire library can be imported.

 
 import _ from 'lodash';
 

With this kind of import, call the capitalize function with _.capitalize(someString).

The REPL obtains npm package code from https://unpkg.com which is a content delivery network (CDN) for all the packages in npm.

To import a specific version of an npm package, follow the name with @ followed by the version. For example:

 
 import _ from 'lodash@4.16.6'
 

REPL limitations

The Svelte REPL is great, but it has some limitations. It can’t do these things:

  • Delete a selected saved project.
  • Sort saved projects on name or date.
  • Filter the list of saved projects based on text in a project name or text found in one of their files.
  • Edit the provided files src/main.js and public/global.css.

CodeSandbox

CodeSandbox provides an alternative to the Svelte REPL for building Svelte applications without downloading or installing anything. This is an online version of the VS Code editor.

To use it, browse https://codesandbox.io. No signup is required. To enable saving work, sign in with your GitHub account.

To create a Svelte project, click “+ Create Sandbox”. Under “Official Templates”, select “Svelte”.

To enable Vim keybindings, select File … Preferences … CodeSandbox Settings … Editor and toggling “Enable VIM extension” to on.

One advantage of using CodeSandbox over the REPL is that you can create .js files in addition to .svelte files.

Apps developed in CodeSandbox can be deployed to Netlify or ZEIT Now by clicking the left nav. button containing a rocket icon, expanding either the “Now” or “netlify” section, and clicking the “Deploy” button. This takes a couple of minutes to complete. For Now, click the supplied link to visit the new app. For Netlify, click the “Visit” button to visit the new app and click the “Claim” button to add the app to your Netlify dashboard.

CodeSandbox supports a “Live” mode where you can live edit the files of an application collaboratively with others.

If you want to learn more about the book, check it out on Manning’s liveBook platform here.