I just purchase metronic with the express purpose of using it with Blazor Server. I am trying to follows this getting started guideline, but appears to be out of date / incorrect and I have not been able to fill in the gaps myself:
https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/blazor-server
It says to first:
Copy the entire metronic-tailwind-html folder and paste it into the root directory of your Blazor app. Rename the copied folder to metronic . This step imports the necessary styles and assets from the original HTML package into your Blazor Server project.
After downloading metronic.zip and extracting that I have two additional zip files, metronic-v9.1.2 and metronic-v8.2.9. I assume here that v9.1.2 is relevant. I unzip that and inside is a folder "metronic-tailwind-html", which as instructed I copied into the root of my blazor app and renamed to "metronic".
Next I am supposed to:
Copy the media folder from metronic/dist/ and paste it into the wwwroot/ directory.
Firstly, there is no "media" folder under "metronic/dist", I only see one located under "metronic/dist/assets". I presume this is what I am supposed to use? Also, please clarify if the folder must be copied, or if it can be moved.
Then I need to:
Modify the webpack.config.js file to make webpack output assets to wwwroot folder:
It isn't specified where this file is, but I presume this is supposed to be the "webpack.config.js" file located in the "metronic" folder I created.
Then I need to cd into "metronic" and run:npm install & npm run dev
But there is no npm run target by the name of "dev". There is "build", which might be what I should use. However this errors out with:
[webpack-cli] Failed to load "/home/myuser/codepriv/metronic-sample/metronic/webpack.config.js" config
[webpack-cli] ReferenceError: value is not defined
at Object.<anonymous> (/home/myuser/codepriv/metronic-sample/metronic/webpack.config.js:8:14)
at Module._compile (node:internal/modules/cjs/loader:1469:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
at Module.load (node:internal/modules/cjs/loader:1288:32)
at Module._load (node:internal/modules/cjs/loader:1104:12)
at Module.require (node:internal/modules/cjs/loader:1311:19)
at require (node:internal/modules/helpers:179:18)
at WebpackCLI.tryRequireThenImport (/home/myuser/codepriv/metronic-sample/metronic/node_modules/webpack-cli/lib/webpack-cli.js:223:30)
at loadConfigByPath (/home/myuser/codepriv/metronic-sample/metronic/node_modules/webpack-cli/lib/webpack-cli.js:1406:38)
at WebpackCLI.loadConfig (/home/myuser/codepriv/metronic-sample/metronic/node_modules/webpack-cli/lib/webpack-cli.js:1515:44)
Hey please make sure that the path you're specifying in webpack.config.js is correct and wwwroot folder exists in your game project. Alternatively, you can just build assets with the initial configuration and then manually copy folders from dist/assets/ and paste them to wwwroot/assets.
Hi Karl,
I want to apologize for the late reply.
1. That's correct, in the integration guide we are referring to the metronic-v9.1.2\metronic-tailwind-html folder.
2. This is a mistake in our integration guide the path is supposed to be metronic/dist/assets/media.
3. You should modify the webpack.config.js inside metronic folder.
4. This is a mistake, the command was renamed in the recent metronic update, and the correct command is npm run build.
Thank you for reporting these issues, we will update our documentation as soon as possible.
Also, to simplify the integration you can try to use our integration example app.
https://github.com/keenthemes/metronic-tailwind-html-integration/tree/main/metronic-tailwind-blazor-server
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Running `npm run build ` results in the following error:
[webpack-cli] Failed to load "/home/myuser/codepriv/metronic-sample/metronic/webpack.config.js" config
[webpack-cli] ReferenceError: value is not defined
at Object.<anonymous> (/home/myuser/codepriv/metronic-sample/metronic/webpack.config.js:8:14)
at Module._compile (node:internal/modules/cjs/loader:1469:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
at Module.load (node:internal/modules/cjs/loader:1288:32)
at Module._load (node:internal/modules/cjs/loader:1104:12)
at Module.require (node:internal/modules/cjs/loader:1311:19)
at require (node:internal/modules/helpers:179:18)
at WebpackCLI.tryRequireThenImport (/home/myuser/codepriv/metronic-sample/metronic/node_modules/webpack-cli/lib/webpack-cli.js:223:30)
at loadConfigByPath (/home/myuser/codepriv/metronic-sample/metronic/node_modules/webpack-cli/lib/webpack-cli.js:1406:38)
at WebpackCLI.loadConfig (/home/myuser/codepriv/metronic-sample/metronic/node_modules/webpack-cli/lib/webpack-cli.js:1515:44)
Hi,
Could you please specify which Blazor version you are using?
Please make sure that the path you're specifying in webpack.config.js is correct and wwwroot folder exists in your project. Alternatively, you can just build assets with the initial configuration and then manually copy folders from dist/assets/ and paste them to wwwroot/assets.
Regards,
Lauris Stepanovs,
Keenthemes Support Team