Search results

How to Configure Syncfusion Blazor Client Resources in Production Environment

03 Aug 2021 / 2 minutes to read
  • Syncfusion Blazor suit maintains the built-in script resources (interop scripts) by default. So, there is no need to include script reference in the application end. Also, from v19.2.0.44, Syncfusion provides an option to load the scripts and styles by manually at application end.

Adding Syncfusion Blazor init interop script in the production application

Blazor Server App (~/Startup.cs)

Copied to clipboard
public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddServerSideBlazor();

    // Set IgnoreScriptIsolation as true to load custom  scripts
    services.AddSyncfusionBlazor(options => {
        options.IgnoreScriptIsolation = true;
        });

    services.AddSingleton<WeatherForecastService>();
}

Blazor WebAssembly App (~/Program.cs)

Copied to clipboard
public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args)    ;
    ....
    ....

    // Set IgnoreScriptIsolation as true to load custom  scripts
    builder.Services.AddSyncfusionBlazor(options => {
        options.IgnoreScriptIsolation = true;
        });

    await builder.Build().RunAsync();
}
  • Add Syncfusion Blazor resources manually in the ~/Pages/_Host.cshtml file for Blazor server app or ~/wwwroot/index.html file for Blazor WebAssembly app.
Copied to clipboard
<head>
    ....
    ....
    <link href="material.css" rel="stylesheet" />
    <script src="syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

How to use CDN resources in the Blazor application

  • The same theme and script files can be referred through the CDN version by set IgnoreScriptIsolation as true in AddSyncfusionBlazor service in ~/Startup.cs file for Blazor Server app or ~/Program.cs file for Blazor WebAssembly app.
  • After that add the CDN interop script and styles in the ~/Pages/_Host.cshtml for Blazor Server app or ~/wwwroot/index.html for Blazor WebAssembly app.
Copied to clipboard
<head>
    ....
    ....
    <link href="https://cdn.syncfusion.com/blazor/19.2.49/styles/bootstrap4.css" rel="stylesheet" />
    <script src="https://cdn.syncfusion.com/blazor/19.2.49/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>
  • Now, publish the application with the production environment in the server.

Creating custom themes for Syncfusion Blazor UI Components

ThemeStudio is an online web application where you can customize the Syncfusion built-in themes and generate custom theme files for a specific set of Syncfusion Blazor UI components. It will reduce the theme file size for production environment. Refer to here for more details about ThemeStudio.