# Using Sapper with Nacelle

Sapper (opens new window) is a Svelte (opens new window)-based framework for generating Progressive Web Applications.

# nacelle-sapper-sample

# The Basics

The nacelle-sapper-sample repo (opens new window) is the source for this project.

At the moment, the nacelle-sapper-sample project is a very bare-bones project that handles the following operations out of the box:

  • Fetch product & collection data & display them
  • Fetch Navigation data & display it
  • Add products to a cart & checkout

More features can easily be added to it such as a connection to CMS data (more on this later).

# Getting started

At the root of the project start by adding an .env file with the following vars:

NACELLE_SPACE_ID="xxx"
NACELLE_GRAPHQL_TOKEN="xxx"
DEV_MODE="development"

Then run npm i to download all the dependencies needed.

For development: run the project locally with npm run dev

For production or testing: generate the website by running npm run export. Once the the files have been generated, use the following command to run it locally npx serve __sapper__/export

# Fetching data from Nacelle

If you would like to extend the functionality for this project you can use Nacelle's Storefront GraphQL API (opens new window).

This will allow you to fetch data that we indexed from your PIM or CMS