diff --git a/docs/en/Community-Articles/2024-11-25-Global-Assets/POST.md b/docs/en/Community-Articles/2024-11-25-Global-Assets/POST.md index 01acdff96c..33dd9eb292 100644 --- a/docs/en/Community-Articles/2024-11-25-Global-Assets/POST.md +++ b/docs/en/Community-Articles/2024-11-25-Global-Assets/POST.md @@ -75,16 +75,14 @@ public class MyModuleBundleStyleBundleContributor : BundleContributor } ``` -## Use the Global Assets in the Blazor wasm app +## Use the Global Assets in the Blazor WASM -### MyProject +### MyCompanyName.MyProjectName.Blazor -Convert your `MyProject` project to integrate the `ABP module` system and depend on the `AbpAspNetCoreMvcUiBundlingModule` and `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule`: - -> If the `BlazorWebAssembly modules` in `MyProject.Client` contain `BundleContributor`, Please also add the `BlazorWebAssemblyBundlingModule` of the module to the `MyProject` project. +Convert your `MyCompanyName.MyProjectName.Blazor` project to integrate the `ABP module` system and depend on the `AbpAspNetCoreMvcUiBundlingModule` and `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule/AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule`: * The `AbpAspNetCoreMvcUiBundlingModule` uses to create the `JavaScript/CSS` files to virtual files. -* The `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule` uses to add theme `JavaScript/CSS` to the bundling system. +* The `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule/AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule` uses to add theme `JavaScript/CSS` to the bundling system. Here is how your project files look like: @@ -107,7 +105,7 @@ public class Program await app.RunAsync(); return 0; - //... + //... } } ``` @@ -118,7 +116,7 @@ public class Program [DependsOn( typeof(AbpAutofacModule), typeof(AbpAspNetCoreMvcUiBundlingModule), - typeof(AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule) //Should be added! + typeof(AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule/AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule) //Should be added! )] public class MyProjectNameBlazorModule : AbpModule { @@ -166,7 +164,7 @@ public class MyProjectNameBlazorModule : AbpModule } ``` -**`MyProjectName.csproj`:** +**`MyCompanyName.MyProjectName.Blazor.csproj`:** ```xml @@ -174,15 +172,118 @@ public class MyProjectNameBlazorModule : AbpModule + if you're using LeptonXTheme ``` -### MyProjectName.Client +### BlazorWebAssemblyBundlingModule in the ABP commercial + +Here is the list of `Bundling Modules` in the ABP commercial. If you're using the pro template, you should add them to the `MyCompanyName.MyProjectName.Blazor` project. + +| BundlingModules | Nuget Package | +|---------------------------------------------|-----------------------------------------------------| +| AbpAuditLoggingBlazorWebAssemblyBundlingModule | Volo.Abp.AuditLogging.Blazor.WebAssembly.Bundling | +| FileManagementBlazorWebAssemblyBundlingModule | Volo.FileManagement.Blazor.WebAssembly.Bundling | +| SaasHostBlazorWebAssemblyBundlingModule | Volo.Saas.Host.Blazor.WebAssembly.Bundling | +| ChatBlazorWebAssemblyBundlingModule | Volo.Chat.Blazor.WebAssembly.Bundling | +| CmsKitProAdminBlazorWebAssemblyBundlingModule | Volo.CmsKit.Pro.Admin.Blazor.WebAssembly.Bundling | + + +### MyCompanyName.MyProjectName.Blazor.Client + +1. Remove the `global.JavaScript/CSS` files from the `MyCompanyName.MyProjectName.Blazor`'s `wwwroot` folder. +2. Remove the `AbpCli:Bundle` section from the `appsettings.json` file. +3. Remove all BundleContributor classes that inherit from IBundleContributor. Then, create `MyProjectNameStyleBundleContributor` and `MyProjectNameScriptBundleContributor` classes to add your style and JavaScript files. Finally, add them to `AbpBundlingOptions`. + + +```cs +public class MyProjectNameStyleBundleContributor : BundleContributor +{ + public override void ConfigureBundle(BundleConfigurationContext context) + { + context.Files.Add(new BundleFile("main.css", true)); + } +} + + +public class MyProjectNameScriptBundleContributor : BundleContributor +{ + public override void ConfigureBundle(BundleConfigurationContext context) + { + context.Files.Add(new BundleFile("main.js", true)); + } +} +``` + +```cs +Configure(options => +{ + var globalStyles = options.StyleBundles.Get(BlazorWebAssemblyStandardBundles.Styles.Global); + globalStyles.AddContributors(typeof(MyProjectNameStyleBundleContributor)); + + var globalScripts = options.ScriptBundles.Get(BlazorWebAssemblyStandardBundles.Scripts.Global); + globalScripts.AddContributors(typeof(MyProjectNameScriptBundleContributor)); +}); +``` + +## Use the Global Assets in the Blazor WebApp + +### MyCompanyName.MyProjectName.Blazor.WebApp -1. Remove the `global.JavaScript/CSS` files from the `MyProjectName.Client`'s `wwwroot` folder. -2. Refactor all BundleContributor classes that inherit from `IBundleContributor` to inherit from `BundleContributor` instead. -3. Remove the `AbpCli:Bundle` section from the `appsettings.json` file. +Depending on the `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule/AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule` in your `MyCompanyName.MyProjectName.Blazor.WebApp` project. + +* The `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule/AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule` uses to add theme `JavaScript/CSS` to the bundling system. + + +### BlazorWebAssemblyBundlingModule in the ABP commercial + +Here is the list of `Bundling Modules` in the ABP commercial. If you're using the pro template, you should add them to the `MyCompanyName.MyProjectName.Blazor.WebApp` project. + +| BundlingModules | Nuget Package | +|---------------------------------------------|-----------------------------------------------------| +| AbpAuditLoggingBlazorWebAssemblyBundlingModule | Volo.Abp.AuditLogging.Blazor.WebAssembly.Bundling | +| FileManagementBlazorWebAssemblyBundlingModule | Volo.FileManagement.Blazor.WebAssembly.Bundling | +| SaasHostBlazorWebAssemblyBundlingModule | Volo.Saas.Host.Blazor.WebAssembly.Bundling | +| ChatBlazorWebAssemblyBundlingModule | Volo.Chat.Blazor.WebAssembly.Bundling | +| CmsKitProAdminBlazorWebAssemblyBundlingModule | Volo.CmsKit.Pro.Admin.Blazor.WebAssembly.Bundling | + + +### MyCompanyName.MyProjectName.Blazor.WebApp.Client + +1. Remove the `global.JavaScript/CSS` files from the `MyCompanyName.MyProjectName.Blazor.WebApp.Client`'s `wwwroot` folder. +2. Remove the `AbpCli:Bundle` section from the `appsettings.json` file. +3. Remove all BundleContributor classes that inherit from IBundleContributor. Then, create `MyProjectNameStyleBundleContributor` and `MyProjectNameScriptBundleContributor` classes to add your style and JavaScript files. Finally, add them to `AbpBundlingOptions`. + +```cs +public class MyProjectNameStyleBundleContributor : BundleContributor +{ + public override void ConfigureBundle(BundleConfigurationContext context) + { + context.Files.Add(new BundleFile("main.css", true)); + } +} + + +public class MyProjectNameScriptBundleContributor : BundleContributor +{ + public override void ConfigureBundle(BundleConfigurationContext context) + { + context.Files.Add(new BundleFile("main.js", true)); + } +} +``` + +```cs +Configure(options => +{ + var globalStyles = options.StyleBundles.Get(BlazorWebAssemblyStandardBundles.Styles.Global); + globalStyles.AddContributors(typeof(MyProjectNameStyleBundleContributor)); + + var globalScripts = options.ScriptBundles.Get(BlazorWebAssemblyStandardBundles.Scripts.Global); + globalScripts.AddContributors(typeof(MyProjectNameScriptBundleContributor)); +}); +``` ### Check the Global Assets