ā± This tutorial should take less than 5 minutes.
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.
Click the Deploy to Begin button below.
Name your app and click the 'Create...' button to have Begin create a new app and GitHub 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.
You should see something like the image below:
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
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.
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!
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!