How Do I Copy Metronic(8.2.6) Files into My Asp.net Core Project?

Are you stuck trying to integrate the popular Metronic admin template into your Asp.net Core project? Look no further! In this article, we’ll take you by the hand and guide you through the process of copying Metronic files into your Asp.net Core project. Buckle up and let’s get started!

What is Metronic?

Metronic is a premium admin template built with Bootstrap and comes packed with a plethora of features, plugins, and UI components. With over 150,000 lines of code, it’s no wonder it’s a favorite among developers. But, getting it to work with Asp.net Core can be a challenge. That’s where we come in!

Prerequisites

Before we dive in, make sure you have the following installed:

• Visual Studio 2019 or later (Community, Professional, or Enterprise)
• .NET Core 3.1 or later
• Metronic 8.2.6 (you can purchase it from ThemeForest)

Step 1: Create a New Asp.net Core Project

Open Visual Studio and create a new Asp.net Core Web Application project. Choose the “Empty” template to keep things simple. Name your project, for example, “MetronicCore”. Click “Create” to create the project.

  <?xml version="1.0" encoding="utf-8"?>
  <Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
    <PropertyGroup>
      <TargetFramework>netcoreapp3.1</TargetFramework>
    </PropertyGroup>
    ...
  </Project>

This will create a basic Asp.net Core project with the minimum required files.

Step 2: Unzip Metronic Files

Unzip the Metronic 8.2.6 archive you purchased from ThemeForest. You should see a folder structure like this:

  metronic-8.2.6/
  assets/
  demos/
  html/
  plugins/
  ...

We’re interested in the “html” folder, which contains the actual HTML files for the admin template.

Step 3: Copy Metronic Files into Your Asp.net Core Project

Open File Explorer and navigate to the “html” folder in the Metronic archive. Select all the files and folders inside the “html” folder and copy them.

Switch back to Visual Studio and open the Solution Explorer. Right-click on the “MetronicCore” project and select “Paste”. This will copy all the Metronic files into your Asp.net Core project.

Folder/File	Description
index.html	Metronic’s default index page
pages/	Contains page-level HTML files (e.g., dashboard, login, register)
partials/	Holds partial HTML files for navigation, footer, and header
assets/	Contains CSS, JavaScript, and image files for Metronic

You should now see the Metronic files and folders in your Solution Explorer.

Step 4: Configure Asp.net Core to Serve Metronic Files

By default, Asp.net Core doesn’t serve static files from the project root. We need to configure it to do so.

In the “Startup.cs” file, add the following code in the “Configure” method:

  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
    ...
    app.UseStaticFiles();
    app.UseRouting();
    ...
  }

This tells Asp.net Core to serve static files from the project root.

Step 5: Update thelaunchSettings.json File

In the “launchSettings.json” file, update the “launchUrl” property to point to the Metronic “index.html” file:

  {
    "iisSettings": {
      "windowsAuthentication": false,
      "anonymousAuthentication": true,
      "iisExpress": {
        "applicationUrl": "http://localhost:5000",
        "sslPort": 0
      }
    },
    "profiles": {
      "MetronicCore": {
        "commandName": "Project",
        "launchBrowser": true,
        "launchUrl": "index.html",
        "environmentVariables": {
          "ASPNETCORE_ENVIRONMENT": "Development"
        }
      }
    }
  }

This sets the launch URL to the Metronic “index.html” file.

Step 6: Run the Application

Press F5 to run the application. You should see the Metronic admin template in all its glory!

If you encounter any issues, make sure to check the browser console for errors. You can also try setting the “launchUrl” property to a specific page, like “pages/dashboard.html”, to test individual pages.

Conclusion

That’s it! You’ve successfully copied Metronic files into your Asp.net Core project. Pat yourself on the back, you’ve earned it!

Remember, this is just the beginning. You’ll need to integrate Metronic’s JavaScript and CSS files, configure routing, and customize the template to fit your needs. But with this foundation, you’re ready to take on the world (or at least your Asp.net Core project)!

Happy coding!

Special thanks to the Metronic team for creating such an awesome admin template!

This article is optimized for the keyword “How do I Copy Metronic(8.2.6) Files into my Asp.net Core project?” to help developers like you find the solution they need.

Frequently Asked Question

Making Metronic shine in your ASP.NET Core project? We’ve got you covered! Here are the most frequently asked questions about copying Metronic files into your ASP.NET Core project.