Sapper Template

Get hands-on experience on how to add the Sapper template to your web application.

Adding the Sapper template

Now that we have a GitHub repository and we have discussed the advantages of using Sapper as our backend web service, it’s time to set up the development environment. Press Run and a terminal will appear. Your job is to run the commands from the following sections in the terminal. It is important to run them in the given sequential order.

Create a new branch

As we will see when we talk about CI/CD, we want to do all the work in pull requests, no matter how small the changes are. Create a new branch:BRANCH

git switch -c add-the-web-application

Add the web service

Any service needs to be in the ./services directory. In the new add-the-web-application branch, create the services directory and change your directory into it:

mkdir services
cd $_ // The $_ is a special variable that is set to the final argument of the previously executed command (i.e. "services" directory in our case).

The instructions on the Sapper website instruct us to use npx degit to clone the Sapper template.

What is npx degit?

Let’s look at the two independently.

  • npx: Built-in with npm, it is an npm package executor. If the given command, degit in our case, does not exist, npx installs it.

  • degit: Copies a git repository.

Now, run the following commands to clone the Sapper template.

npx degit "sveltejs/sapper-template#rollup" web
  • "sveltejs/sapper-template#rollup": The path to the sveltejs GitHub repository to clone the Sapper template, which creates a new Sapper project based on Rollup locally.

  • web: The name of the directory in which the repository will be cloned.

Get hands-on with 1200+ tech skills courses.