Fullstack Svelte Course Overview

Introduction

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

An Introduction to Svelte Routing for Single Page Applications

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

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

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

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

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 a Svelte Application with JSON Web Tokens

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

The purpose of our application is to publish a weekly lunch menu for the public to access. To that end, we are going to use what we've learned so far and build a Lunch Menu View page with a public Express endpoint for the data. Here's what the page will look like:

Our front-end route will use the convention 

/lunch-menu/pinewood-elementary/2020-11-16

 so we can pull the school database name and week of from the front-end route and send it as a GET to the backend API.

Let's get start with the backend API endpoint. Create a new file in the 

const express = require('express')
const router = express.Router()

// let tenantKnex

router.get('/:schoolName/:weekOf', async function (req, res) {
  try {
    const weekOf = req.params.weekOf

    res.send({ weekOf })
  } catch (e) {
    console.log(e)
    res
      .status(500)
      .send({ message: 'Error getting lunch week', error: e.toString() })
  }
})

module.exports = router

 and register it with the router. In this case we want the endpoint to be public, so we won't use the JWT or Knex middleware:

...
// IMPORT THE NEW ROUTE
const lunchWeekPublicRouter = require('./routes/lunch-week-public')
...

const router = express.Router()

router.use('/', indexRouter)
router.use('/users', usersRouter)
router.use('/lunch-week-public', lunchWeekPublicRouter) // ADD THE NEW ROUTE HERE
router.use('/lunch-week', [authenticateJwt, passKnex], lunchWeekRouter)
app.use('/api', router)

Test this in Postman and make sure the endpoint is working. Here is an example API route: 

localhost:3000/api/lunch-week-public/pinewood-elementary/2020-11-16

. You should see a response that looks like this:

Now that we have the basic endpoint working, let's actually wire it up to the database. Earlier, we used a 

 module to cache and return Knex instances based on JWTs for our secured routes. In this case, we have a public route without a JWT and we have the database name as part of the route's URL convention.

 module, add a new middleware function called 

const passKnexPublic = (req, res, next) => {
  const schoolName = req.params.schoolName
  const schoolDatabase = schoolName.replace(/-/g, '_')
  req.knex = getKnex(schoolDatabase)
  next()
}

At the same time, change the name of the original 

 to make it more obvious that one is a unsecured way of passing Knex and the other one is a secured way:

const passKnexSecured = (req, res, next) => {
  const schoolDatabase = req.user['https://school-lunch/school_database']
  req.knex = getKnex(schoolDatabase)
  next()
}

module.exports = { passKnexSecured, passKnexPublic }

 and the export style, we need to update 

// THE OLD WAY
// const passKnex  = require('./database/dynamic-knex')

// THE NEW WAY
const { passKnexSecured } = require('./database/dynamic-knex')

// UPDATE THE ROUTE
router.use('/lunch-week', [authenticateJwt, passKnexSecured], lunchWeekRouter)

 middleware. For consistency, it would be nice if we could use it in 

 are not parsed by Express until after the 

---
title: Public Lunch Week Page
description: Adding a Public Lunch Week Page
privateVideoUrl: https://fullstack.wistia.com/medias/dm2bp9jxfm
isPublicLesson: false
---

### Public Lunch Week Page

The purpose of our application is to publish a weekly lunch menu for the public to access. To that end, we are going to use what we've learned so far and build a Lunch Menu View page with a public Express endpoint for the data. Here's what the page will look like:

![public-page-final](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_10/lesson_10.01/public/public-page-final.png)

Our front-end route will use the convention `/lunch-menu/<school-name>/<yyyy-MM-dd>`, e.g., `/lunch-menu/pinewood-elementary/2020-11-16` so we can pull the school database name and week of from the front-end route and send it as a GET to the backend API.

Let's get start with the backend API endpoint. Create a new file in the `/routes` directory called `lunch-week-public.js` with a simple version of the endpoint:

```js
const express = require('express')
const router = express.Router()

// let tenantKnex

router.get('/:schoolName/:weekOf', async function (req, res) {
  try {
    const weekOf = req.params.weekOf

    res.send({ weekOf })
  } catch (e) {
    console.log(e)
    res
      .status(500)
      .send({ message: 'Error getting lunch week', error: e.toString() })
  }
})

module.exports = router
```

Then import the route file into `app.js` and register it with the router. In this case we want the endpoint to be public, so we won't use the JWT or Knex middleware:

```js
...
// IMPORT THE NEW ROUTE
const lunchWeekPublicRouter = require('./routes/lunch-week-public')
...

const router = express.Router()

router.use('/', indexRouter)
router.use('/users', usersRouter)
router.use('/lunch-week-public', lunchWeekPublicRouter) // ADD THE NEW ROUTE HERE
router.use('/lunch-week', [authenticateJwt, passKnex], lunchWeekRouter)
app.use('/api', router)
```

Test this in Postman and make sure the endpoint is working. Here is an example API route: `localhost:3000/api/lunch-week-public/pinewood-elementary/2020-11-16`. You should see a response that looks like this:

![postman-get-lunchweek-public](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_10/lesson_10.01/public/postman-get-lunchweek-public.png)

### Passing Knex to the Public Route

Now that we have the basic endpoint working, let's actually wire it up to the database. Earlier, we used a `dynamic-knex` module to cache and return Knex instances based on JWTs for our secured routes. In this case, we have a public route without a JWT and we have the database name as part of the route's URL convention.

Working again with the `dynamic-knex` module, add a new middleware function called `passKnexPublic`:

```javascript { actualFilename=../../../code/module_09/lesson_01/school-lunch/backend/database/dynamic-knex.js endLine=35 startLine=30 statedFilename=helper-functions url=https&#x3A;//gitlab.com/fullstackio/books/fullstack-svelte-course/module_10/lesson_10.01/.../../code/module_09/lesson_01/school-lunch/backend/database/dynamic-knex.js#L30 }
const passKnexPublic = (req, res, next) => {
  const schoolName = req.params.schoolName
  const schoolDatabase = schoolName.replace(/-/g, '_')
  req.knex = getKnex(schoolDatabase)
  next()
}
```

At the same time, change the name of the original `passKnex` function to `passKnexSecured` to make it more obvious that one is a unsecured way of passing Knex and the other one is a secured way:

```javascript { actualFilename=../../../code/module_09/lesson_01/school-lunch/backend/database/dynamic-knex.js endLine=41 startLine=37 statedFilename=helper-functions url=https&#x3A;//gitlab.com/fullstackio/books/fullstack-svelte-course/module_10/lesson_10.01/.../../code/module_09/lesson_01/school-lunch/backend/database/dynamic-knex.js#L37 }
const passKnexSecured = (req, res, next) => {
  const schoolDatabase = req.user['https://school-lunch/school_database']
  req.knex = getKnex(schoolDatabase)
  next()
}
```

Last, change the `module.exports` to export both middleware functions:

```js
module.exports = { passKnexSecured, passKnexPublic }
```

Since we changed the name of `passKnex` and the export style, we need to update `app.js`:

```js
// THE OLD WAY
// const passKnex  = require('./database/dynamic-knex')

// THE NEW WAY
const { passKnexSecured } = require('./database/dynamic-knex')

// UPDATE THE ROUTE
router.use('/lunch-week', [authenticateJwt, passKnexSecured], lunchWeekRouter)
```

Next, we need to apply the new `passKnexPublic` middleware. For consistency, it would be nice if we could use it in `app.js`, but unfortunately since it depends on `req.params.schoolName`, we cannot - `req.params` are not parsed by Express until after the `router.use` calls.

Therefore, in this case we need to use the new middleware in `lunch-week-public`. Import it and add it to the `GET /lunch-week-public` endpoint like this. Uncomment the `tenantKnex` variable and assign it in the route:

```js
const express = require('express')
const router = express.Router()
// import passKnexPublic
const { passKnexPublic } = require('../database/dynamic-knex')

let tenantKnex

// add the middleware to the route
router.get('/:schoolName/:weekOf', passKnexPublic, async function (req, res) {
  try {
    // assign tenantKnex
    tenantKnex = req.knex
    const weekOf = req.params.weekOf

    res.send({ weekOf })
  } catch (e) {
    console.log(e)
    res
      .status(500)
      .send({ message: 'Error getting lunch week', error: e.toString() })
  }
})

module.exports = router
```

### Returning the Lunch Week Data

We have Knex squared away, so in `lunch-week-public.js` create a helper function to return the data were looking for:

```javascript { actualFilename=../../../code/module_09/lesson_01/school-lunch/backend/routes/lunch-week-public.js endLine=29 startLine=1 statedFilename=helper-functions url=https&#x3A;//gitlab.com/fullstackio/books/fullstack-svelte-course/module_10/lesson_10.01/.../../code/module_09/lesson_01/school-lunch/backend/routes/lunch-week-public.js }
const express = require('express')
const router = express.Router()
const { passKnexPublic } = require('../database/dynamic-knex')

Is it possible to get a course on furthering this application with PGBouncer?? Id gladly pay for that.  Cheers.

It's a good question. Google will still index JavaScript rendered pages such as this one. However, if you were really concerned about SEO, you could serve a static HTML page as your landing page and then serve your svelte app under a slightly different route.For example:https://<mydomain/index.html >> static html landing page, better SEO approachhttps://<mydomain/app/index.html >> svelte app served hereLater in the course in the module on production deployment, we discuss serving static files from Express, so you could potentially accomplish the above with Express, although this exact setup is not covered in the course.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Fullstack Svelte

Module 1: Introduction

Introduction:

Start Here

Introduction: (5:24)

Fullstack Svelte Course Overview

Module 2: Setting Up A Development Environment

Lesson 1: (4:12)

Setting Up a Svelte Local Development Environment

Lesson 2: (7:04)

How to Initialize a Boilerplate Svelte Project

Lesson 3: (9:25)

Setting Up a Formatter and Linter for Svelte Development

Module 3: Front End Routing

Lesson 1: (20:16)

An Introduction to Svelte Routing for Single Page Applications

Lesson 2: (11:36)

Front End Layouts - Creating Reusable Parent Components

Module 4: User Interface Styles and Interactions

Lesson 1: (6:15)

Using Front End Component Libraries for Svelte Development

Lesson 2: (6:38)

Learn Svelte - How to Create a Basic Landing Page

Lesson 3: (13:47)

A Guide to Handling DOM Events and Input Binding with Svelte

Module 5: Creating the Backend Application

Lesson 1: (16:48)

Initialize an Express Node.js Project for Svelte Development

Lesson 2: (10:52)

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

Lesson 3: (13:47)

School Lunch Data Model

Module 6: Fetching Data in the Frontend

Lesson 1: (14:34)

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

Lesson 2: (10:59)

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

Lesson 3: (6:36)

Using Svelte to Show and Hide Loading Spinner Icons

Lesson 4: (5:31)

Externalizing Frontend Configuration

Module 7: Adding Persistence with PostgreSQL

Lesson 1: (7:18)

Installing PostgreSQL Locally to Add Persistence to a Svelte App

Lesson 2: (12:37)

Configuring Knex js Migrations for Database Management Scripts

Lesson 3: (15:32)

How to Use Knex js in an Express Backend App

Lesson 4: (21:57)

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

Module 8: Creating, Updating and Deleting Data in the Frontend

Lesson 1:

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

Lesson 2:

Building a Form in Svelte That Lets Users Create Data Entities

Lesson 3: (28:42)

The Lunch Week Details Component

Module 9: Securing the Application

Lesson 1: (37:19)

Securing a Svelte Application with JSON Web Tokens

Lesson 2:

Get Started Creating a Multi Tenant Application in Svelte

Lesson 3: (36:25)

Creating a User Signup Flow for a Multi Tenant Svelte App

Module 10: Public Lunch Menu View

Lesson 1: (20:35)

Public Lunch Week Page

Module 11: Production Deployment

Lesson 1: (13:35)

Building Svelte Single Page Applications and Serving Static Files

Public Lunch Week Page