Laravel Metronic integration WITHOUT using your starterkit
I have
Laravel
Bootstrap
Laravel-UI for auth
tcg/voyager for admin panel installed
Using node 17. I can't use anything higher.
I do NOT want to use your starterkit or boilerplate or whatever. So your instructions to install metronic are NOT clear at all.
I need clear instructions on:
what files from metronic 8.2.x
and where to put them in an already exsiting laravel install
Replies (1)
Hi Tahir
You’ll be working with the HTML version of Metronic, so you’ll need to extract and organize the assets.
Download Metronic:
Obtain the Metronic 8.2.x package and locate the HTML version (Demo 1).
Copy Assets:
Inside the downloaded Metronic folder, find the index.html file in the Demo 1 directory.
In this file, locate all the <link> tags for stylesheets and <script> tags for JavaScript files. These tags will point to the necessary CSS and JS assets.
Create Laravel Asset Directories:
In your Laravel project, create the following directories if they don’t already exist:
public/assets for any assets Metronic uses
Copy CSS and JS Files:
From the Metronic Demo 1 folder, copy the relevant CSS files to public/assets/css.
Copy the JavaScript files to public/assets/js and any plugin files to public/assets/plugins.
Split HTML into Blade Files:
Open index.html and identify the main sections. You’ll typically want to split this into:
Header: Create a header.blade.php file and place it in resources/views/layouts/.
Footer: Create a footer.blade.php file for the footer section.
Sidebar: If your layout includes a sidebar, create a sidebar.blade.php.
Content Area: This can be a placeholder in your main layout file (e.g., app.blade.php).
Create a Main Layout Blade File:
In resources/views/layouts, create app.blade.php and include the other blade files:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ asset("assets/css/style.css") }}" rel="stylesheet">
<title>Your Laravel App</title>
</head>
<body>
@include("layouts.header")
@include("layouts.sidebar")
<div class="content">
@yield("content")
</div>
@include("layouts.footer")
<script src="{{ asset("assets/js/script.js") }}"></script>
</body>
</html>Set Up Routes and Views:
In your routes file (e.g., web.php), set up a route to a controller that returns a view using your new layout:
Route::get("/", function () {
return view("home"); // Create a home.blade.php in resources/views
});Testing:
Run your Laravel server (php artisan serve) and visit the defined route to see the integrated Metronic layout.
