Svelte


ā± This tutorial should take less than 5 minutes.

Hello there, Beginner!

This tutorial will help you get acquainted with Begin's Svelte example app which uses Svelte as the front-end framework for an app that talk's to a cloud function-based API.

āœ‹šŸ½ You will need git, node.js and a GitHub account to follow along.


Create your Svelte app

Click the Deploy to Begin button below.

Deploy to Begin

Name your app and click the 'Create...' button to have Begin create a new app and GitHub repo.

Name your Begin app and repo


Check out your apps' activity feed!

Now click the Staging link in the upper left corner to see your app running in your staging environment.

Begin Activity view


You should see something like the image below: Svelte


Way to go!

Now go back to Begin and follow the prompts on the intro cards to see the system in action.

šŸ’” Learn more about CI/CD environments


Project structure

If you followed the intro cards in the activity view you are ready to review your project's structure on your local machine.

.
ā”œā”€ā”€ api/
ā”‚   ā””ā”€ā”€ index.js
ā”œā”€ā”€ public/
ā”œā”€ā”€ src/
ā”‚   ā”œā”€ā”€ App.svelte
ā”‚   ā””ā”€ā”€ main.mjs
ā””ā”€ā”€ rollup.config.js

Let's go over each of these directories to see how they are used.

api/

This directory contains a handler function for the API. The handler function defined in api/index.js returns a response when HTTP requests are made to /api

šŸ’” Learn more! Head here to dig deeper into HTTP functions in Begin apps.

public/

The public directory is where you'll add images and any other static assets or files you want to make publicly accessible in your app.

Each time your app deploys, the contents of this folder will automatically be published to your app's static asset bucket on S3 and Begin's CDN.

This is also where your component-level CSS & JS are bundled, as well as your app's global CSS, which affects the entirety of your app's styling.

āš ļø Exercise caution! The full contents of this folder will be copied with each deploy, overwriting any existing files with the same name.

src/main.js

The main entry point for your Svelte app, src/main.js imports your App.svelte file (your root app component). In this example, we initialize your app to document.body and pass it a prop to demonstrate how props can be passed along to different components inside of your app.

src/App.svelte

src/App.svelte is what's referred to as a single file component ā€“ it contains all of the code needed to display your frontend. The opening <script> tag contains JavaScript, and in this example it receives in props from src/main.js:

<script>
  import { onMount } from 'svelte'
  export let name;
  export let message;
  onMount(async () => {
    let data = await (await fetch('/api')).json()
    message = data.msg
    console.log('MESSAGE: ', message)
  })
</script>

Right below the <script> tag we have a section for our HTML ā€“ <main> ā€“ which can render variables from your script tag inside {curly brackets}:

<main>
  <h1>Hello {name}!</h1>
  <h2>{message}</h2>
  <h3>Change me!</h3>
  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

Lastly, at the bottom of src/App.svelte we have a <style> tag, which contains all the CSS for this specific component.

rollup.config.js

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It allows us to use ES modules import syntax so that we may create component-based applications. This config file bundles all of your component-level CSS and JS into the public directory.


Using API endpoints

Extending your Svelte app with HTTP functions may be why you're here, right? Let's take a look at how all this works.

Let's start with the src/App.svelte code inside <script> tag found below. When the component renders initially into a page or "mounts", we're able to use what's called a lifecycle method called onMount, which is provided by the Svelte framework. Inside this onMount handler we fetch data from /api and then set the variable named message with the returned data. We're now able to pass this variable into our HTML as props so that it displays a message from our HTTP function. Not bad, right?

// src/App.svelte

// JavaScript
<script>
  import { onMount } from 'svelte'
  export let name;
  export let message;
  onMount(async () => {
    let data = await (await fetch('/api')).json()
    message = data.msg
    console.log('MESSAGE: ', message)
  })
</script>

// HTML
<main>
  <h1>Hello {name}!</h1>
  <h2>{message}</h2>
  <h3>Change me!</h3>
  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

This is just one small example of how using a live API endpoint powered by an HTTP function can make your Svelte app dynamic. Just think of all the things you can build this way!


Congratulations!

You've now got a shiny new Svelte app hosted on Begin ā€“ nice work.

Now go show it off ā€“ people need to see this thing!


Additional resources