Fullstack Svelte Course Overview

Introduction

Development Environment Setup

Initializing a Svelte Project

Setting up a Formatter and Linter

Setting Up A Development Environment

Single Page Application Routers

Front End Layouts

Front End Routing

Front End Component Libraries

Creating a Landing Page

Events and Input Bindings

User Interface Styles and Interactions

Initializing an Express Project

REST API Endpoints

School Lunch Data Model

Creating the Backend Application

Fetching Data with Axios

Svelte Each Blocks

Showing Loading Spinner Icons

Externalizing Frontend Configuration

Fetching Data in the Frontend

Installing PostgreSQL and Initial Setup

Knex Migrations

Using Knex with Express

Adding Post, Put and Delete Endpoints

Adding Persistence with PostgreSQL

Deleting Data with the Front End

Creating Data with the Front End

The Lunch Week Details Component

Creating, Updating and Deleting Data in the Frontend

JWT Based Security

Evolving the App to Multi Tenant

User Registration

Securing the Application

Public Lunch Week Page

Public Lunch Menu View

Building and Serving Svelte

Production Deployment

svelte

node.js

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

 that contained configuration for Knex Migrations to connect to our database. We can use the same 

 in our backend Express app to allow it to work with the database.

We'll start by adding a directory in the root of the backend project called 

 and then create a JavaScript file that initializes Knex.

// /school-lunch/backend/database/client.js

const knex = require('knex')

// determine the environment from the ENV VAR called `ENVIRONMENT`, or
// default to development
const environment = process.env.ENVIRONMENT || 'development'

// get the appropriate config for the given environment
const config = require('../knexfile.js')[environment]

// instantiate Knex with the config
const db = knex(config)

module.exports = db

 endpoint. Previously, we just returned a static, hard-coded array of 

const lunchWeekList = [
  {
    lunchWeekId: 1,
    weekOf: '2020-10-05',
    isPublished: true,
  },
  {
    lunchWeekId: 2,
    weekOf: '2020-10-12',
    isPublished: true,
  },
  {
    lunchWeekId: 3,
    weekOf: '2020-10-19',
    isPublished: false,
  },
]

router.get('/', async function (req, res) {
  await new Promise((f) => setTimeout(f, 2000))
  res.send(lunchWeekList)
})

We can change it to use Knex and return data from the database like this:

var express = require('express')
var router = express.Router()
const knex = require('../database/client') // Import our knex client that we just created

// Create a helper function to select all the rows from the
// lunch_week table
const getLunchWeekList = () => {
  return knex.select().from('lunch_week').orderBy('week_of')
}

// Call the helper function in our endpoint. Knex database queries
// return Promises, so the `await` keyword needs to be used in combination with
// `async function`
router.get('/', async function (req, res) {
  const lunchWeekList = await getLunchWeekList()
  res.send(lunchWeekList)
})

module.exports = router

Now, you can give it a try in your browser at 

. If everything works, you should see the following JSON response, based on the data from the 

You may have noticed that the JSON property names are in snake-case, just like the database column names. We can use a little bit of extra configuration to convert them to camelCase. Install the package 

---
title: Using Knex with Express
description: Using Knex with an Express Application
privateVideoUrl: https://fullstack.wistia.com/medias/czleo9d1t6
isPublicLesson: false
---

### Using Knex in the Backend App

Previously, we created a `knexfile` that contained configuration for Knex Migrations to connect to our database. We can use the same `knexfile` in our backend Express app to allow it to work with the database.

We'll start by adding a directory in the root of the backend project called `database` and then create a JavaScript file that initializes Knex.

Create the file`client.js` in `/school-lunch/backend/database`:

```js
// /school-lunch/backend/database/client.js

const knex = require('knex')

// determine the environment from the ENV VAR called `ENVIRONMENT`, or
// default to development
const environment = process.env.ENVIRONMENT || 'development'

// get the appropriate config for the given environment
const config = require('../knexfile.js')[environment]

// instantiate Knex with the config
const db = knex(config)

module.exports = db
```

Now let's take a look at the `GET /lunch-week` endpoint. Previously, we just returned a static, hard-coded array of `lunch-week` objects:

```js
const lunchWeekList = [
  {
    lunchWeekId: 1,
    weekOf: '2020-10-05',
    isPublished: true,
  },
  {
    lunchWeekId: 2,
    weekOf: '2020-10-12',
    isPublished: true,
  },
  {
    lunchWeekId: 3,
    weekOf: '2020-10-19',
    isPublished: false,
  },
]

router.get('/', async function (req, res) {
  await new Promise((f) => setTimeout(f, 2000))
  res.send(lunchWeekList)
})
```

We can change it to use Knex and return data from the database like this:

```js
var express = require('express')
var router = express.Router()
const knex = require('../database/client') // Import our knex client that we just created

// Create a helper function to select all the rows from the
// lunch_week table
const getLunchWeekList = () => {
  return knex.select().from('lunch_week').orderBy('week_of')
}

// Call the helper function in our endpoint. Knex database queries
// return Promises, so the `await` keyword needs to be used in combination with
// `async function`
router.get('/', async function (req, res) {
  const lunchWeekList = await getLunchWeekList()
  res.send(lunchWeekList)
})

module.exports = router
```

Now, you can give it a try in your browser at <http://localhost:3000/api/lunch-week>. If everything works, you should see the following JSON response, based on the data from the `lunch_week` table.

```json
[
  {
    "lunch_week_id": 1,
    "week_of": "2020-10-05T04:00:00.000Z",
    "is_published": true
  },
  {
    "lunch_week_id": 2,
    "week_of": "2020-10-12T04:00:00.000Z",
    "is_published": true
  },
  {
    "lunch_week_id": 3,
    "week_of": "2020-10-19T04:00:00.000Z",
    "is_published": false
  },
  {
    "lunch_week_id": 4,
    "week_of": "2020-10-26T04:00:00.000Z",
    "is_published": false
  },
  {
    "lunch_week_id": 5,
    "week_of": "2020-11-02T05:00:00.000Z",
    "is_published": false
  }
]
```

### Knex Stringcase

You may have noticed that the JSON property names are in snake-case, just like the database column names. We can use a little bit of extra configuration to convert them to camelCase. Install the package `knex-stringcase`.

```shell
$ npm install knex-stringcase
```

Then update the `/database/client.js` to use `knex-stringcase` as follows:

```js { actualFilename=../../../code/module_06/lesson_03/school-lunch/backend/database/client.js endChar=279 endLine=9 startChar=0 startLine=1 statedFilename=database/client.js url=https&#x3A;//gitlab.com/fullstackio/books/fullstack-svelte-course/module_06/lesson_06.03/.../../code/module_06/lesson_03/school-lunch/backend/database/client.js }
const knex = require('knex')
const environment = process.env.ENVIRONMENT || 'development'
const config = require('../knexfile.js')[environment]
const knexStringcase = require('knex-stringcase')
const options = knexStringcase(config)
const db = knex(options)

Hi Blair,Could you explain when should I use: " " , '  ' , `  `  while writing the code in this project? (Great course by the way)Thanks.Önder 

obilir21

Hi Onder,Good question. In Javascript you can use either doublequotes ("), single quotes (') or backticks (`). Choosing between double quotes and single quotes is a matter of preference, however, I prefer single quotes and I like to setup my linter/formatter to automatically enforce that rule. The reason I like single quotes is because it's easier to differentiate between other languages, such as C# that use double quotes or JSON which uses double quotes. Therefore I always try to use single quotes in my Javascript.Backticks are pretty neat in Javascript. They allow you to use template literals, which make string printing and concatenating very easy.For example, say you have the following:const lastName = 'Bar'

const firstName = 'Foo'You can use a backticks like this:const greeting = Hello ${firstName} ${lastName}Javascript will automatically inject the variables into the string. So the value of the greeting variable will be Hello Foo Bar.You can even call functions or evaluate expressions such as:const answer = The answer of one + five is ${1 + 5}Hope this helps!

freeman-g

It is clear now. Is see the const greeting = .... {not text here on my screen}... I belief it should be: const greeting = `Hello ${firstName} ${lastName}`. So this is a JS feature. THanks.

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:23)

Fullstack Svelte Course Overview

Module 2: Setting Up A Development Environment

Lesson 1: (4:12)

Development Environment Setup

Lesson 2: (7:04)

Initializing a Svelte Project

Lesson 3: (9:25)

Setting up a Formatter and Linter

Module 3: Front End Routing

Lesson 1: (20:16)

Single Page Application Routers

Lesson 2: (11:36)

Front End Layouts

Module 4: User Interface Styles and Interactions

Lesson 1: (6:15)

Front End Component Libraries

Lesson 2: (6:38)

Creating a Landing Page

Lesson 3: (13:47)

Events and Input Bindings

Module 5: Creating the Backend Application

Lesson 1: (16:48)

Initializing an Express Project

Lesson 2: (10:52)

REST API Endpoints

Lesson 3: (13:47)

School Lunch Data Model

Module 6: Fetching Data in the Frontend

Lesson 1: (14:34)

Fetching Data with Axios

Lesson 2: (10:59)

Svelte Each Blocks

Lesson 3: (6:36)

Showing Loading Spinner Icons

Lesson 4: (5:31)

Externalizing Frontend Configuration

Module 7: Adding Persistence with PostgreSQL

Lesson 1: (7:18)

Installing PostgreSQL and Initial Setup

Lesson 2: (12:37)

Knex Migrations

Lesson 3: (15:32)

Using Knex with Express

Lesson 4: (21:57)

Adding Post, Put and Delete Endpoints

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

Lesson 1: (22:32)

Deleting Data with the Front End

Lesson 2: (9:45)

Creating Data with the Front End

Lesson 3: (28:42)

The Lunch Week Details Component

Module 9: Securing the Application

Lesson 1: (37:19)

JWT Based Security

Lesson 2: (35:05)

Evolving the App to Multi Tenant

Lesson 3: (36:25)

User Registration

Module 10: Public Lunch Menu View

Lesson 1: (20:35)

Public Lunch Week Page

Module 11: Production Deployment

Lesson 1: (13:35)

Building and Serving Svelte

Lesson 2: (23:56)

Production Deployment

Using Knex with Express