Warning: Starting with version 18.3.0.35 (Volume 3, 2020), the Syncfusion Blazor library is integrated with the JavaScript Isolation feature of Blazor. So, the CRG online tool is no longer needed for your production environment and it is deprecated now. That is, the Syncfusion Blazor library itself handles the Syncfusion interop scripts and it is no longer needs to be added manually in the layout page (_Host.cshtml/index.html) for production. You can still use the ThemeStudio online web application to customize and generate the Syncfusion Blazor themes for a specific set of components.
Syncfusion provides an option to generate a selective component’s interop script and styles using the Custom Resource Generator
(CRG) web tool.
Search and select the required Syncfusion Blazor UI components from the CRG to generate a specific set of component resources.
Refer to the following steps to search and select the components in CRG:
CRG
.Type the required component name in the search bar, and then select the checkbox. The dependency of the selected component is resolved in the application itself, so you do not need to choose each dependent component manually.
Click the expand icon, and then select the required features for the specific set of components.
If the entire features of the component are needed, then click the specific component’s checkbox to select all features.
Select the required built-in themes from the Select Themes option. This provides an option to select more than one theme.
After selecting the required component resources, download the custom interop script and styles from CRG.
Refer to the following steps to download the custom resources in CRG:
Click the DOWNLOAD button at the bottom of the page. Select the Minified option to generate the minified file output for production.
Change the file name as needed, and then click GENERATE button in the pop-up.
Now, the bundling process for the selected components will be started, and the output will be downloaded as a zip file.
The final output contains the custom interop script and styles for the selected components and an import.json file, which stores the current settings.
Warning: Starting with version 18.3.0.35 (Volume 3, 2020), the following configuration is no longer needed for the production environment. You can use the default getting started configuration in production mode.
~/wwwroot
folder.Set DisableScriptManager
as true in AddSyncfusionBlazor
service in ~/Startup.cs
file for Blazor Server app or ~/Program.cs
file for Blazor WebAssembly app.
Blazor Server App (~/Startup.cs)
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
// Set DisableScriptManager as true to load custom scripts
services.AddSyncfusionBlazor(true);
services.AddSingleton<WeatherForecastService>();
}
Blazor WebAssembly App (~/Program.cs)
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args) ;
....
....
// Set DisableScriptManager as true to load custom scripts
builder.Services.AddSyncfusionBlazor(true);
await builder.Build().RunAsync();
}
Now, manually add the custom interop script and styles in the ~/Pages/_Host.cshtml
for Blazor Server app or ~/wwwroot/index.html
for Blazor WebAssembly app.
<head>
....
....
<link href="material.css" rel="stylesheet" />
<script src="syncfusion-blazor.min.js" type="text/javascript"></script>
</head>
To add more components or upgrade the latest Syncfusion Blazor library resources, it is not necessary to generate from the scratch in the CRG. Just import the old import.json file, make the changes, and then download it again from the CRG application.
Refer to the following steps to import previous settings in CRG:
Click the IMPORT SETTINGS button at the bottom of the page.
Upload the import.json file, so that the previously stored data will be restored in the CRG application. Now, add more components and export the resources again.