Documentation v8.0.25

Preview Purchase

Overview

This documentation will show how to make a basic integration between Metronic and Blazor Framework.

Requirements

Download and install .NET SDK.
Install Node.js, NPM, Yarn, Webpack dependacies as explained in Webpack Quick Start.

Create Blazor Application

In your terminal, run the following command to create your Blazor app:
```
dotnet new blazorserver -o BlazorApp --no-https
```
This command creates your new Blazor app project and places it in a new directory called BlazorAppinside your current location. Navigate to the new BlazorAppdirectory created by the following command:
```
cd BlazorApp
```

Initialize NPM:

Next, we have to initialize our Blazor application with NPM. Let’s start by adding a new folder named npmjsto our project. Open a command in the npmjsdirectory and initialize npm by running the following command:
```
npm init -y
```
This will create a new package.jsonfile in the npmjs directory and initialize it with default settings.

Copy dependencies and devDependencies from file tools/package.jsonand paste them into npm/package.jsonfile.

{
  "name": "npmjs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "@amcharts/amcharts4": "^4.10.18",
    "@ckeditor/ckeditor5-alignment": "^23.1.0",
    "@ckeditor/ckeditor5-build-balloon": "^23.1.0",
    "@ckeditor/ckeditor5-build-balloon-block": "^23.1.0",
    "@ckeditor/ckeditor5-build-classic": "^23.1.0",
    "@ckeditor/ckeditor5-build-decoupled-document": "^23.1.0",
    "@ckeditor/ckeditor5-build-inline": "^23.1.0",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@popperjs/core": "^2.9.1",
    "@shopify/draggable": "^1.0.0-beta.8",
    "@yaireo/tagify": "^3.23.1",
    "acorn": "^8.0.4",
    "apexcharts": "3.23.1",
    "autosize": "^4.0.2",
    "axios": "^0.21.1",
    "bootstrap": "5.0.1",
    "bootstrap-daterangepicker": "^3.1.0",
    "bootstrap-icons": "^1.2.1",
    "bootstrap-maxlength": "^1.10.0",
    "bootstrap-multiselectsplitter": "^1.0.4",
    "chalk": "^4.1.0",
    "chart.js": "^2.9.4",
    "clipboard": "^2.0.4",
    "countup.js": "^2.0.7",
    "datatables.net": "^1.10.22",
    "datatables.net-autofill-bs4": "^2.3.5",
    "datatables.net-bs4": "1.10.22",
    "datatables.net-buttons-bs4": "^1.6.3",
    "datatables.net-colreorder-bs4": "^1.5.2",
    "datatables.net-fixedcolumns-bs4": "^3.3.2",
    "datatables.net-fixedheader-bs4": "^3.1.7",
    "datatables.net-keytable-bs4": "^2.5.3",
    "datatables.net-responsive-bs4": "^2.2.6",
    "datatables.net-rowgroup-bs4": "^1.1.2",
    "datatables.net-rowreorder-bs4": "^1.2.7",
    "datatables.net-scroller-bs4": "^2.0.3",
    "datatables.net-select-bs4": "^1.3.1",
    "dropzone": "^5.7.2",
    "es6-promise": "^4.2.8",
    "es6-promise-polyfill": "^1.2.0",
    "es6-shim": "^0.35.5",
    "esri-leaflet": "^2.3.3",
    "esri-leaflet-geocoder": "^2.3.2",
    "flatpickr": "^4.6.6",
    "fslightbox": "^3.2.3",
    "inputmask": "^5.0.5",
    "jquery": "3.5.1",
    "jszip": "^3.5.0",
    "leaflet": "^1.7.1",
    "line-awesome": "^1.3.0",
    "moment": "^2.29.1",
    "nouislider": "^14.6.3",
    "npm": "^7.5.3",
    "pdfmake": "^0.1.68",
    "prism-themes": "^1.5.0",
    "prismjs": "^1.22.0",
    "quill": "^1.3.7",
    "select2": "^4.1.0-beta.1",
    "smooth-scroll": "^16.1.3",
    "sweetalert2": "^10.10.0",
    "tiny-slider": "^2.9.3",
    "tinymce": "^5.5.1",
    "toastr": "^2.1.4",
    "typed.js": "^2.0.12",
    "wnumb": "^1.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/plugin-transform-modules-commonjs": "^7.13.8",
    "@babel/preset-env": "^7.13.12",
    "@babel/register": "^7.13.14",
    "copy-webpack-plugin": "^8.1.0",
    "css-loader": "^5.2.0",
    "css-minimizer-webpack-plugin": "^1.3.0",
    "del": "^6.0.0",
    "extract-loader": "^5.1.0",
    "file-loader": "^6.2.0",
    "fs-extra": "^10.0.0",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.7.0",
    "gulp-dart-sass": "^1.0.2",
    "gulp-if": "^3.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-rewrite-css": "^1.1.2",
    "gulp-rtlcss": "^1.4.1",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-terser": "^2.0.1",
    "imports-loader": "^1.2.0",
    "lazypipe": "^1.0.2",
    "merge-stream": "^2.0.0",
    "mini-css-extract-plugin": "^1.3.4",
    "postcss-loader": "^4.0.4",
    "pretty": "^2.0.0",
    "replace-in-file-webpack-plugin": "^1.0.6",
    "rtlcss-webpack-plugin": "^4.0.6",
    "sass-loader": "^10.1.0",
    "script-loader": "^0.7.2",
    "terser-webpack-plugin": "^5.0.3",
    "url-loader": "^4.1.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-exclude-assets-plugin": "^0.1.1",
    "webpack-merge-and-include-globally": "^2.3.4",
    "webpack-messages": "^2.0.4",
    "yargs": "^16.2.0",
    "yarn-install": "^1.0.0"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

In terminal run following command to install all dependencies:
```
npm install
```

Setup Theme Dependencies:

Create new folder srcand inside it add new file scripts.js. We will use it to initialize the global components in our Blazor Application.
Copy code from file theme/tools/webpack/scripts.jsand paste it into a created file scripts.js.
Copy js, plugins, sassfolder from theme/demo1/srcand paste them into npmjs/src, since Metronic theme use node_modulesfolder which is located inside toolsfolder but we will use a root node_modules, we need to fix some bootstrap paths in file npmjs/src/sass/components/components.scss.
Inside file npmjs/src/sass/components/components.scssupdate import path, change ../../../tools/node_modules/to ~which is alias for node_modulesfolder.
Place mediafolder form theme/demo1/srcinto BlazorApp/wwwroot/assets.
Copy plugins folder form theme/tools/webpack/pluginsand pate it into npmjs/src.

Setup Webpack:

Create webpack.config.jsfile inside npmjsfolder.
Copy following webpack configuration and paste it into npmjs/webpack.config.js.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const outputPath = path.resolve(__dirname, '../wwwroot');

module.exports = {
    mode: 'development',
    entry: {
        'assets/plugins/global/plugins.bundle': ['./src/plugins/plugins.js', './src/plugins/plugins.scss'],
        'assets/css/style.bundle': ['./src/sass/style.scss', './src/sass/plugins.scss'],
        'assets/js/scripts.bundle': './src/scripts.js',
        'assets/js/custom/widgets': './src/js/custom/widgets.js'
    },
    output: {
        // main output path
        path: outputPath,
        // output path based on the entries' filename
        filename: '[name].js',
    },
    plugins: [
        // create css file
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
    ],
    resolve: {
        alias: {
            '@': [path.join(__dirname, './')],
        },
        extensions: ['.js', '.scss'],
        fallback: {
            util: false,
        },
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    },
                ],
            },
            {
                test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            // prevent name become hash
                            name: '[name].[ext]',
                            // move files
                            outputPath: 'plugins/global/fonts',
                            // rewrite path in css
                            publicPath: 'fonts',
                            esModule: false,
                        },
                    },
                ],
            },
            {
                test: /\.(gif|png|jpe?g)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            emitFile: false,
                            name: '[path][name].[ext]',
                            publicPath: (url, resourcePath, context) => {
                                return '../';
                            },
                        },
                    },
                ],
            },
        ],
    },
};

Add an npm build script that will help us to bundle assets. Modify the scriptssection of the package.jsonfile to add the following build script.

"scripts": {
    "build": "webpack --config webpack.config.js"
}

Copy the content of file index.htmland paste it into BlazorApp/Pages/_Host.cshtml. Leave at the top of the file @page "/".
Run following command to build the assets.

npm run build

Run Application:

In your terminal, run the following command:
```
dotnet watch run
```
dotnet watch runcommand builds and startups the app, and then automatically rebuils and restarts the app whenever you make code changes. You can stop the app at any time by selecting Ctrl+C.
Wait for the app to display that it's listening on http://localhost:5000 and for the browser to launch at that address.