Blazor integration

MDB frontend integration with Blazor for Standard

This article shows you how to integrate Blazor frontend application with MDB Standard UI Kit.

Prerequisites

Before starting the project make sure to install the following utilities:

Creating a new Blazor application

Follow the Blazor tutorial if you want to create a new Blazor application from scratch. This is the most comprehensive way to build it. It guides you through basic steps like installing Visual Studio (required), creating an app, and the first run - highly recommended for you, especially if this is your first experience with .NET, Blazor, or Visual Studio.

Prepare environment

After configuring our Blazor app, we should configure the frontend side for MDB.

Step 1

First of all, initialize NPM, and then install Vite for bundling JS and CSS files, and MDB Standard. If you already have a module bundler installed (e.g., Vite, Webpack, or any other), you can skip this step.

Go to your root directory and run in the terminal: 

        
            
        npm init -y
        npm i vite@latest
        npm i mdb-ui-kit

Step 2

Then go to wwwroot and create a src folder with js and scss inside for better project structure.

Step 3

In the src folder, create a main.js file and in scss, create a style.scss file. When you’re done, your complete project should look like this: 

        
          your-project/
          ├── wwwroot/
          |    ├── src/
          |    |    ├── js
          |    |    ├── scss
          |    |    |
          |    |    (...)
          |
        (...)

Integrate

Step 1

In the root directory of your project, create a file called vite.config.js and paste this basic configuration.

        
            
        import { defineConfig } from 'vite';

        export default defineConfig({
            root: 'wwwroot',
            server: {
                port: 8080,
                hot: true
            },
            build: {
                rollupOptions: {
                    input: {
                        main: './wwwroot/src/js/main.js',
                        style: './wwwroot/src/scss/style.scss',
                    },
                    output: {
                        entryFileNames: '[name].js',
                        assetFileNames: '[name].[ext]'
                    }
                }
            },
        });

Step 2

In the newly created file main.js, import JavaScript modules. You should do the same with style.scss.

Importing JavaScript modules
        
            
      import '../scss/styles.scss';

      import { Collapse, initMDB } from 'mdb-ui-kit/js/mdb.es.min.js'; // Import needed modules
            
      initMDB({ Collapse }) // Initialize imported modules to enable data-attribute init
    
        
    
        
            
      import '../scss/styles.scss';
      import * as mdb from 'mdb-ui-kit/js/mdb.umd.min.js';
      window.mdb = mdb;
Importing SCSS file
        
            
        @import 'mdb-ui-kit/mdb-ui-kit/src/scss/mdb.pro.scss';
      
        
    
        
            
        @import 'mdb-ui-kit/mdb-ui-kit/src/mdb/scss/mdb.pro.scss';
      
        
    
        
            
        @import 'mdb-ui-kit/mdb-ui-kit/src/scss/mdb.free.scss';

Step 3

Now open the package.json file and in the "scripts" key, add an object with a build script to compress JS and CSS files. The bundled files will be in the automatically created dist folder in src directory. 

        
            
        "scripts": {
          "build": "vite build"
        },

In terminal run npm run build.

Step 4

Include both main.js and style.css in your root Blazor file: App.razor. 

        
            
      <!DOCTYPE html>
      <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <base href="/" />
            <!-- Your bundled CSS -->
            <link rel="stylesheet" href="dist/style.css" />
            <!-- Font Awesome -->
            <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
                  rel="stylesheet" />
            <!-- Google Fonts -->
            <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
                  rel="stylesheet" />
            <link rel="icon" type="image/png" href="favicon.png" />
            <HeadOutlet />
        </head>
        
        <body>
            <Routes />
            <script src="_framework/blazor.web.js"></script>
            <!-- Your bundled JS -->
            <script src="dist/main.js" type="module"></script> 
        </body>
      </html>

Step 5

In case if you want to init a component after a specific event (like click) or want to hold initialization until the component is rendered, you can attach initMDB method from .js file to a window object (for scope purposes) and use the following Blazor async method in your .razor page. 

        
            
      window.mdb = function () {
        initMDB({ Collapse })
      };
      
        
    
        
            
        @code {
          protected override async Task OnAfterRenderAsync(bool firstRender)
          {
              if (firstRender)
              {
                  await JSRuntime.InvokeVoidAsync("mdb");
              }
          }
      }

Optimization

If you want to further optimize your application please visit: