Download
Get started with your Asp.Net-Core project by downloading the Metronic integration examples from our
GitHub repository
. These examples provide a quick way to integrate the Metronic styles into your Asp.Net-Core 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
metronic-tailwind-aspnet-core
app. Rename the copied folder to
metronic
.
This step imports the necessary styles and assets from the original HTML package into your Asp.Net-Core project.
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",
5
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
6
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 Asp.Net-Core project.
Creating Project
This guide will lead you through the essential steps of creating Asp.Net-Core project from scratch.
1
Install Node.js, Npm and .NET
Before starting with Asp.Net-Core, 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 Asp.Net-Core Project
Create new Asp.Net-Core project using the following command.
dotnet new mvc -n metronic-tailwind-aspnet-core
4
Serve the Asp.Net-Core 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 Asp.Net-Core project.
1
Copy Source Folder
Copy the entire
metronic-tailwind-html
folder and paste it into the root directory of your Asp.Net-Core app. Rename the copied folder to
metronic
.
This step imports the necessary styles and assets from the original HTML package into your Asp.Net-Core project.
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
