Requirements

Create Blazor Application

1. In your terminal, run the following command to create your Blazor  app:
   copy

   dotnet new blazorserver -o BlazorApp --no-https
   

2. 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:
   copy

   cd BlazorApp
   

Initialize NPM:

1. 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:
   copy

   npm init -y
   

   This will create a new package.jsonfile in the npmjs  directory and initialize it with default settings.
2. Copy dependencies and devDependencies from file tools/package.jsonand paste them into npm/package.jsonfile.
   copy

   {
     "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"
   }
   

3. In terminal run following command to install all dependencies:
   copy

   npm install
   

Setup Theme Dependencies:

1. Create new folder srcand inside it add new file scripts.js. We will use it to initialize the global components in our Blazor Application.
2. Copy code from file theme/tools/webpack/scripts.jsand paste it into a created file scripts.js.
3. Copy js, plugins, sassfolder from theme/srcand paste them into npmjs/src, since Ceres HTML Free 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.
4. Place mediafolder form theme/srcinto BlazorApp/wwwroot/assets.
5. Copy plugins folder form theme/tools/webpack/pluginsand pate it into npmjs/src.

Setup Webpack:

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

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 '../';
                            },
                        },
                    },
                ],
            },
        ],
    },
};

3. 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.
copy

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

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

npm run build