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

The key requirements for deploying our app to a production environment are Node and PostgreSQL hosting. We need to use a provider that offers both.

Platform as a Service (PaaS) offerings tend to be the easiest to get started and the easiest to manage in production, but can be more expensive at higher scale, e.g., lots of users, traffic or data storage. Examples of PaaS offerings are Heroku, Google App Engine and AWS Elastic Beanstalk.

At the other end of the spectrum are Infrastructure as a Service (IaaS) offerings that provide virtual servers and leave it up to you to install the needed software (e.g., Node and Postgres) and configure network connections, apply SSL/TLS certificates and so on.

For this lesson, we are going to use Google App Engine. It offers relatively low cost to get started (5.00 USD per month) and all the features we need. You will need a credit or debit card for this lesson.

Important - to get the cheapest possible pricing with Google Cloud Platform, make sure you select the 

 instance type when creating your Postgres instance. It is also recommended to check your GCP charges after a couple of days and make sure they meet your expectations.

Getting Started with Google Cloud Platform

If you don't already have a Google account, you'll need one first, then head over to 

. This is the main web interface for managing all Google Cloud resources.

You will also need a Billing Account, so go ahead and create one using the left navigation under Billing.

PostgreSQL hosting starts at $5.00 USD per month and Node.js App Engine hosting starts with free hosting, therefore the estimated monthly charges for running this project are $5.00. Free credits are usually available to new users as well.

The next step is creating a GCP Project. From the Dashboard page, choose Create Project.

Give the Project and name and finish the creation process. GCP will automatically generate a unique project ID based on your name:

After the project creation process finishes, select the project and then choose 

 from the left nav. From here, choose Create Application, select a Region and choose language Node.js and Standard environment:

Then, download and install the Cloud SDK:

Continuing in the GCP console, head back to the left nav and choose SQL under the Databases section. Choose Create instance and PostreSQL:

---
title: Production Deployment
description: Production Deployment
privateVideoUrl: https://fullstack.wistia.com/medias/relwij4rol
isPublicLesson: false
---

### Node and PostgreSQL Hosting

The key requirements for deploying our app to a production environment are Node and PostgreSQL hosting. We need to use a provider that offers both.

Platform as a Service (PaaS) offerings tend to be the easiest to get started and the easiest to manage in production, but can be more expensive at higher scale, e.g., lots of users, traffic or data storage. Examples of PaaS offerings are Heroku, Google App Engine and AWS Elastic Beanstalk.

At the other end of the spectrum are Infrastructure as a Service (IaaS) offerings that provide virtual servers and leave it up to you to install the needed software (e.g., Node and Postgres) and configure network connections, apply SSL/TLS certificates and so on.

For this lesson, we are going to use Google App Engine. It offers relatively low cost to get started (5.00 USD per month) and all the features we need. You will need a credit or debit card for this lesson.

Here are the basic steps we'll follow:

1.  Create a Google Cloud Platform Project and Billing Account
2.  Add an App Engine Node.js application. This will be our Express app.
3.  Add a PostgreSQL data base to the GCP Project.
4.  Enable workstation network access to the new database.
5.  Run the `migrate.js` script to migrate the new remote Postgres database.
6.  Add an app.yaml file to the local project. This file will contain all the secrets for the app and the App Engine configuration.
7.  Deploy the app using the gcloud CLI tools.

> Important - to get the cheapest possible pricing with Google Cloud Platform, make sure you select the **Lightweight** instance type when creating your Postgres instance. It is also recommended to check your GCP charges after a couple of days and make sure they meet your expectations.

### Getting Started with Google Cloud Platform

If you don't already have a Google account, you'll need one first, then head over to <https://console.cloud.google.com/>. This is the main web interface for managing all Google Cloud resources.

You will also need a Billing Account, so go ahead and create one using the left navigation under Billing.

> PostgreSQL hosting starts at $5.00 USD per month and Node.js App Engine hosting starts with free hosting, therefore the estimated monthly charges for running this project are $5.00. Free credits are usually available to new users as well.

![billing.png](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_10/lesson_02/public/billing.png)

### Creating a GCP Project

The next step is creating a GCP Project. From the Dashboard page, choose Create Project.

![create-project](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_10/lesson_02/public/create-project.png)

Give the Project and name and finish the creation process. GCP will automatically generate a unique project ID based on your name:

![projectid](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_10/lesson_02/public/projectid.png)

### Creating an App Engine App

After the project creation process finishes, select the project and then choose _App Engine > Dashboard_ from the left nav. From here, choose Create Application, select a Region and choose language Node.js and Standard environment:

![node-js](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_10/lesson_02/public/node-js.png)

Then, download and install the Cloud SDK:

![cloud-sdk](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_10/lesson_02/public/cloud-sdk.png)

### Adding a PostgreSQL Database

Continuing in the GCP console, head back to the left nav and choose SQL under the Databases section. Choose Create instance and PostreSQL:

![create-postgres](https://d2uusema5elisf.cloudfront.net/courses/fullstack-svelte/module_10/lesson_02/public/create-postgres.png)

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

Production Deployment