Introduction

Ynex - Blazor WebApp Webassembly 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 framework 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 Ynex, 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 Ynex:

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

Ynex Compatibility with Popular Browsers:

Ynex 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 make sure you are in the server project directory: (ynex) rather than the ynex.Client

Then run the development server:

dotnet build
dotnet watch --project ynex

Using Visual Studio

• Unzip the project folder.
• Open the .slnx file.
• Ensure ynex (the server/host project) is set as the Startup Project, not ynex.Client.
• 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

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

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

Ynex 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. Copies libs from ynex.Client/node_modules to ynex.Client/wwwroot/assets/libs
3. SCSS files are compiled into CSS.

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

Automatic npm Dependency Handling

The build pipeline requires Node.js dependencies to be available in node_modules because frontend assets (such as copying npm libraries, SCSS processing, and PostCSS transforms) are executed during dotnet build.

To support both local development and CI environments, an MSBuild target named HandleNpm ensures that dependencies are available before the build continues.

<PropertyGroup>
  <!-- Detect CI environment (Azure DevOps, or generic CI=true) -->
  <IsCI Condition="'$(CI)' == 'true' Or '$(TF_BUILD)' == 'true'">true</IsCI>
</PropertyGroup>

<Target Name="HandleNpm" BeforeTargets="Build">

  <!-- CI behavior: CI pipelines MUST explicitly run 'npm ci' before 'dotnet build'. 
  This ensures deterministic, reproducible builds. -->
  <Error Condition="'$(IsCI)' == 'true' And !Exists('node_modules')" 
         Text="node_modules not found. Run 'npm ci' in the CI pipeline before building." />

  <!-- Local development behavior: If node_modules is missing, dependencies are installed automatically.
    This runs only once and will not repeat if node_modules already exists. -->
  <Exec Command="npm install --no-audit --no-fund" 
        Condition="'$(IsCI)' != 'true' And !Exists('node_modules')" />

</Target>

This approach ensures:

• Fast local development (automatically installs node_modules if not exists.)
• Strict CI reproducibility
• Reliable frontend asset processing during dotnet build

Npm Package libraries Management

• npm packages are managed through ynex.Client/package.json. To install a package, use npm install <package-name> to ensure consistent dependency versions across all environments. Before installing, make sure you are in the ynex.Client directory in the terminal.
• When dotnet build is executed, MSBuild copies the required package libs from ynex.Client/node_modules to ynex.Client/wwwroot/assets/libs, making them available for runtime use.

If you need to install a new npm package, open a terminal and navigate to the ynex.Client directory. Install the package using command: npm install <package-name>, After the installation is complete, stop the server and run dotnet build. The configured MSBuild targets will automatically copy the package libraries from ynex.Client/node_modules to ynex.Client/wwwroot/assets/libs.

    <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, min, umd directory and copies optimized files when available. If no dist folder exists, the package contents are copied instead.

SCSS to CSS Compilation

SCSS to CSS compilation automatically happens during dotnet build using the configured MSBuild and npm pipeline. This process converts all SCSS files into CSS and applies the necessary PostCSS transformations and minification as part of the build workflow.

The MinifyAndPrefix MSBuild target defined in ynex.Client/ynex.Client.csproj triggers the npm-based build pipeline:

<Target Name="MinifyAndPrefix" BeforeTargets="Build" DependsOnTargets="HandleNpm">
    <Message Importance="high" Text="Post-processing CSS: Autoprefixing and Minifying..." />
    <Exec Command="npm run sass:build" />
</Target>

This executes the sass:build script defined in ynex.Client/package.json:

"scripts": {
  "sass:watch": "sass --watch --style=expanded --no-source-map wwwroot/assets/scss:wwwroot/assets/css",
  "sass:build": "sass --style=expanded --no-source-map wwwroot/assets/scss:wwwroot/assets/css && npm run css:prefix && npm run css:minify",
  "css:prefix": "postcss wwwroot/assets/css/styles.css -o wwwroot/assets/css/styles.css && postcss wwwroot/assets/css/icons.css -o wwwroot/assets/css/icons.css",
  "css:minify": "postcss wwwroot/assets/css/styles.css --use cssnano -o wwwroot/assets/css/styles.min.css && postcss wwwroot/assets/css/icons.css --use cssnano -o wwwroot/assets/css/icons.min.css"
}

• sass:build compiles SCSS files from wwwroot/assets/scss into CSS.
• css:prefix runs PostCSS to apply transformations such as Autoprefixer (via PostCSS configuration).
• css:minify uses cssnano to generate minified production CSS files.
• sass:watch can be used during development to automatically rebuild CSS on file changes.

The PostCSS configuration is defined in ynex.Client/postcss.config.js:

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

• postcss-import enables modular CSS using @import and bundles files together.
• Autoprefixer automatically adds vendor prefixes for cross-browser compatibility.

When you run dotnet build, the following steps are executed automatically:

1. npm dependencies are installed if node_modules is missing.
2. Vendor packages from ynex.Client/node_modules are copied to ynex.Client/wwwroot/assets/libs.
3. The sass:build npm script is executed.
4. SCSS files are compiled into CSS. ( PostCSS processes CSS files (imports + autoprefixing), cssnano generates minified CSS files for production ).

Watch Mode:

During development, navigate to the ynex.Client directory in the terminal and run npm run sass:watch to automatically rebuild CSS whenever SCSS files are modified.

All frontend asset tasks are fully automated through MSBuild and npm scripts, ensuring a consistent, repeatable, and production-ready build pipeline.

The project uses configured MSBuild targets and npm scripts to compile SCSS files into CSS, and to copy npm package libraries from ynex.Client/node_modules into ynex.Client/wwwroot/assets/libs. PostCSS is used to apply autoprefixing and minification to the generated CSS.

Recommended Development Flow

• Always run dotnet build first, then start the application using dotnet watch --project ynex.
• Although dotnet watch --project ynex 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 ynex.Client/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, execute npm run sass:watch to watch SCSS changes automatically, so you do not need to manually recompile or restart the server because we have added the watch script in ynex.Client/package.json:

"scripts": {
  "sass:watch": "sass --watch --style=expanded --no-source-map wwwroot/assets/scss:wwwroot/assets/css",
}

Adding a New npm Package

If you need to install a new npm package, open a terminal and navigate to the ynex.Client directory. Install the package using command: npm install <package-name>, After the installation is complete, stop the server and run dotnet build. The configured MSBuild targets will automatically copy the package libraries from ynex.Client/node_modules to ynex.Client/wwwroot/assets/libs.

If you want to remove switcher in your template follow the below process.

    Switcher path:

        BEFORE :

            Remove this(<Switcher />)

        AFTER :

            (removed switcher path)

        <!-- Start::header-element -->
        <div class="header-element">
            <!-- Start::header-link|switcher-icon -->
            <a href="javascript:void(0);" class="header-link switcher-icon" data-bs-toggle="offcanvas" data-bs-target="#switcher-canvas">
                <i class="bx bx-cog header-link-icon"></i>
            </a>
            <!-- End::header-link|switcher-icon -->
        </div>
        <!-- End::header-element -->
    

    Need to remove complete StateService file located at path : ynex.Client/Services/StateService.cs file.
                                    

    Switcher path:

        BEFORE :

            Remove this(<LandingSwitcher  />)

        AFTER :

            (removed switcher path)

<button class="btn btn-icon btn-success switcher-icon" data-bs-toggle="offcanvas" data-bs-target="#switcher-canvas">
	<i class="ri-settings-3-line"></i>
</button>

    Switcher path:

        BEFORE :

            Remove this(<LandingSwitcher  />)

        AFTER :

            (removed switcher path)

<button class="btn btn-icon btn-success switcher-icon" data-bs-toggle="offcanvas" data-bs-target="#switcher-canvas">
	<i class="ri-settings-3-line"></i>
</button>