Introduction

Yzen - Blazor Web App Server Premium Bootstrap5 Admin Template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using razor, C#, CSS3, Bootstrap 5 and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website. If You Love Our Template Design Please don't forgot to rate it. Thank you so much! 😊

Support and Updates:

When you purchase Yzen, you gain access to free future updates to ensure your template remains up-to-date. Plus, our support team is always ready to assist with any questions.

What Do You Get with the Yzen:

Yzen provides all necessary Razor, CSS, SCSS, JS files, along with detailed Documentation to help you easily customize and implement the template.

Yzen Compatibility with Popular Browsers:

Yzen is fully compatible with major browsers, ensuring a seamless user experience across Chrome, Firefox, Safari, Edge, and Opera.

Step 1: Visit the official .NET SDK download page.

Step 2: Click on the Download .NET SDK button.

Step 3: Run the installer to install the SDK on your system.

Using Visual Studio Code

• Unzip the project folder you received.
• Open the project folder in Visual Studio Code.
• Open a terminal and navigate to your project directory:

cd /path-to-your-project

Then run the development server:

dotnet build
dotnet watch run

Using Visual Studio

• Unzip the project folder.
• Open the .sln file.
• Press F5 to run the application.

Introduction

The Blazor Core Starter Kit helps developers quickly start a project with a clean, ready-to-use structure. It includes layouts and components commonly used in modern web apps.

Benefits

• Saves setup time with a pre-built project structure.
• Includes components like Sidebar, Header, Footer, etc.
• Helps organize Razor components, templates, and assets.
• Easier integration of your custom Razor pages.

Important Files

• Components/Layout/CustomLayout.razor – Layout for auth and error pages.
• Components/App.razor – Root component.
• Components/Layout/LandingLayout.razor – Layout for the landing page.
• Components/Layout/NavMenu.razor, MainHeader.razor, Footer.razor, etc. – UI layout components.

For more support, visit: https://support.spruko.com/

Yzen uses AspNetCore.SassCompiler to compile SCSS files into CSS as part of the ASP.NET Core application lifecycle. This ensures styles are always generated automatically and stay in sync with your SCSS source files.

Installation

Install the AspNetCore.SassCompiler NuGet package to enable SCSS compilation. You can install it using any of the following methods:

• Package Manager Console: Install-Package AspNetCore.SassCompiler
• dotnet CLI: dotnet add package AspNetCore.SassCompiler
• PackageReference:

<PackageReference Include="AspNetCore.SassCompiler" Version="1.97.1" />

How it Works

SCSS files located in wwwroot/assets/scss are compiled into CSS and written to wwwroot/assets/css.

Configuration

The Sass compiler is configured using sasscompiler.json:

                            {
                            "Source": "wwwroot/assets/scss",
                            "Target": "wwwroot/assets/css",
                            "Arguments": "--no-source-map --error-css --style=expanded"
                            }
                                    

Live CSS Changes (Development Mode)

To enable live SCSS-to-CSS recompilation during development, the Sass compiler is registered in the application startup Program.cs:

                            builder.Services.AddSassCompiler();
                                    

When enabled, any changes made to SCSS files are automatically recompiled at runtime, allowing CSS updates to reflect immediately without restarting the application.

Key Benefits

• Instant SCSS-to-CSS recompilation during development
• No manual build or watch commands required
• Fully integrated with ASP.NET Core
• Works seamlessly with MSBuild and PostCSS pipeline

Note: Initial CSS files are generated by running dotnet build, Run dotnet build once to generate CSS files if they do not exist in wwwroot/assets.

Yzen uses MSBuild targets to manage frontend assets in a structured and automated way. All tasks are executed as part of the standard ASP.NET Core build lifecycle.

This approach avoids introducing a separate JavaScript build system (such as esbuild or Gulp) and keeps asset processing fully aligned with the .NET build process.

Pipeline Responsibilities

1. Ensures Node.js dependencies (node_modules) are installed
2. Resolves and copies libs from node_modules
3. Processes CSS using PostCSS

Why MSBuild?

MSBuild is used as the single orchestration layer for frontend assets to ensure consistency across development, CI/CD, and production builds.

• Runs automatically during dotnet build
• No separate frontend build commands required
• Works consistently across local and server environments
• Avoids duplicate or out-of-sync build pipelines

Tools like esbuild or Gulp are intentionally avoided to reduce complexity and prevent parallel build workflows.

Automatic npm Installation

The build pipeline copies libs from node_modules to wwwroot/assets/libs during dotnet build. If node_modules is missing, the build would fail with an error.

To prevent this, an MSBuild target automatically runs npm install before the build when node_modules is not present.

<Target Name="CheckNpm" BeforeTargets="Build">
  <Exec Command="npm install"
        Condition="!Exists('node_modules')" />
</Target>

This ensures all required npm dependencies are available and avoids build errors in fresh clones or CI environments.

Npm Package libs Management

npm packages are managed through package.json. You can install a package using npm install package-name, ensuring consistent dependency versions across all environments.

When dotnet build is executed, MSBuild copies the required package libs from node_modules to wwwroot/assets/libs, making them available for runtime use.

When a new npm package is installed, add its package name to the MSBuild Packages list in yzen.csproj

<Packages Include="bootstrap; swiper; chart.js; select2; new-package-name;" />

The build pipeline handles the rest automatically.

<Target Name="CopyVendorAssets" AfterTargets="Build">
  <Message Importance="high"
        Text="Auto-resolving and copying vendor assets..." />

  <Copy SourceFiles="@(AllFiles)"
        DestinationFolder="wwwroot\assets\libs\%(Folder)\%(RecursiveDir)"
        SkipUnchangedFiles="true" />
</Target>

The pipeline intelligently detects whether a package exposes a dist directory and copies optimized files when available. If no dist folder exists, the package contents are copied instead.

PostCSS Processing

After SCSS to CSS compilation by SassCompiler, CSS files are post-processed using PostCSS. PostCSS is used as a lightweight transformation step rather than a full bundling solution.

The PostCSS configuration is defined in postcss.config.js:

    module.exports = {
        plugins: [
            require('postcss-import'), 
            require('autoprefixer'),
        ]
    };

• postcss-import – enables modular CSS with @import and bundles it into one file.
• Autoprefixer – automatically adds required CSS prefixes to ensure cross-browser compatibility.

<Target Name="MinifyAndPrefix" AfterTargets="Build">
  <Message Importance="high"
        Text="Post-processing CSS: Autoprefixing and Minifying..." />

  <Exec Command="npx postcss wwwroot/assets/css/icons.css
        -o wwwroot/assets/css/icons.css" />

  <Exec Command="npx postcss wwwroot/assets/css/styles.css
        -o wwwroot/assets/css/styles.css" />

  <Exec Command="npx postcss wwwroot/assets/css/icons.css
        -o wwwroot/assets/css/icons.min.css --use cssnano" />

  <Exec Command="npx postcss wwwroot/assets/css/styles.css
        -o wwwroot/assets/css/styles.min.css --use cssnano" />
</Target>

• cssnano – used only for generating minified production CSS files

When you run dotnet build command, the following actions take place:

1. npm dependencies are installed automatically (if missing)
2. npm package libs are copied to wwwroot/assets/libs from node_modules folder
3. CSS is autoprefixed and minified

All frontend asset tasks are handled automatically by MSBuild, keeping the asset pipeline simple, predictable, and production-ready.

The project uses SassCompiler to compile SCSS files into CSS, and MSBuild targets to copy npm package libraries from node_modules into wwwroot/assets/libs. PostCSS is used for autoprefixing and minification of the generated CSS.

Recommended Development Flow

Always run dotnet build first, then start the application using dotnet watch run. Although dotnet watch run performs a build before starting, it may run an incremental build and some MSBuild targets (such as copying libs) may not execute fully. Therefore, if wwwroot/assets/libs is missing, the project may start successfully, but some components can fail with missing library errors because the required libs are not copied from node_modules.

During development, SassCompiler watches SCSS changes automatically, so you do not need to manually recompile or restart the server because we have registered the Sass Compiler in the application startup Program.cs:

                            builder.Services.AddSassCompiler();
                                    

When enabled, any changes made to SCSS files are automatically recompiled at runtime, allowing CSS updates to reflect immediately without restarting the application.

Adding a New npm Package

When adding a new npm package, install it using npm install package-name, stop the server, and add the package name to the MSBuild Packages list in the .csproj file. Then run dotnet build again to copy the package libs into wwwroot/assets/libs.

Important: If the package name is not added to the Packages list, its library files will not be copied to wwwroot/assets/libs.