Fullstack Svelte Course Overview

Introduction

Setting up your local development environment

Setting Up a Svelte Local Development Environment

How to Initialize a Boilerplate Svelte Project

Setting Up a Formatter and Linter for Svelte Development

Setting Up A Development Environment

Setting up a Single Page Application Router

An Introduction to Svelte Routing for Single Page Applications

Creating a Front End Layout for Admin Pages

Front End Layouts - Creating Reusable Parent Components

Front End Routing

Using Front End Component Libraries for Svelte Development

Learn Svelte - How to Create a Basic Landing Page

Using Svelte to handle DOM events and bind inputs

A Guide to Handling DOM Events and Input Binding with Svelte

User Interface Styles and Interactions

Initialize an Express Node.js Project for Svelte Development

Creating REST API GET, POST, PUT, and DELETE Requests

School Lunch Data Model

Creating the Backend Application

Fetching Data from the Frontend with Axios

How to Use Axios to Fetch Data From APIs for Svelte Apps

Using Svelte Each Blocks to Iterate a List

Svelte 'each' Blocks - Loop Through an Array and Update a DOM

Using Svelte to Show and Hide Loading Spinner Icons

Externalizing Frontend Configuration

Fetching Data in the Frontend

Installing PostgreSQL Locally to Add Persistence to a Svelte App

Configuring Knex js Migrations for Database Management Scripts

How to Use Knex js in an Express Backend App

Adding Post, Put and Delete Endpoints to the Backend

Sveltekit Endpoints - How to Use Post, Put, and Delete

Adding Persistence with PostgreSQL

Cleaning Up the Front End of a Single Page Application in Svelte

Building a Form in Svelte That Lets Users Create Data Entities

The Lunch Week Details Component

Creating, Updating and Deleting Data in the Frontend

Securing the application with JSON Web Tokens

Securing a Svelte Application with JSON Web Tokens

Evolving the App to a Multi Tenant Architecture

Get Started Creating a Multi Tenant Application in Svelte

Creating a User Signup Flow for a Multi Tenant Svelte App

Securing the Application

Public Lunch Week Page

Public Lunch Menu View

Building Svelte Single Page Applications and Serving Static Files

Production Deployment

This course teaches all the major concepts you need to build a production ready SaaS application by step by step _building a fully functional application_. The course is divided into two main parts - the _frontend_, which uses Svelte to build an interactive, rich user interface and the _backend_, which uses Express and PostgreSQL to build a server that handles data management.

Svelte is an exciting new frontend UI framework that offers a very developer friendly workflow and easy to learn syntax. Express and PostgreSQL are tried-and-true technologies that provide a rock solid backend.

Across about 7 hours of video instruction with full source code, this course covers everything from setting up your development environment to securing your application with a multi-tenant architecture and ultimately deploying the application to production.

Build a Svelte app with Node.js, Express, and Postgresql

In this course, we'll be creating a full stack SaaS application with Svelte, Express and PostgreSQL

Fullstack Svelte

Persistence with a relational PostgreSQL database

Frontend create, read, update and delete operations

How to integrate Auth0 for JWT authentication

In this lesson, we are going to learn how to use our frontend Svelte application to fetch data from our backend Express endpoints. The following is a common use case in web applications:

There is a lot going on in the above steps, but Svelte makes it easy to dynamically update the UI with spinner icons and data. We will also use a library called Axios that makes HTTP network calls in JavaScript.

We will follow the above example steps to fetch our 

 to the script and to the markup under the 

 and get the front end started, then bring up the manage-menus route.

As a reminder, the frontend dev server runs on port 5000. Here's the link to the manage-menus route we used before 

In the Front End Routing module, we discussed the Svelte 

 is a good place to set up component initialization code, such as fetching data from a server.

Axios gives us an easy syntax to fetch data from APIs:

import axios from 'axios'

onMount(async () => {
  try {
    let response = await axios.get('https://an-api-route')
    let data = response.data
  } catch (e) {
    console.error('Error fetching data')
  }
})

While the above syntax looks pretty straightforward, there is some complexity lurking under the covers. An important concept in the above code is the usage of 

 and wait for the line of code to finish. The next line of code can execute prior to the previous line finishing.

---
title: How to Use Axios to Fetch Data From APIs for Svelte Apps
description: Fetching Data from the Frontend with Axios
privateVideoUrl: https://fullstack.wistia.com/medias/hnbbkrx8e4
isPublicLesson: false
code: https://gitlab.com/fullstackio/books/newline-course-apps/blair-googer-fullstack-svelte-app/-/tree/main/code_postgres_(author_original)/module_05/lesson_01/App
---

### Fetching Data in Web Apps

In this lesson, we are going to learn how to use our frontend Svelte application to fetch data from our backend Express endpoints. The following is a common use case in web applications:

1.  A user navigates to a route in a Single Page Application
2.  The component for the route needs data from the server
3.  The component shows a loading spinner icon to tell the user that something is happening
4.  The component triggers a network call to fetch the data
5.  When the data is retrieved, the loading spinner is hidden and the UI is updated with the data

There is a lot going on in the above steps, but Svelte makes it easy to dynamically update the UI with spinner icons and data. We will also use a library called Axios that makes HTTP network calls in JavaScript.

We will follow the above example steps to fetch our `lunchWeekList` and display the data on our frontend `admin/manage-menus` component.

Open up `LunchMenuAdmin.svelte` and start by adding a variable called `lunchWeekList` to the script and to the markup under the `<h1 class="title is-4">`:



```html
<script>
  export let currentRoute
  let lunchWeekList = ['test1', 'test2']
</script>

<div>
  <nav class="breadcrumb" aria-label="breadcrumbs">
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/admin/manage-menus">Lunch Menu Administration</a>
      </li>
      <li class="is-active">
        <a href="/#">{$user.schoolName}</a>
      </li>
    </ul>
  </nav>
  {lunchWeekList}
</div>
```

Run `npm run start` and get the front end started, then bring up the manage-menus route.

As a reminder, the frontend dev server runs on port 5000. Here's the link to the manage-menus route we used before <http://localhost:5000/admin/manage-menus>.

You should see the `lunchWeekList` rendered on the DOM:

![hardcoded-lunch-week-list](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_06/lesson_06.01/public/hardcoded-lunch-week-list.png)

### On-Mount Initialization

In the Front End Routing module, we discussed the Svelte `onMount` lifecycle function. `onMount` is a good place to set up component initialization code, such as fetching data from a server.

Next, in `LunchMenuAdmin.svelte`, import`onMount` and update the `lunchWeekList` array in the `onMount` function:



```js
<script>
  import { onMount } from 'svelte'
  
  export let currentRoute
  let lunchWeekList = []

  // add the function here
  onMount(async () => {
    lunchWeekList = ['list', 'updated', 'on', 'mount']
  })
</script>
```

Confirm that the `onMount` function updated the state correctly:

![lunch-week-list-onMount](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_06/lesson_06.01/public/lunch-week-onMount.png)

Cool. We have the `onMount` function working successfully.

### Using Axios to Fetch Data

Axios gives us an easy syntax to fetch data from APIs:

```js
import axios from 'axios'

onMount(async () => {
  try {
    let response = await axios.get('https://an-api-route')
    let data = response.data
  } catch (e) {
    console.error('Error fetching data')
  }
})
```

While the above syntax looks pretty straightforward, there is some complexity lurking under the covers. An important concept in the above code is the usage of `async` or `await`. Network calls in JavaScript are **asynchronous** functions which means that JavaScript **doesn't block** and wait for the line of code to finish. The next line of code can execute prior to the previous line finishing.

freeman-g

Welcome back. We're glad to have you join us for another lesson. In the last

lesson we worked on the Backend Express application and we created some REST

API endpoints and in this lesson we're going to learn how to use our front end

spelt application to call those back end endpoints and fetch some data. So a

common use case in web apps is a user navigates to a route in the app. The

component for that route needs data from a server so the component will show a

loading spinner icon to let the user know that something is happening. Then the

component triggers a network call to the server to fetch the data and when the

data returns the loading spinner is hidden and the user interface is updated

with the data. So there's a lot going on in those steps but smelt spelt makes

pretty easy to dynamically update the UI with the spinner icons and the data

just through reactivity and then we'll also use a library called Axios that

makes HTTP network calls in JavaScript and makes that part a little easier. So

we're going to follow the above outline and fetch our lunch week list from the

back end server and then display that in the front end. We'll take it piece by

piece here so we're going to start just by displaying a simple list that will

hard code in the front end. So we're going to work in lunch menu admin.spelt.

So open up that file and then we'll put in this simple list lunch week list and

we're just going to hard code a couple values in there and then we'll use our

must-brackets or curly brackets to just display that list. This is kind of just

a review of state and reactivity. So make sure that your front end application

running if not it's npm run dev to start it and then it's going to be on local

host 5000. So here's my lunch week admin component and you can see that it's

showing test one and test two so showing the two values from my array there. So

that's just one little start there and so this is basically what it looks like.

Now let's go one step further. So previously we talked about the on-mount

life cycle function and on-mount is a good place for a component to initialize

itself and this is a good spot to do something like fetching data from a

server. So we're going to add on-mount in here and then we'll set the lunch

variable to an empty array and then in the on-mount function we'll actually set

it to a value. Now eventually in a minute we're going to fetch this down from a

server but we're getting there piece by piece. So let's add the on-mount life

cycle function there and then we're gonna say on-mount a sink and then inside

there we'll actually set the lunch week list but we need to initialize it first

so let's move this up here. Okay so now when the component's ready and on-

we'll actually set that list to a value. So give that a try and you can see

the hot loading that's updated there so the on-mount life cycle functions

working. Okay so now let's talk about Axios. So the Axios library gives us a

pretty convenient syntax to fetch data from an API. So we import Axios and then

we can call Axios git and then we put the API route and then the response from

that call will contain the JSON from the REST API. So in this case we say

response.data and that will contain the JSON. Okay so that looks pretty easy

there's a lot going on there and there's some complexity lurking under the

covers and one important concept with the above code is the usage of async

syntax. So we've got the async keyword before our function signature and then

that allows us to await asynchronous calls and you may have heard of promises

this is a modern way of dealing with promises and so what async await does in

this case is that it blocks until this call is finished before moving on to the

next line of code. So here's an example of some similar code but without the

await keyword. So what would happen if we set up our code this way is the

Axios git call would fire and that would run in the background and then

immediately the JavaScript runtime would console log response which would be

empty because it won't block it won't wait until this call is finished. So you

got to be careful and make sure when dealing with asynchronous network calls

to use the await keyword. Okay so let's go ahead and install Axios in the front

end project. So I'm going to stop the front end dev environment npm install

Axios and then start it up again. Okay and then let's go ahead and import it

we'll use it to fetch from our API. So import Axios here

and then we're gonna assign response.data to our lunchweek list variable. Since

we're dealing with a network call and something that's going over a network

to a server this could have a failure point in it so it's a good idea to wrap

this with a try catch that way we can deal with errors more gracefully. So for

example we might want to show our users an error message that says error

fetching data from server or something like that. So we'll add a try catch to

as well. For now we'll just console log the error if we get one.

Okay so let's give this a try now we're just hard coding our back end route for

now and we'll we'll deal with externalizing that route the local host 3000

part later. So this will just get us to where we're going for now. So let's

this a try and it looks like it's not working so let's take a look at dev

tools here and look at the console let's look at the network calls so if we

refresh this and if you choose XHR this will show all the API rest API calls

so this is this is failing right now I don't think I have my back end running

and so this is probably gonna happen to you you'll either have your front end

not running or your back end not running but we need to run them both. So from

here out in this course we're gonna mostly be running both at the same time.

So I'll just start a new browser tab here and go to my workspace in my school

lunch directory and then go to back end and then we want to run npm run node

Okay so now refresh this and give it another try and it's still failing there

and what you can see is that our request has been blocked by core's policy. No

access control allow or origin header is present so as I was building this

course I encountered the same error and I decided that it might be neat to just

work through this as we got the error together because this is kind of

that would commonly happen to you in the real world. So this error deals with

cross origin resource sharing and this error prevents a web page on one domain

in our case localhost 5000 from originating a request to a resource on

another domain in this case localhost 3000. So maybe another example would be

imagine we owned the domain great email dot com and we tried to fetch data from