How do I prerender a Blazor WebAssembly application to static files?
Blazor prerendering is a process where web page elements are built and compiled on the server and static HTML is hosted in WebAssembly (client side). When Razor pages load, components are prerendered at the same time. This process improves page loading by making it faster for SPAs (single page applications), which improves search engine optimization. To set up prerendering for a hosted Blazor WebAssembly app: Create the Blazor web Assembly App with ASP.net core Hosted. Here solution name is BlazorHosted. Delete wwwroot/index.html file from the Blazor WebAssembly Client project. In the Client project, delete the following lines in Program.cs: – builder.RootComponents.Add<App>(“#app”);- builder.RootComponents.Add<HeadOutlet>(“head::after”); Add the _Host.cshtml and _Layout.cshtml files to the Pages folder in the Server project. These files are already included in the Blazor Server template and can be obtained from there.Make the following changes to the _Host.cshtml file: Modify the namespace based on APP namespace as BlazorHosted.Client. Update the render-mode as ‘WebAssemblyPrerendered’ in host.cshtml <component type=”typeof(App)” render-mode=”WebAssemblyPrerendered” /> Make the following changes to the _Layout.cshtml file:Update the Pages namespace at the top of the file to match namespace of the Server app’s pages like this, @namespace BlazorHosted.Server.Pages Add @using directive for the Client project at the top of the file: @using BlazorHosted.Client Update the stylesheet links to point to the WebAssembly project’s stylesheets. So, make the following changes.Remove the following lines <link href=”css/site.css” rel=”stylesheet” /><link href=”{App Name space}.styles.css” rel=”stylesheet” /><component type=”typeof(App)” render-mode=”ServerPrerendered” /> Add the following lines <link href=”css/app.css” rel=”stylesheet” /><link href=”BlazorHosted.Client.styles.css” rel=”stylesheet” /><component type=”typeof(App)” render-mode=”WebAssemblyPrerendered” /> Modify the Blazor script source of Server side Blazor: <script src=”_framework/blazor.webassembly.js”></script> In the endpoint mapping of the Server project in Program.cs, update the fallback from the index.html file to the _Host.cshtml page.Remove the following line app.MapFallbackToFile(“index.html”); Add the following line app.MapFallbackToPage(“/_Host”); If the Client and Server projects use one or more common services during prerendering, factor the service registrations into a method that can be called from both projects. For more information, see ASP.NET Core Blazor dependency injection. Run the Server project. The hosted Blazor WebAssembly app is prerendered by the Server project for clients. View Sample in GitHub
How do I deploy a Blazor Server application to Azure App Service?
Follow the steps below to deploy a Blazor Server application to Azure app service. Create a Blazor Server application To create a blazor Server Application using the following steps Open Visual Studio 2019 and create a new project. Once Blazor App is selected, click Next button to configure the project name and location. Save the application, and then click Create. Select Blazor Server App and click Create to complete the application creation. Deploying to Azure app service To Deploying the Azure App Service using the following steps. If you don’t have a login for Azure, sign up to access the Azure portal. Click Create a resource in Azure to create a resource group. Select the Web App Azure application service. Once Web App is selected, select the following options: Select Free Trial as the subscription. Create a resource group name, such as “Blazor.” Update the Instance Details: Name: blazor-publish. The application hosted will be available in this URL: blazor-publish.azurewebsites.net. Select the Code radio button for Publish. Choose the .NET Core 3.1 LTS runtime stack and Windows operating system. Select the region in which to publish the app. Central US was chosen for this demo. The app service plan with the Free F1 option will be selected by default, but this can be modified. Once this is done, click Review + create. After configuring the Web App Service, get the publish profile for the Web App Service to host the Blazor Server application. Select the created web app service (blazor-publish). Navigate to the overview section and click Get publish profile, and the save the profile locally. Publish a Blazor Server application in Azure Using import-profile option To using import-profile option using the following steps. Right-click the project and click Publish in the context menu. Choose Import Profile and click Next button. Then, locate the downloaded publish profile for the web app service. Finally, publish the application by clicking Publish. The application will be deployed and will be available in the URL https://blazor-publish.azurewebsites.net/. Using Azure account login To using Azure account login using the following steps. In Visual Studio 2019, right-click on the project and click Publish in the context menu. Select Azure as the target. Select Azure App Service (Windows) as the specific target. You need to log in to your Azure account and choose the web app service. Now click publish to deploy the application. Now, the application will be deployed and will be available in the following URL. https://blazor-publish.azurewebsites.net/ Refer to “Publish an ASP.NET Core app to Azure with Visual Studio” for more details.
How do I deploy a Blazor WebAssembly application to Azure App Service
Follow the steps below to deploy a Blazor WebAssembly application to Azure App Service. Prerequisites: .NET Core 3.1/.NET 5.0 Visual Studio 2019 or a more current version, which should include Azure and ASP.NET as well as web development workloads. Azure App Service account. Create a Blazor WebAssemby Application To create a blazor WebAssembly Application using the following steps Open Visual Studio 2019 and create a new project. Once Blazor App is selected, click Next button to configure the project name and location. Save the application, and then click Create button. Select Blazor WebAssembly App and click Create button to complete the application creation. Deploying to Azure App Service To Deploying the Azure App Service using the following steps. If you don’t have a login for Azure, sign up to access the Azure portal. Click Create a resource in Azure to create a resource group. Select the Web App Azure application service. Once Web App is selected, select the following options: Select Free Trial as the subscription. Create a resource group name, such as “Blazor.” Update the Instance Details: Name: blazor-publish. The application hosted will be available in this URL: blazor-publish.azurewebsites.net. Select the Code radio button for Publish. Choose the .NET Core 3.1 LTS runtime stack and Windows operating system. Select the region in which to publish the app. Central US was chosen for this demo. The app service plan with the Free F1 option will be selected by default, but this can be modified. Once this is done, click Review + create. After configuring the Web App service, get the publish profile for the Web App service to host the Blazor WebAssembly application. Select the created web app service (blazor-publish). Navigate to the overview section, click on Get publish profile, and save the profile locally. Publish a Blazor WebAssembly application in Azure Using import-profile option To using import-profile option using the following steps. Right-click the project and click Publish in the context menu. Choose Import Profile and click Next. Then, locate the downloaded publish profile for the web app service. Finally, publish the application by clicking Publish. The application will be deployed and will be available in the URL https://blazor-publish.azurewebsites.net/. Using Azure account login To using Azure account login using the following steps. In Visual Studio 2019, right-click on the project and click Publish in the context menu. Select Azure as the target. Select Azure App Service (Windows) as the specific target. You need to log in to your Azure account and choose the web app service. Now click Publish to deploy the application. Now, the application will be deployed and will be available in the following URL. https://blazor-publish.azurewebsites.net/ Refer to “Publish an ASP.NET Core app to Azure with Visual Studio” for more details.
How do I set consent cookies in Blazor?
In the following example, the cookie consent banner temple will display to notify you to accept cookies. Follow the below steps to create a consent cookie in Blazor. 1. Configure the HttpContextAccessor and CookiePolicyOptions to the Program.cs file to create a consent cookie. [Program.cs] 2. Now, add the Cookie consent banner template as a Razor component under the Shared folder. [ConsentCookie.razor] 3. Add the JavaScript function in the _Layout.cshtml/_Host.cshtml/index.cshtml file to store the cookie. [_Layout.cshtml]/_Host.cshtml/index.cshtml 4. Refer to the cookie consent banner template Razor component in the MainLayout.razor file. [MainLayout.razor] 5. Run the application, and you will find the consent cookie banner. 6. Now, click the Accept cookie button to store the cookie in the browser. View Sample in GitHub
How do I call a C# method from JavaScript in Blazor WebAssembly?
A Blazor app can invoke JavaScript functions from .NET methods and .NET methods from JavaScript functions. These scenarios are called JS interop. There are two methods to call a C# method from JavaScript. DotNet.invokeMethod DotNet.invokeMethodAsync Syntax to call C# from JavaScript: DotNet.invokeMethodAsync(“C# method assembly name”, “C# method name”); To call a C# method from JavaScript, The method must be decorated with the “JSInvokable” attribute. The method must be public. The method may either be static or instance-level (this is only supported by Blazor 0.5.0 and above). The identifier for the method must be unique. The method must be nongeneric. [Index.razor] Add the C# function invoke statement to a script tag in the body of the wwwroot/index.html file. [index.html] Refer to “Call .NET methods from JavaScript functions in ASP.NET Core Blazor” for more details.
