Full-Stack Web Development with Svelte and FastAPI


Course Number: SVLT-112
Duration: 5 days (32.5 hours)
Format: Live, hands-on

Svelte with FAST API Training Overview

In this Svelte course, attendees master Svelte, a modern client-side JavaScript framework, and FastAPI, a high-performance web framework for building APIs with Python. Students learn the fundamentals of Svelte, including how to set up a development environment, create static and dynamic pages, and handle event and state management. The course then dives into the basics of HTTP and URLs, databases, and Python web frameworks. Participants learn how to build a REST API with FastAPI, including how to handle cookies, errors, and specific status codes, and secure a REST API with JWT and configure CORS. By the end of this training, students confidently build robust, full-stack applications using Svelte and FastAPI.

Location and Pricing

Accelebrate offers instructor-led enterprise training for groups of 3 or more online or at your site. Most Accelebrate classes can be flexibly scheduled for your group, including delivery in half-day segments across a week or set of weeks. To receive a customized proposal and price quote for private corporate training on-site or online, please contact us.

In addition, some courses are available as live, instructor-led training from one of our partners.

Objectives

  • Understand the fundamentals of Svelte and how it compares to other frameworks
  • Set up a development environment for Svelte and use SvelteKit
  • Create static and dynamic pages using Svelte
  • Incorporate images, CSS, and JavaScript content into pages
  • Understand the principles of template reactivity and components in Svelte
  • Work with event handling, data binding, and forms in Svelte
  • Handle lifecycle events and state management in Svelte.
  • Work with routing, error handling, and asynchronous data in Svelte.
  • Understand the basics of HTTP and URLs, databases, and Python web frameworks
  • Build a REST API with FastAPI, including how to handle cookies, errors, and specific status codes
  • Secure a REST API with JWT and configure CORS.

Prerequisites

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

Outline

Expand All | Collapse All

Introduction
  • What is Svelte?
  • What problem does Svelte solve?
  • Svelte vs. Other Frameworks
  • 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 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
Template Reactivity
  • Principles
  • Changing Data through Assignments
  • Reactive Statements
  • Updating Arrays and Objects
Component Basics
  • What is a Component?
  • What problem does it solve?
  • Calling Components vs HTML Elements
  • Component File Structure
  • Component Props
  • Component Events
Component Composition
  • What is Component Composition?
  • What problem does it solve?
  • Nested Components
  • Passing Data to Child Components
  • Handling Events and Receiving Data from Child Components
  • Component Tree Best Practices
Event Handling
  • Event Handling Element Directives
  • DOM Events
  • Adding Event Handlers
  • In-line Handlers
  • Event Modifiers
  • Dispatching Component Events
  • Forwarding Events
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
  • Mount
  • Destroy
  • Before Update
  • After Update
  • Tick
State Management
  • Stores
  • Writable Stores
  • Auto-subscriptions
  • Readable Stores
  • Derived Stores
  • Custom Stores
  • Store Bindings
  • Page Store
  • Navigation Store
  • Updated Store
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 & async/await
  • Fetching data from a REST API
  • Subscriptions
  • Stores
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
Conclusion

Training Materials

All Svelte training students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentation and extensive code samples. 

Software Requirements

Students need a free, personal GitHub account to access the courseware and permission to install .NET SDK, Node.js, and Visual Studio Code on their computers. They also need permission to install NuGet Packages, NPM Packages and Visual Studio Extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.



Learn faster

Our live, instructor-led lectures are far more effective than pre-recorded classes

Satisfaction guarantee

If your team is not 100% satisfied with your training, we do what's necessary to make it right

Learn online from anywhere

Whether you are at home or in the office, we make learning interactive and engaging

Multiple Payment Options

We accept check, ACH/EFT, major credit cards, and most purchase orders



Recent Training Locations

Alabama

Birmingham

Huntsville

Montgomery

Alaska

Anchorage

Arizona

Phoenix

Tucson

Arkansas

Fayetteville

Little Rock

California

Los Angeles

Oakland

Orange County

Sacramento

San Diego

San Francisco

San Jose

Colorado

Boulder

Colorado Springs

Denver

Connecticut

Hartford

DC

Washington

Florida

Fort Lauderdale

Jacksonville

Miami

Orlando

Tampa

Georgia

Atlanta

Augusta

Savannah

Hawaii

Honolulu

Idaho

Boise

Illinois

Chicago

Indiana

Indianapolis

Iowa

Cedar Rapids

Des Moines

Kansas

Wichita

Kentucky

Lexington

Louisville

Louisiana

New Orleans

Maine

Portland

Maryland

Annapolis

Baltimore

Frederick

Hagerstown

Massachusetts

Boston

Cambridge

Springfield

Michigan

Ann Arbor

Detroit

Grand Rapids

Minnesota

Minneapolis

Saint Paul

Mississippi

Jackson

Missouri

Kansas City

St. Louis

Nebraska

Lincoln

Omaha

Nevada

Las Vegas

Reno

New Jersey

Princeton

New Mexico

Albuquerque

New York

Albany

Buffalo

New York City

White Plains

North Carolina

Charlotte

Durham

Raleigh

Ohio

Akron

Canton

Cincinnati

Cleveland

Columbus

Dayton

Oklahoma

Oklahoma City

Tulsa

Oregon

Portland

Pennsylvania

Philadelphia

Pittsburgh

Rhode Island

Providence

South Carolina

Charleston

Columbia

Greenville

Tennessee

Knoxville

Memphis

Nashville

Texas

Austin

Dallas

El Paso

Houston

San Antonio

Utah

Salt Lake City

Virginia

Alexandria

Arlington

Norfolk

Richmond

Washington

Seattle

Tacoma

West Virginia

Charleston

Wisconsin

Madison

Milwaukee

Alberta

Calgary

Edmonton

British Columbia

Vancouver

Manitoba

Winnipeg

Nova Scotia

Halifax

Ontario

Ottawa

Toronto

Quebec

Montreal

Puerto Rico

San Juan