Blazor Starter Application

This template contains an example .NET 6 Blazor WebAssembly client application, a .NET 6 C# Azure Functions, and a C# class library with shared code.

Getting Started

1. Create a repository from the GitHub template and then clone it locally to your machine.

2. In the Api folder, copy local.settings.example.json to local.settings.json

3. Continue using either Visual Studio or Visual Studio Code.

Visual Studio 2022

Once you clone the project, open the solution in Visual Studio 2022 and follow these steps:

1. Press F5 to launch both the client application and the Functions API app. In Visual Studio, you can right click the solution and select both API project and client project as startup projects.

   Note: If you're using the Azure Functions CLI tools, refer to the documentation on how to enable CORS.

Visual Studio Code with Azure Static Web Apps CLI

1. Install the Azure Static Web Apps CLI and Azure Functions Core Tools CLI.

2. Open the folder in Visual Studio Code.

3. In the VS Code terminal, run the following command to start the Static Web Apps CLI, along with the Blazor WebAssembly client application and the Functions API app:

   swa start http://localhost:5000 --run "dotnet run --project Client/Client.csproj" --api-location Api
   

   The Static Web Apps CLI (swa) first starts the Blazor WebAssembly client application and connects to it at port 5000, and then starts the Functions API app.

4. Open a browser and navigate to the Static Web Apps CLI's address at http://localhost:4280. You'll be able to access both the client application and the Functions API app in this single address. When you navigate to the "Fetch Data" page, you'll see the data returned by the Functions API app.

5. Enter Ctrl-C to stop the Static Web Apps CLI.

Template Structure

• Client: The Blazor WebAssembly sample application
• Api: A C# Azure Functions API, which the Blazor application will call
• Shared: A C# class library with a shared data model between the Blazor and Functions application
• ApiIsolated: A C# Azure Functions API using the .NET isolated execution model, which the Blazor application will call. This version can be used instead of the in-process function app in Api.

Deploy to Azure Static Web Apps

This application can be deployed to Azure Static Web Apps, to learn how, check out our quickstart guide.

Speed Improvements

I started with the template mentioned above and published it to Azure. According to GTmetrix loading that site took 4.7 seconds which is way too slow. With this project I'm trying to improve the loading time also known as the Speed Index. A good user experience for loading time of your site is 1.3s or less.

Changes to csproj files

First I made some changes in the csproj files and added this block:

    <PropertyGroup Condition=" '$(Configuration)'!='Debug' ">
        <DebuggerSupport>false</DebuggerSupport>
        <DebugType>none</DebugType>
    </PropertyGroup>
    <PropertyGroup>
        <PublishTrimmed>true</PublishTrimmed>
        <EnableTrimAnalyzer>true</EnableTrimAnalyzer>
        <BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>
        <EventSourceSupport>false</EventSourceSupport>
        <InvariantGlobalization>true</InvariantGlobalization>
    </PropertyGroup>

This change already results in 1 second less waiting time.

Replace bootstrap.css with TailwindCss and minifying

I like Tailwind CSS better than Bootstrap CSS and I find it easier to customize Tailwind CSS using PostCSS.

For PostCSS you need NodeJS and npm. Look at the setup page of PostCSS how to set this up.

When you have npm installed, go to the Client folder of this project and run npm install in the Developer PowerShell of VS2022. It will look at the package.json and install all needed packages.

Next, another change in the csproj file is added:

    <Target Name="PostBuild" AfterTargets="PostBuildEvent">
        <Exec Command="npm run buildcss" />
    </Target>

This tells dotnet to run buildcss after building this project.

This command is in pacakge.json and looks like this:

"postcss wwwroot/css/app.css -o wwwroot/css/app.min.css && postcss obj/Debug/net6.0/scopedcss/bundle/Client.styles.css -o wwwroot/css/Client.min.css"

It tells to minify app.css to app.min.css. This is also changed in index.html.

I also tried to minify Client.styles.css which is the bundled CSS file from the isolated CSS files you can use with Blazor.

I don't like that I need to refer to the file in the obj folder, but for now I don't know of an alternative.

The Tailwind CLI handles the purging of the not-used Tailwind CSS, resulting in a very small app.min.css file.

I haven't yet removed all the bootstrap css classes from the razor pages and the isolated css file. When that is done (I leave that for you) Client.min.css will be even more smaller.

All these changes results in a Largest Contentful Paint of 2.4s and a Total Blocking Time of 1.5s.

This is still not very fast for such a minimal web app, but now the duration is mostly in downloading /_framework/System.Private.CoreLib.dll, /_framework/dotnet.wasm and other framework related dlls.

Pre-render

Pre-rendering is a challenge when you're not using a hosted Blazor Server-Side app. Thanks to this little, but very good working package BlazorWasmPreRendering.Build it is very easy to accomplish this. This package is implemented in this template.

Start simplified

I created swa-cli.config.json which contains the start-up code.

Now you can start the application by just typing swa start app

Live demo

For now a live demo is available here: purple-meadow-079619e03.azurestaticapps.net