Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Upgrade from Metronic 6 to Metronic 8 on Laravel Project


Hey guys,
I got Metronic way back when it was on v6 and used it on a Laravel project of mine.
If I recall correctly, I just put all the JS/CSS (/demo1/src/assets) etc in /resources/assets/ and /public/assets/
This was before a dedicated "Laravel version" so this was a manual setup.

Now I want to upgrade to Metronic 8 and I foresee a lot of manual work/recoding but I want to know if there are any tips to make this process faster / cleaner / better?
But mainly:

1) Any search/replace regex I can use on my views to convert all the class names or will I have to manually code all the views again from scratch? (Has the basic structure stayed the same and just class name changes or fundamentally has layer structure changed, etc too?)

2) Was my "manual installation" above done right or is there a process I can follow to make future upgrades easier (eg: a single 'metronic' folder under /resources/ that houses all the assets which I can just overwrite assets in the future from the latest distro)?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (11)


Side Note: https://preview.keenthemes.com/laravel/metronic/docs/file-structure
Refers to _keenthemes subdirectory (with src/tools subdirectories) in the starterkit, but there is no such directory. I assumed these are just copies of /html/demo1/src and /html/tools/



Hi Michael

The starter kit is a different version. You might want to upgrade the Laravel App. You may get the download link from the laravel_app folder in the ThemeForest zip.

The structure stays the same. Could you please download it first and have to take a look?

The transition from version 6 to version 8 entails substantial improvements and modifications. But the assets structure is quite similar.

Thanks.



Can you elaborate one what makes starterkit and laravel_app different?
I'm looking at the file structure and the starterkit structure is cleaner and makes more sense:

starterkit
/public/assets/[js/css/etc]


laravel_app
/public/demo1/[js/css/etc]


Also, any answer on (1) in the OP



Hi Michael

You have to manually code the views. Since Metronic v6 to v8, we have changed a lot our code base, in terms of the HTML structure, class naming, assets structure, etc. It's great if you separated the controller logic and views which can be reused with a new view.

starterkit is the latest Laravel and simplifies the frontend integration without many PHP code parts. laravel_app is the previous version.

Thanks



Our project has already been updated to use the latest Laravel version, so then I think we will use starterkit and not laravel_app.
Unless you can think of any reason why I would want to use laravel_app instead?



Hi Micheal,

Suppose you are already using the starter kit, It would be better. Future updates will release on this package. Laravel App is already deprecated but we still keep Laravel App as some users might still need it.

Thanks



Thanks Faizal,
I am using starterkit and basically took my old project and moved everything new in starterkit and merged it into my project (new files, but also different files).

However, for all my 'sub-content', I am used to having sub-files that yield all the content.
eg:


@extends('index')
@section('title', '| '. __('Students'))
@section('page')
//the content
@stop


However, your default structure appears different. You dont appear to be inserting using a standard laravel "section" / "yield", but your content is defined by "<x-default-layout>" (in the content file) and $slot (in the layout file) and I cannot find any documentation on this.

I want to future proof this project so that I have little to no work for me on future upgrades, so while I could just override your master layout file, this means that with each subsequent update I would always have to be changing the files and I want to minimise this as much as possible (as well as leave everything as close to original as possible to make use of all features/functionality).

Please advise.



I see now you're using Laravel Components and that is why its using <x-default-layout>. I feel like this is a gross over complication of the matter.

starterkit has a 'static' page header.

Assuming I want the page title to be set by the controller:

$page_title = 'Dashboard';
return view('theview',compact('page_title'));


Then in resources/views/layout/partials/sidebar-layout/_page-title.blade.php you try:

@isset($page_title)<h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{__($page_title)}}</h1>@endisset


It claims the variable isnt set.

Only way I see around this is to remove {{slot}} from resources/views/layout/_default.blade.php and replace it with @yield('page')

Then in the view, have it @extends('layout._default') and have a @section('page') with the content.



Hi Michael,

Sorry for the delay.

Yes, you are right. We are using Component. You could do like this.

In resources/views/layout/partials/sidebar-layout/_page-title.blade.php


@stack("page-title")


In your page blade file:


@push("page-title")
your title here
@endpush


https://laravel.com/docs/10.x/blade#stacks

Thanks



Thanks Faizal.



No problem.

Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(