Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Getting started with Blazor Server and Tailwind


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)



Could you please provided updated (tested) instructions on how to get started?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


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)


If I skip step 3. (I.e., I do not edit webpack.config.js at all) then it appears to work. Is that correct?



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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(