This project is part of an experiment to convert native applications to PWAs.
A PWA version of the to do application from Chapter 2 of .NET MAUI Projects - Third Edition.
The main difference in implementation is swapping out Sqlite for IndexedDB. In a real world application you still need to get the data out of IndexedDB. The PWA Data Trap.
-
Install the latest version of Visual Studio Code.
-
Setup your workstation to develop with Blazor. You will also need the .NET WebAssembly build tools optional component.
-
Install all the recommended Workspace extensions.
Run the Application
- Run the project.
To keep things consistent:
-
CodeButler - A basic alternative to CodeMaid for VS Code is used.
-
Roslynator - A extended collection of Rosyln analyzers is included as a NuGet package on all projects.
-
AsyncFixer - A NuGet package included on all projects that finds and corrects common misuses of async/await.
-
A starting .editorconfig file with minimal rule changes is included.
-
VS Code settings, recommendations and a spell checker are setup.
-
Code styles are enforced on build and the analysis level is set to Latest Recommended.
-
Nullable Reference Types are enabled.
-
Build warnings are treated as errors.
-
Changes should not be committed with unresolved compiler Errors, Warning or Messages.
-
Razor components should use code behind files.
-
Global usings are used to reduce common using statements in multiple files.
- Since we will be using MudBlazor, the application will follow Material Design for the web guidelines.
The application is based on Blazor Web Assembly.
- IndexedDB is used as the local database with Blazor Dexie.
These references are presented in a logical order for review from start to finish for gathering a deeper understanding of the code base. There is an assumption that you are already familiar with C# and ASP.NET Core.
-
Blazor in Action: An example-driven guide to building reusable UI components and web frontends—all with Blazor, C#, and .NET.
-
Blazor WebAssembly - A Practical Guide to Full Stack Development With .NET: The lessons start with the basic concepts of building a simple but practical application with Blazor WebAssembly. We cover all the things we need in order to build a real-world application and we quickly transition to building full-fledged application parts, slowly introducing the concepts as we go.
-
Blazor Train: Blazor Train is an extensive class on Microsoft Blazor, an extremely productive technology for developing web applications using HTML markup and the C# programming language.
-
Learn PWA: A course that breaks down every aspect of modern progressive web app development.
- Overview of Progressive Web Apps (PWAs): Progressive Web Apps (PWAs) provide access to open web technologies, to provide cross-platform interoperability. PWAs provide your users with an app-like experience that's customized for their devices.
-
.NET: Learn about .NET, an open-source developer platform for building many different types of applications.
-
ASP.NET: Learn to use ASP.NET Core to create web apps and services that are fast, secure, cross-platform, and cloud-based. Browse tutorials, sample code, fundamentals, API reference and more.
-
Blazor WebAssembly: Blazor is a framework for building interactive client-side web UI with .NET.
-
Entity Framework: Entity Framework Core is a modern object-database mapper for .NET. It supports LINQ queries, change tracking, updates, and schema migrations. EF Core works with many databases, including SQL Database (on-premises and Azure), SQLite, MySQL, PostgreSQL, and Azure Cosmos DB.
-
Mozilla Developer Network Reference: The open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find links to our Web technology documentation.
-
web.dev: Let's build the future of the web, together. Take advantage of the latest modern technologies to build amazing web experiences for everyone.
- Awesome Blazor: Here you can find a curated list of awesome Blazor libraries and resources.