From 6f379e771f1da2fdf105fabc45569c07974c49ee Mon Sep 17 00:00:00 2001 From: maliming Date: Thu, 26 Dec 2024 14:25:48 +0800 Subject: [PATCH 1/5] Update `ABP Global Assets - New way to bundle JavaScript/CSS files in Blazor WebAssembly app`. --- .../2024-11-25-Global-Assets/POST.md | 118 ++++++++++++++++-- 1 file changed, 106 insertions(+), 12 deletions(-) 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..7157ab7445 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,16 @@ 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`: +Convert your `MyCompanyName.MyProjectName.Blazor` project to integrate the `ABP module` system and depend on the `AbpAspNetCoreMvcUiBundlingModule` and `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule/AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule`: -> If the `BlazorWebAssembly modules` in `MyProject.Client` contain `BundleContributor`, Please also add the `BlazorWebAssemblyBundlingModule` of the module to the `MyProject` project. +> If the `BlazorWebAssembly modules` in `MyCompanyName.MyProjectName.Blazor.Client` contain `BundleContributor`, Please also add the `BlazorWebAssemblyBundlingModule` of the module to the `MyCompanyName.MyProjectName.Blazor` project. * 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 +107,7 @@ public class Program await app.RunAsync(); return 0; - //... + //... } } ``` @@ -118,7 +118,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 +166,7 @@ public class MyProjectNameBlazorModule : AbpModule } ``` -**`MyProjectName.csproj`:** +**`MyCompanyName.MyProjectName.Blazor.csproj`:** ```xml @@ -174,15 +174,109 @@ public class MyProjectNameBlazorModule : AbpModule + if you're using LeptonXTheme ``` -### MyProjectName.Client +### MyCompanyName.MyProjectName.Blazor.Client -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. +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 => +{ + options + .StyleBundles + .Add(BlazorStandardBundles.Styles.Global, bundle => + { + bundle.AddContributors(typeof(MyProjectNameStyleBundleContributor)); + }); + + options + .ScriptBundles + .Add(BlazorStandardBundles.Scripts.Global, bundle => + { + bundle.AddContributors(typeof(MyProjectNameScriptBundleContributor)); + }); +}); +``` + +## Use the Global Assets in the Blazor WebApp + +### MyCompanyName.MyProjectName.Blazor.WebApp + +Depending on the `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule/AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule` in your `MyCompanyName.MyProjectName.Blazor.WebApp` project. + +> If the `BlazorWebAssembly modules` in `MyCompanyName.MyProjectName.Blazor.WebApp.Client` contain `BundleContributor`, Please also add the `BlazorWebAssemblyBundlingModule` of the module to the `MyCompanyName.MyProjectName.Blazor.WebApp` project. + +* The `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule/AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule` uses to add theme `JavaScript/CSS` to the bundling system. + +### 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 => +{ + options + .StyleBundles + .Add(BlazorStandardBundles.Styles.Global, bundle => + { + bundle.AddContributors(typeof(MyProjectNameStyleBundleContributor)); + }); + + options + .ScriptBundles + .Add(BlazorStandardBundles.Scripts.Global, bundle => + { + bundle.AddContributors(typeof(MyProjectNameScriptBundleContributor)); + }); +}); +``` ### Check the Global Assets From 0cb6928802dc197b066e10eb33d30061b747e73d Mon Sep 17 00:00:00 2001 From: maliming Date: Thu, 26 Dec 2024 15:32:59 +0800 Subject: [PATCH 2/5] Update POST.md --- .../2024-11-25-Global-Assets/POST.md | 30 ++++++++++++++++--- 1 file changed, 26 insertions(+), 4 deletions(-) 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 7157ab7445..1909fcf725 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 @@ -81,8 +81,6 @@ public class MyModuleBundleStyleBundleContributor : BundleContributor Convert your `MyCompanyName.MyProjectName.Blazor` project to integrate the `ABP module` system and depend on the `AbpAspNetCoreMvcUiBundlingModule` and `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule/AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule`: -> If the `BlazorWebAssembly modules` in `MyCompanyName.MyProjectName.Blazor.Client` contain `BundleContributor`, Please also add the `BlazorWebAssemblyBundlingModule` of the module to the `MyCompanyName.MyProjectName.Blazor` project. - * The `AbpAspNetCoreMvcUiBundlingModule` uses to create the `JavaScript/CSS` files to virtual files. * The `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule/AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule` uses to add theme `JavaScript/CSS` to the bundling system. @@ -224,14 +222,25 @@ Configure(options => }); ``` +#### If the `BlazorWebAssembly modules` in `MyCompanyName.MyProjectName.Blazor.Client` contain `BundleContributor`, Please also add the `BlazorWebAssemblyBundlingModule` of the module to the `MyCompanyName.MyProjectName.Blazor` project. + +Here is the `Bundling Modules` list in the ABP commercial modules. + +| 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 | + + ## Use the Global Assets in the Blazor WebApp ### MyCompanyName.MyProjectName.Blazor.WebApp Depending on the `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule/AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule` in your `MyCompanyName.MyProjectName.Blazor.WebApp` project. -> If the `BlazorWebAssembly modules` in `MyCompanyName.MyProjectName.Blazor.WebApp.Client` contain `BundleContributor`, Please also add the `BlazorWebAssemblyBundlingModule` of the module to the `MyCompanyName.MyProjectName.Blazor.WebApp` project. - * The `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule/AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule` uses to add theme `JavaScript/CSS` to the bundling system. ### MyCompanyName.MyProjectName.Blazor.WebApp.Client @@ -278,6 +287,19 @@ Configure(options => }); ``` +#### If the `BlazorWebAssembly modules` in `MyCompanyName.MyProjectName.Blazor.WebApp.Client` contain `BundleContributor`, Please also add the `BlazorWebAssemblyBundlingModule` of the module to the `MyCompanyName.MyProjectName.Blazor.WebApp` project. + +Here is the `Bundling Modules` list in the ABP commercial modules. + +| 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 | + + ### Check the Global Assets Run the `MyProject` project and check the `https://localhost/global.js` and `https://localhost/global.css` files. You should be able to see the `JavaScript/CSS` files content from the Bundling system: From 2c75a4c3c629ad643c7663e4ac75724f94aea187 Mon Sep 17 00:00:00 2001 From: maliming Date: Thu, 26 Dec 2024 15:36:49 +0800 Subject: [PATCH 3/5] Update POST.md --- .../2024-11-25-Global-Assets/POST.md | 47 ++++++++++--------- 1 file changed, 24 insertions(+), 23 deletions(-) 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 1909fcf725..8485d8439c 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 @@ -177,6 +177,19 @@ public class MyProjectNameBlazorModule : AbpModule ``` +### BlazorWebAssemblyBundlingModule in the ABP commercial + +Here is the `Bundling Modules` list in the ABP commercial. You should add them to `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. @@ -222,9 +235,18 @@ Configure(options => }); ``` -#### If the `BlazorWebAssembly modules` in `MyCompanyName.MyProjectName.Blazor.Client` contain `BundleContributor`, Please also add the `BlazorWebAssemblyBundlingModule` of the module to the `MyCompanyName.MyProjectName.Blazor` project. +## Use the Global Assets in the Blazor WebApp + +### MyCompanyName.MyProjectName.Blazor.WebApp + +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 `Bundling Modules` list in the ABP commercial modules. +Here is the `Bundling Modules` list in the ABP commercial. You should add them to `MyCompanyName.MyProjectName.Blazor.WebApp` project. | BundlingModules | Nuget Package | |---------------------------------------------|-----------------------------------------------------| @@ -235,14 +257,6 @@ Here is the `Bundling Modules` list in the ABP commercial modules. | CmsKitProAdminBlazorWebAssemblyBundlingModule | Volo.CmsKit.Pro.Admin.Blazor.WebAssembly.Bundling | -## Use the Global Assets in the Blazor WebApp - -### MyCompanyName.MyProjectName.Blazor.WebApp - -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. - ### MyCompanyName.MyProjectName.Blazor.WebApp.Client 1. Remove the `global.JavaScript/CSS` files from the `MyCompanyName.MyProjectName.Blazor.WebApp.Client`'s `wwwroot` folder. @@ -287,19 +301,6 @@ Configure(options => }); ``` -#### If the `BlazorWebAssembly modules` in `MyCompanyName.MyProjectName.Blazor.WebApp.Client` contain `BundleContributor`, Please also add the `BlazorWebAssemblyBundlingModule` of the module to the `MyCompanyName.MyProjectName.Blazor.WebApp` project. - -Here is the `Bundling Modules` list in the ABP commercial modules. - -| 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 | - - ### Check the Global Assets Run the `MyProject` project and check the `https://localhost/global.js` and `https://localhost/global.css` files. You should be able to see the `JavaScript/CSS` files content from the Bundling system: From 70b59c6b72efb8f88d6bcd6863748e7d9b62a0aa Mon Sep 17 00:00:00 2001 From: maliming Date: Thu, 26 Dec 2024 15:38:18 +0800 Subject: [PATCH 4/5] Update POST.md --- docs/en/Community-Articles/2024-11-25-Global-Assets/POST.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 8485d8439c..837f81bfa0 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 @@ -179,7 +179,7 @@ public class MyProjectNameBlazorModule : AbpModule ### BlazorWebAssemblyBundlingModule in the ABP commercial -Here is the `Bundling Modules` list in the ABP commercial. You should add them to `MyCompanyName.MyProjectName.Blazor` project. +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 | |---------------------------------------------|-----------------------------------------------------| @@ -246,7 +246,7 @@ Depending on the `AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModu ### BlazorWebAssemblyBundlingModule in the ABP commercial -Here is the `Bundling Modules` list in the ABP commercial. You should add them to `MyCompanyName.MyProjectName.Blazor.WebApp` project. +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 | |---------------------------------------------|-----------------------------------------------------| From b2f5419176713990cf33e71c08133bde191fedde Mon Sep 17 00:00:00 2001 From: maliming Date: Thu, 26 Dec 2024 17:02:51 +0800 Subject: [PATCH 5/5] Update POST.md --- .../2024-11-25-Global-Assets/POST.md | 36 ++++++------------- 1 file changed, 10 insertions(+), 26 deletions(-) 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 837f81bfa0..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 @@ -219,19 +219,11 @@ public class MyProjectNameScriptBundleContributor : BundleContributor ```cs Configure(options => { - options - .StyleBundles - .Add(BlazorStandardBundles.Styles.Global, bundle => - { - bundle.AddContributors(typeof(MyProjectNameStyleBundleContributor)); - }); - - options - .ScriptBundles - .Add(BlazorStandardBundles.Scripts.Global, bundle => - { - bundle.AddContributors(typeof(MyProjectNameScriptBundleContributor)); - }); + var globalStyles = options.StyleBundles.Get(BlazorWebAssemblyStandardBundles.Styles.Global); + globalStyles.AddContributors(typeof(MyProjectNameStyleBundleContributor)); + + var globalScripts = options.ScriptBundles.Get(BlazorWebAssemblyStandardBundles.Scripts.Global); + globalScripts.AddContributors(typeof(MyProjectNameScriptBundleContributor)); }); ``` @@ -285,19 +277,11 @@ public class MyProjectNameScriptBundleContributor : BundleContributor ```cs Configure(options => { - options - .StyleBundles - .Add(BlazorStandardBundles.Styles.Global, bundle => - { - bundle.AddContributors(typeof(MyProjectNameStyleBundleContributor)); - }); - - options - .ScriptBundles - .Add(BlazorStandardBundles.Scripts.Global, bundle => - { - bundle.AddContributors(typeof(MyProjectNameScriptBundleContributor)); - }); + var globalStyles = options.StyleBundles.Get(BlazorWebAssemblyStandardBundles.Styles.Global); + globalStyles.AddContributors(typeof(MyProjectNameStyleBundleContributor)); + + var globalScripts = options.ScriptBundles.Get(BlazorWebAssemblyStandardBundles.Scripts.Global); + globalScripts.AddContributors(typeof(MyProjectNameScriptBundleContributor)); }); ```