Blazor FAQ - WebAssembly

A progressive web application (PWA) is usually a single-page application (SPA) used to create a Blazor WebAssembly application to work offline. It runs in its own app window and independent of network speed.

Follow these steps to create a Blazor WebAssembly PWA application to work offline.

1. Create a Blazor WebAssembly application with a progressive web application configuration.
   

2. Press Ctrl + F5 to run the application. Users have the option of installing the app.
   

3. Once the app is installed, the app appears in its own window without an address bar.
   

4. To run the application offline:
   

   1. Publish the app using this documentation.
   2. Deploy the app to a server that supports HTTPS and access the app in a browser at its secure HTTPS address.
   3. Run the deployed application in the browser and open the browser’s dev tools.
   4. Open the network tab in the browser dev tool and set the throttle setting to offline mode.
   5. Refresh the application. It still loads in offline mode, also.

5. Refer to this link for more details.

IndexedDB is used for the client-side storage of data and files. Follow these steps to use IndexedDB in Blazor WebAssembly:

1. Create a Blazor WebAssembly app and install the Reshiru.Blazor.IndexedDB.Framework NuGet package using the NuGet package manager.

2. Set up the IIndexedDbFactory configuration service in your Program.cs file and set it as scoped.
   [Program.cs]
   

   using Blazor.IndexedDB.Framework;
   public class Program
    {
         public static async Task   Main(string[] args)
         {
                 builder.Services.AddScoped<IIndexedDbFactory,   IndexedDbFactory>();
           }
    }

3. Now add the properties inside the class to store and process data in the Data folder.
   [IndexDb.cs]  
   

   using Blazor.IndexedDB.Framework;
    using Microsoft.JSInterop;
    using   System.ComponentModel.DataAnnotations;
       
     namespace {{Your_App_Name}}.Data
      {
          public class IndexDb : IndexedDb
          {
              public IndexDb (IJSRuntime JSRuntime, string name, int   version) : base(JSRuntime,   name, version) { }
          
              public IndexedSet<Employee> Employees   { get; set; }
          }
       
          public class Employee
          {
              [Key]
              public long Id { get; set; }
       
              [Required]
              public string FirstName { get; set; }
       
              [Required]
              public string LastName { get; set; }
          }
      }
   

4. Add the namespace for the IndexedDB in _Import.razor file.
   [_Import.razor]
   

   @using Blazor.IndexedDB.Framework
   @using {{Your_App_Name}}.Data 

5. Add the Razor component to add and store the data using IndexedDB in the Index.razor file.
   [Index.razor]
   

   @page "/"
   @inject IIndexedDbFactory DbFactory
     
   <h1>Employees</h1>
   @if (employ != null)
    {
        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>First name</th>
                    <th>Last name</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var employee in employ)
                {
                    <tr>
                        <td>@employee.Id</td>
                        <td>@employee.FirstName</td>
                        <td>@employee.LastName</td>
                        <td><button @onclick="@(() => DeleteForm(employee))">Delete</button></td>
                    </tr>
                }
            </tbody>
        </table>
    }
     
    <fieldset>
        <legend>Add new person</legend>
        <EditForm Model="@newEmployee" OnValidSubmit="@SaveForm">
            <InputText placeholder="First name" @bind-Value="@newEmployee.FirstName" />
            <InputText placeholder="Last name" @bind-Value="@newEmployee.LastName" />
            <button type="submit">Add</button>
            <p><ValidationSummary /></p>
            <DataAnnotationsValidator />
        </EditForm>
    </fieldset>
     
    @code {
        Employee newEmployee = new Employee();
        List<Employee> employ;
     
        protected async Task OnInitializedAsync()
        {
            using var db = await DbFactory.Create<ExampleDb>();
            employ = db.Employees.ToList();
        }
     
        async Task SaveForm()
        {
            // Add employee details.
        }
     
        async Task DeleteForm(Employee person)
        {
            // Delete the employee.
        }
    } 

Refer to this blog for more details.

Follow these steps to add a Blazor WebAssembly project to an existing ASP.NET Core application:

1. Create a ASP.NET Core application and Blazor WebAssembly application separately.

2. Install the Microsoft.AspNetCore.Components.WebAssembly.Server NuGet package in the ASP.NET Core application and add the Blazor WebAssembly application project reference to the ASP.NET Core application.
   [AspNetCoreApp.csproj]
   

   <Project Sdk="Microsoft.NET.Sdk.Web">
       <ItemGroup>
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="3.2.0" />
      </ItemGroup>
     
      <ItemGroup>
        <ProjectReference Include="..\BlazorWasmApp\BlazorWasmApp.csproj" />
      </ItemGroup>
     
    </Project> 

3. Add the following configurations the Startup.cs file in the ASP.NET Core app to include Blazor WebAssembly.
   [Startup.cs]
   

   public class Startup
   {
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
           if (env.IsDevelopment())
           {
                         app.UseWebAssemblyDebugging();
           }
         
                  app.UseBlazorFrameworkFiles();
          app.UseEndpoints(endpoints =>
          {
              endpoints.MapFallbackToFile("index.html");
                     });
          }
    } 

4. Add inspectUri in the ASP.NET Core app launchSettings.json file.
   [launchSettings.json]
   

   "profiles": {
        "IIS Express": {
          "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
                 },
     
         "AspNetCoreApp": {
          "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
          }
    } 

Blazor authentication is implemented to determine who a particular user is. Blazor follows the existing ASP.NET Core authentication mechanisms to show a user’s identity.
Follow these steps to implement authentication within Blazor WebAssembly:

1. Create a Blazor WebAssembly app with individual user account authentication in Visual Studio 2019.

2. Install the NuGet package named “Microsoft.AspNetCore.Components.WebAssembly.Authentication” using the NuGet package manager.

3. To support the authenticating service, add the AddOidcAuthentication service configuration to the Program.cs file.
   [Program.cs]
   

   using Microsoft.Extensions.Configuration;
   using Microsoft.Extensions.DependencyInjection;
   . . .
     
    public class Program
     {
        public static async Task Main(string[] args)
        {
                          builder.Services.AddOidcAuthentication(options =>
          {
            builder.Configuration.Bind("Auth0", options.ProviderOptions);
            options.ProviderOptions.ResponseType = "code";
          });
        }
      } 

4. In wwwroot/appsettings.json file, replace the Authority and Client ID placeholders with the proper values taken from the Auth0 dashboard.
   Note: Use Auth0; it will let you integrate authentication for configuring your application. Refer to this link for how to configure the application.
   [wwwroot/appsetting.json]
   

   {
      "Auth0": {
        "Authority": "https://<YOUR_AUTH0_DOMAIN>",
        "ClientId": "<YOUR_CLIENT_ID>"
      }
   } 

5. Add the authentication service script reference to the index.html file, which handles the low-level details of the OIDC protocol.
   [index.html]
   

   <body>
     
        //. . .
     
        <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js">
        </script>
        
    </body> 

6. Add CascadingAuthenticationState and AuthorizeRouteView to display the page matching the specified route only if the user is authorized. Otherwise, it redirects to the Login page.
   [App.razor]
   

   <CascadingAuthenticationState>
        
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <Authorizing>
                    <p>Loading...</p>
                </Authorizing>
                <NotAuthorized>
                    <p>You're not authorized to reach this page. You need to log in.</p>
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>        
            <p>Sorry, there's nothing at this address.</p>        
        </NotFound>
    </Router>
    </CascadingAuthenticationState>

7. Create a Razor component to allow the user to log in to be authenticated in the Shared folder.
   [Shared/LoginControl.razor]
   

   @using Microsoft.AspNetCore.Components.WebAssembly.Authentication
     
    @inject NavigationManager UriHelper
    @inject SignOutSessionStateManager SignOutManager
     
    <AuthorizeView>
        <Authorized>
            Hello, @context.User.Identity.Name!
            <a href="#" @onclick="OnClickEvent">Log out</a>
        </Authorized>
        <NotAuthorized>
            <a href="authentication/login">Log in</a>
        </NotAuthorized>
    </AuthorizeView>
     
    @code{
        private async Task OnClickEvent(MouseEventArgs args)
        {
            await SignOutManager.SetSignOutState();
            UriHelper.NavigateTo("authentication/logout");
        }
    }

8. Reference the LoginControl page in the MainLayout.razor page.
   [MainLayout.razor]
   

   <div class="main">
            <div class="top-row px-4 auth">
                <LoginControl />
                <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
            </div>
     
            <div class="content px-4">
                @Body
            </div>
        </div> 

9. Create an Authentication.razor component in the Pages folder to authenticate the user when logging in and out of the app.
   [Pages/Authentication.razor]
   

   @page "/authentication/{action}"
   @using Microsoft.AspNetCore.Components.WebAssembly.Authentication
    @using Microsoft.Extensions.Configuration
     
    @inject NavigationManager UriHelper
    @inject IConfiguration Config
     
    <RemoteAuthenticatorView Action="@Action">
        <LogOut>
            @{
                var authority = (string)Config["Auth0:Authority"];
                var clientId = (string)Config["Auth0:ClientId"];
     
                UriHelper.NavigateTo($"{authority}/v2/logout?client_id={clientId}");
            }
        </LogOut>
    </RemoteAuthenticatorView>
     
    @code{
        [Parameter] 
        public string Action { get; set; }
    } 

10. Now display the authorized content when the app is authorized. If the app is not authorized, display the “Not Authorized” message to the user.
    [Index.razor]
    

    @page "/"
      
    <AuthorizeView>
         <Authorized>
             <h1>Hello, @context.User.Identity.Name !</h1>
      
             <p>Welcome to your new app.</p>
         </Authorized>
         <NotAuthorized>
             <p>Not Authorized</p>
         </NotAuthorized>
     </AuthorizeView>

11. Press Ctrl + F5 to run the application and click Log in in the header to authenticate the user.

Refer to this documentation for more details.

To redirect to the login page when a user is not authenticated in Blazor WebAssembly:

• Create a login page component.
• Add the login page component to the NotAuthorized tag.

1. Create a login page component for redirection.
   [LoginRedirect.razor]
   

   @inject NavigationManager UriHelper
   @code {
        protected override void OnInitialized()
        {
            UriHelper.NavigateTo("login");
        }
    } 

2. Now add the LoginRedirect component to the NotAuthorized tag to redirect to the login page if the user is not authorized.
   [App.razor]
   

   <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
            <Found Context="routeData">
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                    <NotAuthorized>
                        <LoginRedirect />
                    </NotAuthorized>
                </AuthorizeRouteView>
            </Found>
            <NotFound>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
            </NotFound>
        </Router> 

   Refer to this documentation for more details.
   

Follow the steps below to create a prerender Blazor WebAssembly app.

1. Create a new Blazor WebAssembly application using the .NET CLI.
   
   

   dotnet new blazorwasm -o BlazorPrerendering.Client

2. Add a new empty ASP.NET Core Web App to host the project.
   
   

   dotnet new web -o BlazorPrerendering.Server

   
   
   The solution should now look like this.
   
   
   

3. Now, add the WebAssembly (client side) project reference in the host server project file (BlazorPrerendering.Server.csproj) and also include the NuGet package (Microsoft.AspNetCore.Components.WebAssembly.Server) using NuGet Package Manager.
   
   [BlazorPrerendering.Server.csproj]
   
   

    <Project Sdk="Microsoft.NET.Sdk.Web">
     
     . . .
     . . .
     
      <ItemGroup>
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="3.2.1" />
      </ItemGroup>
     
      <ItemGroup>
        <ProjectReference Include="..\BlazorPrerendering.Client\BlazorPrerendering.Client.csproj" />
      </ItemGroup>
     
     
    </Project> 

4. Configure the host in the host server project Startup.cs file.
   
   [BlazorPrerendering.Server/Startup.cs]
   
   

   namespace BlazorPrerendering.Server
    {
        public class Startup
        {
            public void ConfigureServices(IServiceCollection services)
            {
                services.AddRazorPages();
     
                services.AddSingleton<HttpClient>(sp =>
                {
                    // Get the address that the app is currently running at
                    var server = sp.GetRequiredService<IServer>();
                    var addressFeature = server.Features.Get<IServerAddressesFeature>();
                    string baseAddress = addressFeature.Addresses.First();
                    return new HttpClient { BaseAddress = new Uri(baseAddress) };
                });
            }
            
            public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    // Call UseDeveloperExceptionPage on the app builder in the Development environment. 
                    app.UseDeveloperExceptionPage();
                    app.UseWebAssemblyDebugging();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    app.UseHsts();
                }
     
                app.UseHttpsRedirection();
                // Call UseBlazorFrameworkFiles on the app builder.
                app.UseBlazorFrameworkFiles();
                app.UseStaticFiles();
                app.UseRouting();
     
                // Change the fallback from the index.html file
                app.UseEndpoints(endpoints =>
                {
                    endpoints.MapRazorPages();
                    endpoints.MapControllers();
                    endpoints.MapFallbackToPage("/_Host");
                });
            }
     
        }
    } 

5. Now, you need to create a folder called Pages in the root of the host server project and create a razor page file called _Host.cshtml with the following code.
   
   [BlazorPrerendering.Server/Pages/_Host.cshtml]
   
   

    @page "/"
    @namespace BlazorPrerendering.Server.Pages
    // Need to enable Tag Helpers on the Razor Page
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
     
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>Prerendering client-side Blazor</title>
        <base href="~/" />
        <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
        <link href="css/app.css" rel="stylesheet" />
        <link href="BlazorPrerendering.Client.styles.css" rel="stylesheet" />
     
    </head>
    <body>
        <component type="typeof(BlazorPrerendering.Client.App)" render-mode="WebAssemblyPrerendered" />
     
        <div id="blazor-error-ui">
            An unhandled error has occurred.
            <a href="" class="reload">Reload</a>
            <a class="dismiss">🗙</a>
        </div>
     
        <script src="_framework/blazor.webassembly.js"></script>
    </body>
    </html> 

6. Now, remove the default static wwwroot/index.html file from the Blazor WebAssembly client project.

7. Delete the following line in Program.cs in the client project.
   
   [BlazorPrerendering.Client /Program.cs]
   
   

    builder.RootComponents.Add<App>("#app"); 

   
   
   Now run the application, and you will find the prerendered Blazor WebAssembly app.