Download
Get started with your Blazor Server project by downloading the Metronic integration examples from our
GitHub
repository
. These examples provide a quick way to integrate the Metronic styles into your Blazor Server project. This will give you a working starting point that you can customize to fit your needs.
Please note that the sample project does not include the Metronic Tailwind CSS source files by default. To integrate the styles, you need to copy the Metronic Tailwind CSS source files from your downloaded Metronic folder.
1
Copy Source Folder
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.
2
Copy Media Folder
Copy the media folder from
metronic/dist/
and paste it into the
wwwroot/
directory.
3
Adjust webpack config output path
Modify the
webpack.config.js
file to make webpack output assets to
wwwroot
folder:
...
const dist = value.dist.replace("../wwwroot/assets", "");
...
output: {
...
path: path.resolve(__dirname, "../wwwroot/assets"),
...
},
...
4
Install Packages & Build Assets
Open your terminal and navigate to the metronic directory:
cd metronic
Install the necessary npm packages and build the theme assets by running the following command:
npm install & npm run dev
5
Run Development Server
Run devepopment server using the following command.
dotnet run watch
That's it! You now have the Metronic Tailwind template integrated into your Blazor Server project.
Creating Project
This guide will lead you through the essential steps of creating Blazor project from scratch.
1
Install Node.js, Npm and .NET
Before starting with Blazor, ensure you have Node.js and npm (Node Package Manager) installed on your machine. Visit https://nodejs.org/ to download and install the latest NodeJS and https://dotnet.microsoft.com/en-us/download/dotnet/8.0 to download and install .NET 8.
2
Create Blazor Project
Create new Blazor project using the following command.
dotnet new blazor -o metronic-tailwind-blazor-server
4
Serve the Blazor Application
Run the development server with the following command:
dotnet run watch
Wait for the app to display that it's listening on
http://localhost:[port
number]
and for the browser to launch at that address.
Integrate Assets
This guide provides a detailed walkthrough of the key steps required to
integrate the Metronic assets into your Blazor Server project.
1
Copy Source Folder
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.
2
Copy Media Folder
Copy the media folder from
metronic/dist/
and paste it into the
wwwroot/
directory.
3
Adjust webpack config output path
Modify the
webpack.config.js
file to make webpack output assets to
wwwroot
folder:
...
const dist = value.dist.replace("../wwwroot/assets", "");
...
output: {
...
path: path.resolve(__dirname, "../wwwroot/assets"),
...
},
...
4
Install Packages & Build Assets
Open your terminal and navigate to the metronic directory:
cd metronic
Install the necessary npm packages and build the theme assets by running the following command:
npm install & npm run dev
Integrate Core
This guide provides a detailed walkthrough of the key steps required to
integrate the Metronic core components into your Blazor Server project.
1
Initialize global components
Create new
MainLayout.razor
with your layout markup and paste the following initialization code:
// MainLayout.razor
@inherits LayoutComponentBase
@inject IJSRuntime JS
@code {
protected override void OnAfterRender(bool firstRender){
JS.InvokeVoidAsync("KTComponent.init");
JS.InvokeVoidAsync("KTLayout.init");
}
}
