Metronic with Blazor WebAssembly
Hi,
Do you plan to create a manual how to integrate Metronic with Blazor WebAssembly? Existing instruction for Blazor Server is fine as long as you replace whole index.html and not use Blazor components. When trying to navigate through website with dynamically replaced pages, some Metronic components doesn't work. I guess the problem is with JavaScript libraries, where these cannot see updated areas of particular pages. Would be great to have some example how to make Metronic fully working with Blazor (and all its features).
Thanks
J
Replies (6)
Hi,
Please note that we only support Server Side Blazor Integration.
blazor Webassembly integration is not available at the moment.
Regards
Hi,
You can create a WebAssembly project with the command:
dotnet new blazorwasm -o BlazorApp
Then steps related to the npmjs folder must be the same as described in our doc https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/integration/blazor.html#initialize-npm
Then in file index.html instead of addicting bundled files directly try the example below:
<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
Blazor.start().then(function () {
const modules = [
"assets/plugins/global/plugins.bundle.js",
"assets/js/scripts.bundle.js",
"assets/plugins/custom/fullcalendar/fullcalendar.bundle.js",
"assets/plugins/custom/datatables/datatables.bundle.js",
"assets/js/widgets.bundle.js",
"assets/js/custom/widgets.js",
"assets/js/custom/apps/chat/chat.js",
"assets/js/custom/utilities/modals/upgrade-plan.js",
"assets/js/custom/utilities/modals/create-app.js",
"assets/js/custom/utilities/modals/users-search.js"
];
modules.forEach(item => {
const script = document.createElement("script");
script.setAttribute("src", item);
document.head.appendChild(script);
})
})
</script>For more info about the plugin initialization checkout our customization doc:
https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/customization/javascript.html
Hi,
The tutorial is not for WASM.
The tutorial does not work. I report the bugs to the team.
If you can make it work, please consider doing a tutorial, making a YouTube video, or posting a template from a Visual Studio project. It would be of great help to everyone.
Greetings and thank you very much!
Arsenio, you're right. Also tried to configure it today following Lauris' suggestions. Unfortunately with no luck.
Having some step by step tutorial or VS project template would be amazing.
KeenThemes team: do you plan something like that at some point in the future?
Metronic theme is great but I'm afraid right now I need to go with "no javascript" option and script everything I need directly in .NET.
I think you can check one of these tutorials from web to get started
https://www.syncfusion.com/faq/blazor/webassembly/how-do-i-use-npm-packages-in-blazor-webassembly
Hi,
Yes, at the moment our tutorial is a Server-Side Blazor Integration, but some steps are acceptable for WASM as well.
We will consider adding a separate WASM doc in upcoming releases.
