Download
Download the Metronic Integration Examples to get started.
This integration example uses .NET 8.0 (Blazor Server).
Download the Metronic Integration Examples from our GitHub repository .
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
metronic-tailwind-html
folder to the project root and rename it to
metronic
.
2
Copy Media Folder
Copy the
media
folder from
metronic/dist/assets
to
wwwroot/
.
3
Adjust javascript output path
Update
webpack.vendors.js
to output assets to
wwwroot
:
module.exports = {
output: "../wwwroot/assets",
...
};
4
Adjust css output paths
Update Tailwind output paths in
package.json
to output to
wwwroot
.
"build:css": "npx tailwindcss -i ./src/css/styles.css -o ../wwwroot/assets/css/styles.css",
"build:css:watch": "npx tailwindcss -i ./src/css/styles.css -o ../wwwroot/assets/css/styles.css --watch",
"build:prod": "npx tailwindcss -i ./src/css/styles.css -o ../wwwroot/assets/css/styles.css --minify && npx webpack --env production",
5
Install Packages & Build Assets
Navigate to the metronic directory:
cd metronic
Install packages and build assets:
npm install & npm run build
6
Run Development Server
Start the development server:
dotnet run watch
That's it! The Metronic Tailwind template is now integrated into your Blazor Server project.
Creating Project
Create a Blazor Server project from scratch.
1
Install Node.js, Npm and .NET
Ensure you have Node.js, npm, and .NET 8.0 installed on your machine.
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
Integrate Metronic assets into your Blazor Server project.
1
Copy Source Folder
Copy the
metronic-tailwind-html
folder to the project root and rename it to
metronic
.
2
Copy Media Folder
Copy the media folder from
metronic/dist/assets
and paste it into the
wwwroot/
directory.
3
Adjust javascript output path
Modify the
webpack.vendors.js
file to make webpack output assets to
wwwroot
folder:
module.exports = {
output: "../wwwroot/assets",
...
};
4
Adjust css output paths
Update tailwind output paths in
package.json
to output build styles to
wwwroot
.
"build:css": "npx tailwindcss -i ./src/css/styles.css -o ../wwwroot/assets/css/styles.css",
"build:css:watch": "npx tailwindcss -i ./src/css/styles.css -o ../wwwroot/assets/css/styles.css --watch",
"build:prod": "npx tailwindcss -i ./src/css/styles.css -o ../wwwroot/assets/css/styles.css --minify && npx webpack --env production",
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 build
Integrate Core
Integrate 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");
}
}
