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

This module is supposed to be about the Svelte, so let's start up the front end and make sure everything works after our backend changes from the last module.

As a reminder, the normal local dev environment set-up is the following:

In my environment, I did a good bit of testing with the 

 endpoint, so my front end looks like this:

 data looks a little funny. The back end is returning the 

 date property as a full timestamp. This is due to the way the Postgres driver for Node.js creates JavaScript Date objects.

We can address this issue by overriding the default date type (1082) handling in 

. Add the following lines to the top of the file:

// use pg types to override the default date handling
var types = require('pg').types
types.setTypeParser(1082, (val) => val)

module.exports = {
  development: {
    client: 'postgresql',
...

Now after refreshing, the data should look like this:

The second thing I noticed is that there are a bunch of test rows in the database. We might as well take the opportunity to add a Delete button and call the 

We need a way for users to be able to delete 

 file and update the svelte-awesome import to include the 

import { refresh, times } from 'svelte-awesome/icons'

Then down in the markup section, we can add a blank 

<thead>
  <tr>
    <th>Week Of</th>
    <th>Published</th>
    
    <th></th>
  </tr>
</thead>
{#each lunchWeekList as lunchWeek}
  <tr class="has-text-link" style="cursor: pointer" on:click="{openLunchWeekDetails(lunchWeek)}">
    <td>{lunchWeek.weekOf}</td>
    <td>{lunchWeek.isPublished}</td>
    
    <td>
      <Icon  data="{times}" />
    </td>
  </tr>
{/each}

At this point, the X button should look like this:

There are a couple of problems with this first implementation. We have our 

 tag. This means that we can't click on the X button by itself. The button also sits a little higher than the other text on the table row.

---
title: Cleaning Up the Front End of a Single Page Application in Svelte
description: Deleting Data with the Frontend
privateVideoUrl: https://fullstack.wistia.com/medias/x7tnk60f5z
isPublicLesson: false
code: https://gitlab.com/fullstackio/books/newline-course-apps/blair-googer-fullstack-svelte-app/-/tree/main/code/module_07/lesson_01/App?ref_type=heads
---

### Back to the Frontend

This module is supposed to be about the Svelte, so let's start up the front end and make sure everything works after our backend changes from the last module.

As a reminder, the normal local dev environment set-up is the following:

-   `$ npm run nodemon` from the backend directory
-   `$ npm run dev` from the frontend directory in a separate terminal window

In my environment, I did a good bit of testing with the `POST /lunch-week` endpoint, so my front end looks like this:

![frontend-timestamps](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_08/lesson_08.01/public/frontend-timestamps.png)

The first thing I noticed is that the `weekOf` data looks a little funny. The back end is returning the `weekOf` date property as a full timestamp. This is due to the way the Postgres driver for Node.js creates JavaScript Date objects.

We can address this issue by overriding the default date type (1082) handling in `knexfile.js`. Add the following lines to the top of the file:

```js
// use pg types to override the default date handling
var types = require('pg').types
types.setTypeParser(1082, (val) => val)

module.exports = {
  development: {
    client: 'postgresql',
...
```

Now after refreshing, the data should look like this:

![frontend-timestamps-fix](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_08/lesson_08.01/public/frontend-timestamps-fix.png)

The second thing I noticed is that there are a bunch of test rows in the database. We might as well take the opportunity to add a Delete button and call the `DELETE /lunch-week` endpoint from Svelte.

### Delete Lunch Week Function

We need a way for users to be able to delete `lunchWeek` rows from the `lunch_week` table. Here's the plan:

-   add an X button to each table row
-   add a click handler to the X button that will open a confirmation modal
-   if confirmed, call the `lunchWeek` delete endpoint

To get started, open the `LunchMenuAdmin.svelte` file and update the svelte-awesome import to include the `times` (X) icon.

```js
import { refresh, times } from 'svelte-awesome/icons'
```

Then down in the markup section, we can add a blank `<th>` tag
and add a `<td>` for the `<Icon data="{times}" />`:



```html
<thead>
  <tr>
    <th>Week Of</th>
    <th>Published</th>
    
    <th></th>
  </tr>
</thead>
{#each lunchWeekList as lunchWeek}
  <tr class="has-text-link" style="cursor: pointer" on:click="{openLunchWeekDetails(lunchWeek)}">
    <td>{lunchWeek.weekOf}</td>
    <td>{lunchWeek.isPublished}</td>
    
    <td>
      <Icon  data="{times}" />
    </td>
  </tr>
{/each}
```

At this point, the X button should look like this:

![x-button-first](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_08/lesson_08.01/public/x-button-first.png)

There are a couple of problems with this first implementation. We have our `openLunchWeekDetails` handler on the whole row, e.g., the `<tr>` tag. This means that we can't click on the X button by itself. The button also sits a little higher than the other text on the table row.

We can fix these issues with a little styling and by moving the click handler down to the `<td>{lunchWeek.weekOf}</td>`.

Now we'll have two clickable elements in the table, so we can add a CSS class to handle the `cursor: pointer;` part.

Put the `<style>` block between the `<script>` block and the markup:

```html
....
</script>

<style>
  .clickable {
    cursor: pointer;
  }
</style>

<div>
....
```

Here's the markup with the changes:



```html
<tr>
  
  <td class="has-text-link clickable" on:click="{openLunchWeekDetails(lunchWeek)}">{lunchWeek.weekOf}</td>
  <td>{lunchWeek.isPublished}</td>
  
  <td class="has-text-grey-light clickable">
    <Icon style="margin-top: 4px;" data="{times}" />
  </td>
</tr>
```

We want the X button to delete the given row, so let's add an `on:click` handler to the `<td>` wrapping the X button:



```html
  <td class="has-text-grey-light clickable" on:click="{deleteLunchWeek(lunchWeek)}">
    <Icon style="margin-top: 4px;" data="{times}" />
  </td>
```

Next, we need to implement the `deleteLunchWeek` function that the handler uses. In this function, we'll start with toggling the loading spinner and then using Axios to call the delete endpoint.

If that call is successful, we'll remove the given `lunchWeek` entity from the `lunchWeekList` using `splice` and Svelte will reactively update the table. Update the `LunchMenuAdmin.svelte` file:



```js
const deleteLunchWeek = async lunchWeek => {
  const lunchWeekId = lunchWeek.lunchWeekId
  try {
    // show the loading spinner and call the delete endpoint
    loading = true
    await axios.delete(`${process.env.API_ROOT}/api/lunch-week/${lunchWeekId}`)