Laravel & Sapper (Part 2) – What’s Sapper to you?

Tram Ho

To continue the article about Svelte. In this article, let’s learn about Sapper . This is the Svelte framework.

The first is the Directory Structure of 1 Sapper project. We will go over this structure and see if Sapper is any good

1. package.json

Similar to Vue, React, this is the config file the libraries need to use.

Note: Add the line "private": true to the file to correct the warning package.json: No license field .

2. src

src / client.js

This file will import the sapper library for use by the web

The api client sapper functions include:

  • start ({target})
    • target – a page element
    • return Promise

    The config router function and starts the app – listens for the events of the <a> tag, interacts with the history API, renders and updates the components.

    For example

  • goto (href, options?)
    • href – the page to go to
    • options – not required

    The function handles page navigation when the user clicks on the <a> tag with the corresponding href and returns a Promise

  • prefetch (href)
    • href – the page to prefetch

    Prefetch the page when the user clicks the <a> element with rel=prefetch .

  • prefetchRoutes (routes?)
    • routes – an optional array of strings representing routes to prefetch

src / server.js

This file will process the web connection with the server.

Sapper uses the Polka library, which is a native HTTP server, similar to axios , which supports the server-side api invocation.

For example


This is a template file for the response returned from the server. Sapper will inject content into the file when a response is returned.

src / routes Unlike Vue and React, this is the directory of the application’s pages. The route is defined by the structure and filename of the pages.

3. stattic

Folder contains any files, such as images, favicons, …

4. rollup.config.js / webpack.config.js

This is the application configuration file, similar to Vue and React

5. Systax Svelte component

Each svelte component includes 3 parts:

  • code elements
  • code style: declare with <style> tag
  • script code: Declare with <script> tag

The structure of a svelte file is similar to Vue, however, svelte k needs to declare the element in the <template> tag as Vue.

For example:

Svelte has the same script declaration syntax as Vue, if you have used Vue, learning Svelte is even simpler.

As the introduction, Sapper is a Nextjs type, so for you who have a lot of exposure to frameworks, Sapper seems nothing special. In the next article, I will learn more about Svelte’s DOM render processing. Hopefully there will be something interesting.


Share the news now

Source : Viblo