Full-Stack Web Development with Svelte and FastAPI

Class Duration

5 days

Target Audience

All students must have Python, JavaScript, and HTML programming experience. Experience with CSS is helpful, but not required.

Description

This comprehensive course covers Svelte, a modern JavaScript framework, and its integration with FastAPI, a high-performance web framework for building APIs with Python. The course starts with the fundamentals of Svelte, including how to set up a development environment, create static and dynamic pages, and handle event and state management. It then dives into the basics of HTTP and URLs, databases, and Python web frameworks. The course concludes with a detailed guide on how to build a REST API with FastAPI, including how to handle cookies, errors, specific status codes, and how to secure a REST API with JWT and configure CORS. This course is perfect for professionals who want to build robust, full-stack applications using Svelte and FastAPI.

Objectives

Understand the fundamentals of Svelte and how it compares to other frameworks.
Set up a development environment for Svelte and learn how to use SvelteKit.
Create static and dynamic pages using Svelte, including understanding their structure and how to handle images, CSS, and JavaScript content.
Understand the principles of template reactivity and component basics in Svelte.
Learn about event handling, data binding, and forms in Svelte.
Understand how to handle lifecycle events and state management in Svelte.
Learn about routing, error handling, and asynchronous data in Svelte.
Understand the basics of HTTP and URLs, databases, and Python web frameworks.
Learn how to build a REST API with FastAPI, including how to handle cookies, errors, and specific status codes.
Understand how to secure a REST API with JWT and configure CORS.

Training Materials

All students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentation and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.

Software Requirements

Students will need a free, personal GitHub account to access the courseware. Student will need permission to install Python, Node.js and Visual Studio Code on their computers. Also, students will need permission to install Conda/Pip Packages, NPM Packages, and Visual Studio Extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.

Training Topics

Introduction to Svelte 5

What is Svelte? What problem does it solve?
Svelte 5 vs. Svelte 4: what changed and why runes
Svelte vs. React, Vue, and Angular reactivity models
The Svelte compiler

Development Environment

Requirements
SvelteKit
Svelte Files
Svelte Extension for Visual Studio Code
Run/Debug Svelte App in Visual Studio Code
Svelte Extension for WebStorm
Run/Debug Svelte App in WebStorm

SvelteKit 2 Overview

Vite Tooling
Development Server
Routing
Deployment
Server-side rendering
Unit Testing

Getting Started

Exploring the REPL
Svelte Layout
Svelte Page
Svelte Component
Svelte Architecture
Svelte Element Directives
Compiling Svelte Files

Static Pages

What is a Static Page?
What problem do Static Pages solve?
Static Page File Structure
Setting Head Content
HTML Content
CSS Content
Comments
Scoped CSS
Handling Images
Hot Module Reloading
Server Pre-rendering
Page Routing

Dynamic Pages

What is a Dynamic Page?
What problem do Dynamic Pages solve?
Client-Side Rendering
Dynamic Page File Structure
JavaScript Content
Using Variables
Using Expressions
Data Binding
Class and Style Directive
Event Binding
Logic Blocks
Debug Tag

Reactivity with Runes (Svelte 5)

The four runes: $state, $derived, $effect, $props
$state for mutable reactive state
$derived for computed values (replacing $: reactive statements)
$effect for side effects and DOM interaction
Updating arrays and objects with deep reactivity
Reading legacy $: and migrating

Component Basics

What is a Component?
Component file structure
Component props with $props() and TypeScript types
Bindable props with $bindable()
Component callbacks (replacing event dispatching)

Component Composition

Nested components
Snippets ({#snippet} / {@render}) — the modern slot replacement
Passing data and callbacks to children
Component tree best practices

Event Handling (Svelte 5)

Standard DOM event attributes (onclick, oninput)
Event modifiers via wrapper functions (legacy on:click|preventDefault deprecated)
Callback props (replacing createEventDispatcher)
Forwarding behavior with spread props

Data binding

Top-down data binding by default
Communication with props and events
Using two-way data binding

Forms

HTML Form Element
Named Form Actions
Form Validation
Form Submission
Progressive Enhancement

Lifecycle and Effects

$effect and $effect.pre (the modern approach)
onMount and onDestroy (still available)
tick() for awaiting DOM updates
Effect cleanup functions

State Management (Svelte 5)

Reactive primitives with $state (the modern default)
Sharing reactive state via context
Stores in Svelte 5 (writable, readable, derived) — when they still make sense
Migrating store-heavy code to runes
Page, navigation, and updated stores in SvelteKit 2

Routing

What is Routing?
What problem does Routing solve?
Pages
Layout
Route Parameters
API Routes

Errors and Redirects

Handling Errors and Redirects
Error Pages
Fallback Errors
Redirects

Asynchronous Data

Promises and async/await in {#await}
SvelteKit 2 server load functions returning promises
Streaming with deferred data
Async (preview)

Quick Review of HTTP and URLs

What is HTTP?
What are HTTP Verbs?
What are the parts of a URL?
Path Parameters
Query String Parameters
Common HTTP Headers
Common HTTP Status Codes

Quick Review of Databases

What is a Database?
Connecting to a Database
Query data from a Database
Modify data in a Database

Overview of Python Web Frameworks

Django
Flask
FastAPI

Representational State Transfer

What is REST?
HTTP Verbs and their use in REST
OpenAPI
JSON
Swagger

Building a REST API with FastAPI

Create an Application
Define a Hello World Route
Configure a Path Parameter
Configure a Query String Parameter
Reading Request Body
Writing a Response Body
Handling Cookies
Handle Errors
Return Specific Status Codes
Asynchronous Routes
Serving Static Files

Middleware

Security

Secure a REST API with JWT
Configure CORS