Full Stack Azure Static Web Apps and Data API Builder
Duration
3 days
Description
The Full Stack Azure Static Web Apps and Data API Builder course is designed for students seeking to master the creation of full-stack web applications using Azure Static Web Apps and Data API Builder. Participants will explore the principles of REST APIs and GraphQL, and learn how to configure a Data API Builder project. The course also provides practical experience in incorporating authentication and authorization into a web application. The curriculum concludes with deploying a web application using a GitHub CI/CD pipeline, equipping learners with the skills to develop, secure, and deploy sophisticated web applications.
Objectives
- Explore Azure Static Web Apps and Data API Builder
- Create a full stack web application with Azure Static Web Apps and Data API Builder
- Learn the principles of REST APIs and GraphQL
- Configure a Data API Builder project
- Incorporate authentication and authorization into a web application
- Deploy a web application using a GitHub CI/CD pipeline
Prerequisites
Students should have web development experience, especially with HTML/CSS/JavaScript. Familiarity with SQL databases, REST APIs, and GraphQL is helpful but not required.
Training Materials
All students receive comprehensive courseware covering all topics in the course. Students will access the courseware through GitHub. The courseware is a collection of documents and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.
Software Requirements
Students need a free, personal GitHub account to access the courseware and perform automated deployments. Students will need a computer with a modern web browser, Visual Studio Code, .NET SDK, and Node.js installed. Also, students will need an Azure Subscription.
Outline
- Introduction
- What is an Azure Static Web App?
- What is Data API Builder?
- What is a CI/CD pipeline?
- GitHub Deployment with Azure Static Web Apps and Data APIs
- Azure Static Web Apps
- Overview
- Architecture
- Features
- Limitations
- Pricing
- Resources
- Create a Static Web App
- Install the Static Web App CLI
- Create a Static Web App
- Configure a Static Web App
- Run a Static Web App Locally
- Program a Static Web App
- Incorporate a JavaScript Framework (for fuller coverage of Blazor, React, Angular, Vue, Svelte, or SolidJS consider extending this course to 4 or 5 days)
- Data API Builder
- Overview
- Architecture
- Features
- Limitations
- Pricing
- Resources
- REST APIs
- What is a REST API?
- REST API Design
- HTTP Verbs and Paths
- Query String
- Status Codes
- HTTP Headers & Body
- REST API Client
- GraphQL
- What is GraphQL?
- GraphQL Design
- GraphQL Schema
- Queries and Mutations
- Operation Name
- Variables
- Aliases
- Fragments
- GraphQL Client
- Azure SQL Database
- What is Azure SQL Database?
- Create an Azure SQL Database
- Import Data
- Query Data
- Connect with a SQL Client
- Create a Data API Builder Project
- Install the Data API Builder DotNet Tool
- Configure a Connection String using an Environment Variable
- Create a Data API Builder Project
- Configure a Data API Builder Project
- Run a Data API Builder Project Locally
- Implement Authentication and Authorization
- Consume the Data API from the Static Web App
- Link a Database Connection to the State Web App in Azure
- GitHub CI/CD Pipeline
- Connect GitHub to Azure Static Web Apps
- Configure a GitHub CI/CD Pipeline
- Deploy a Static Web App and Data API Builder Project
- Conclusion