diff --git a/docs/en/cli/index.md b/docs/en/cli/index.md index 940c8acccd..38503b73be 100644 --- a/docs/en/cli/index.md +++ b/docs/en/cli/index.md @@ -918,6 +918,8 @@ Usage: abp bundle [options] ```` +> This command is no longer needed if you are using Global Assets feature. See [Managing Global Scripts & Styles](../framework/ui/blazor/global-scripts-styles.md) for more information. + #### Options * ```--working-directory``` or ```-wd```: Specifies the working directory. This option is useful when executing directory doesn't contain a Blazor project file. diff --git a/docs/en/framework/ui/blazor/basic-theme.md b/docs/en/framework/ui/blazor/basic-theme.md index 031a5f0fd5..bd47645c95 100644 --- a/docs/en/framework/ui/blazor/basic-theme.md +++ b/docs/en/framework/ui/blazor/basic-theme.md @@ -19,17 +19,26 @@ If you need to manually this theme, follow the steps below: {{if UI == "Blazor"}} -* Install the [Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) NuGet package to your web project. -* Add `AbpAspNetCoreComponentsWebAssemblyBasicThemeModule` into the `[DependsOn(...)]` attribute for your [module class](../../architecture/modularity/basics.md) in the your Blazor UI project. -* Use `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic.App` as the root component of your application in the `ConfigureServices` method of your module: - - ```csharp - var builder = context.Services.GetSingletonInstance(); - builder.RootComponents.Add("#ApplicationContainer"); - ``` - `#ApplicationContainer` is a selector (like `
Loading...
`) in the `index.html`. - -* Execute `abp bundle` command under blazor project once. +* Install the [Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Bundling](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Bundling) NuGet package to your `Blazor` project. +* Add `AbpAspNetCoreComponentsWebAssemblyBasicThemeBundlingModule` into the `[DependsOn(...)]` attribute for your [module class](../../architecture/modularity/basics.md) in the your `Blazor` project. +* Install the [Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) NuGet package to your `Blazor.Client` project. +* Add `AbpAspNetCoreComponentsWebAssemblyBasicThemeModule` into the `[DependsOn(...)]` attribute for your [module class](../../architecture/modularity/basics.md) in the your `Blazor.Client` project. + +Update `Routes.razor` file in `Blazor.Client` project as below: + +````csharp +@using Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic +@using Volo.Abp.AspNetCore.Components.WebAssembly.WebApp + + + + + + + + + +```` {{end}} diff --git a/docs/en/framework/ui/blazor/theming.md b/docs/en/framework/ui/blazor/theming.md index 9a056580bb..dd942fd92f 100644 --- a/docs/en/framework/ui/blazor/theming.md +++ b/docs/en/framework/ui/blazor/theming.md @@ -106,22 +106,35 @@ using Volo.Abp.Bundling; namespace MyTheme { - public class MyThemeBundleContributor : IBundleContributor + public class MyThemeBundleContributor : BundleContributor { - public void AddScripts(BundleContext context) + public override void ConfigureBundle(BundleConfigurationContext context) { - + context.Files.AddIfNotContains("_content/MyTheme/styles.css"); } + } +} +```` - public void AddStyles(BundleContext context) +```cs +[DependsOn( + typeof(AbpAspNetCoreComponentsWebAssemblyThemingBundlingModule) +)] +public class MyBlazorWebAssemblyBundlingModule : AbpModule +{ + public override void ConfigureServices(ServiceConfigurationContext context) + { + Configure(options => { - context.Add("_content/MyTheme/styles.css"); - } + // Add style bundle + options.StyleBundles.Get(BlazorWebAssemblyStandardBundles.Styles.Global) + .AddContributors(typeof(MyThemeBundleContributor)); + }); } } -```` +``` -`styles.css` file should be added into the `wwwroot` folder of the theme project for this example. When you use the `abp bundle` command, this class is automatically discovered and executed to add the style to the page. +`styles.css` file should be added into the `wwwroot` folder of the theme project for this example. See the [Global Styles and Scripts](global-scripts-styles.md) document for more. diff --git a/docs/en/tutorials/book-store/part-01.md b/docs/en/tutorials/book-store/part-01.md index 51bfcd1b09..61de79d035 100644 --- a/docs/en/tutorials/book-store/part-01.md +++ b/docs/en/tutorials/book-store/part-01.md @@ -36,22 +36,6 @@ abp install-libs > We suggest you install [Yarn v1.22+ (not v2)](https://classic.yarnpkg.com/en/docs/install) to prevent possible package inconsistencies, if you haven't installed it yet. -{{if UI=="Blazor" || UI=="BlazorWebApp"}} - -### Bundling and Minification - -`abp bundle` command offers bundling and minification support for client-side resources (JavaScript and CSS files) for Blazor projects. This command automatically run when you create a new solution with the [ABP CLI](../../cli). - -However, sometimes you might need to run this command manually. To update script & style references without worrying about dependencies, ordering, etc. in a project, you can run this command in the directory of your `*.Blazor.Client` project: - -```bash -abp bundle -``` - -> For more details about managing style and script references in Blazor or MAUI Blazor apps, see [Managing Global Scripts & Styles](../../framework/ui/blazor/global-scripts-styles.md). - -{{end}} - ## Create the Book Entity **Domain layer** in the startup template is separated into two projects: diff --git a/docs/en/tutorials/todo/layered/index.md b/docs/en/tutorials/todo/layered/index.md index 5ba38380f3..e6e310a39a 100644 --- a/docs/en/tutorials/todo/layered/index.md +++ b/docs/en/tutorials/todo/layered/index.md @@ -113,23 +113,6 @@ abp install-libs > We suggest you install [Yarn v1.22+ (not v2)](https://classic.yarnpkg.com/en/docs/install) to prevent possible package inconsistencies, if you haven't installed it yet. -{{if UI=="Blazor" || UI=="BlazorWebApp" || UI=="MAUIBlazor"}} - -#### Bundling and Minification - -`abp bundle` command offers bundling and minification support for client-side resources (JavaScript and CSS files) for Blazor projects. This command automatically run when you create a new solution with the [ABP CLI](../../../cli/index.md). - -However, sometimes you might need to run this command manually. To update script & style references without worrying about dependencies, ordering, etc. in a project, you can run this command in the directory of your `Blazor.Client` application: - - -````bash -abp bundle -```` - -> For more details about managing style and script references in Blazor or MAUI Blazor apps, see [Managing Global Scripts & Styles](../../../framework/ui/blazor/global-scripts-styles.md). - -{{end}} - ### Run the Application {{if UI=="MVC" || UI=="BlazorServer" || UI=="BlazorWebApp"}} diff --git a/docs/en/tutorials/todo/single-layer/index.md b/docs/en/tutorials/todo/single-layer/index.md index c96c3715ef..dc865a0a75 100644 --- a/docs/en/tutorials/todo/single-layer/index.md +++ b/docs/en/tutorials/todo/single-layer/index.md @@ -115,20 +115,6 @@ abp install-libs > We suggest you install [Yarn v1.22+ (not v2)](https://classic.yarnpkg.com/en/docs/install) to prevent possible package inconsistencies, if you haven't installed it yet. -{{if UI=="Blazor" || UI=="BlazorServer"}} - -#### Bundling and Minification - -Run the following command in the directory of your blazor application: - -```bash -abp bundle -``` - -> For more details about managing style and script references in Blazor or MAUI Blazor apps, see [Managing Global Scripts & Styles](../../../framework/ui/blazor/global-scripts-styles.md). - -{{end}} - ### Run the Application {{if UI=="MVC" || UI=="BlazorServer"}} diff --git a/docs/en/ui-themes/lepton-x-lite/blazor.md b/docs/en/ui-themes/lepton-x-lite/blazor.md index 3a9051b760..7fab024f77 100644 --- a/docs/en/ui-themes/lepton-x-lite/blazor.md +++ b/docs/en/ui-themes/lepton-x-lite/blazor.md @@ -21,7 +21,27 @@ This theme is **already installed** when you create a new solution using the sta - Complete the [MVC Razor Pages Installation](asp-net-core.md#installation) for the **HttpApi.Host** application first. _If the solution is tiered/micro-service, complete the MVC steps for all MVC applications such as **HttpApi.Host** and if Auth Server is separated, install to the **OpenIddict**_. -- Add **Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme** package to your **Blazor WebAssembly** application with the following command: +- Add **Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme.Bundling** package to your **Blazor** application with the following command: + + ```bash + dotnet add package Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme.Bundling --prerelease + ``` + +- Remove **Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Bundling** reference from the project since it's not necessary after switching to LeptonX Lite. + +- Remove the old theme from the **DependsOn** attribute in your module class and add the **AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule** type to the **DependsOn** attribute. + +```diff +[DependsOn( + // Remove BasicTheme module from DependsOn attribute +- typeof(AbpAspNetCoreComponentsWebAssemblyBasicThemeBundlingModule), + + // Add LeptonX Lite module to DependsOn attribute ++ typeof(AbpAspNetCoreComponentsWebAssemblyLeptonXLiteThemeBundlingModule), +)] +``` + +- Add **Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme** package to your **Blazor.Client** application with the following command: ```bash dotnet add package Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXLiteTheme --prerelease @@ -41,14 +61,21 @@ This theme is **already installed** when you create a new solution using the sta )] ``` -- Change startup App component with the LeptonX one. - -```csharp -// Make sure the 'App' comes from 'Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite' namespace. -builder.RootComponents.Add("#ApplicationContainer"); -``` - -- Run the `abp bundle` command in your **Blazor** application folder. +Update `Routes.razor` file in `Blazor.Client` project as below: + +````csharp +@using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite +@using Volo.Abp.AspNetCore.Components.WebAssembly.WebApp + + + + + + + + + +```` {{end}} diff --git a/docs/en/ui-themes/lepton-x/blazor.md b/docs/en/ui-themes/lepton-x/blazor.md index 78e0dc433d..4c5c539724 100644 --- a/docs/en/ui-themes/lepton-x/blazor.md +++ b/docs/en/ui-themes/lepton-x/blazor.md @@ -167,35 +167,6 @@ Layout options of Blazor UI can be manageable via using **LeptonXThemeMvcOptions }); ``` - -{{if UI == "Blazor"}} - -#### Updating Bundles on Layout Changes -Layout changes requires bundling and restarting the application. Before bundling, you have to add your layout to `appsettings.json`. Make sure `AbpCli:Bundle:Paramters` has `LeptonXTheme.Layout` key with your layout name. Available values are `side-menu` & `top-menu`. - - -_You can add the following section to root level of your appsettings.json file if not added._ -```json - "AbpCli": { - "Bundle": { - "Mode": "BundleAndMinify", /* Options: None, Bundle, BundleAndMinify */ - "Name": "global", - "Parameters": { - "LeptonXTheme.Layout": "top-menu" /* Options: side-menu, top-menu */ - } - } - } -``` - -Then you can run bundling command with ABP Cli - -```bash -abp bundle -``` - -{{end}} - - ## Layouts **LeptonX** offers two **ready-made layouts** for your web application. One of them is **placed** with the **menu items** on the **top** and the other with the **menu items** on the **sides**. diff --git a/docs/en/ui-themes/lepton/customizing-lepton-theme.md b/docs/en/ui-themes/lepton/customizing-lepton-theme.md index c94ccaafce..33cdcfc5c2 100644 --- a/docs/en/ui-themes/lepton/customizing-lepton-theme.md +++ b/docs/en/ui-themes/lepton/customizing-lepton-theme.md @@ -229,12 +229,6 @@ Configure<(op } ``` -Run the following ABP CLI command to bundle the `custom.css` - -```bash -abp bundle -``` - {{end}}