How to Integrate AdminLTE to Laravel 5 with NPM

Laravel is not only an appealing PHP framework, but it has made the community of PHP larger. Developing any SAAS or web application with this framework is easy and flawless. So, as a web developer or PHP developer, you must learn this framework. In this article, we will show you how to integrate a free admin Template with Laravel framework step by step. You will learn AdminLTE plus Laravel 5 integration.

AdminLTE plus Laravel 5 Integration

If you are new to Laravel, we recommend you to read our other tutorials about Laravel first then continue this article. So, we assume you know the basics.

You should know that we are not using any Laravel Packages for this integration. Though there are some Packages that you can install and everything is setup, we show you how you can use npm to install AdminLTE independently.

1. Install a Fresh Laravel 5.5

We will start with a fresh Laravel project so that you can see follow along without any issue.

Laravel new Admin

Or use composer to install.

composer create-project --prefer-dist laravel/laravel Admin

2. Install NPM Packages

Now, you should install npm packages. Run the following command in your project directory.

npm install

By default, it will install the following packages.

  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }

Of course, you can remove any of them if you want from the package.json file.

3. Install AdminLTE with NPM

As mentioned, AdminLTE is free and open-source. You can download directly from its website or use npm.

npm install admin-lte --save-dev

4. Configure CSS and JavaScript Files

Time to configure CSS and JavaScript files. So, you know that you can configure asset files in resources/assets directory.

Config CSS Files

Open your app.scss file which is in sass folder then add the following line of code at the end.

// import admin lte css

@import "~admin-lte/dist/css/adminLTE.css";
@import "~admin-lte/dist/css/skins/_all-skins.css";

It’s the reference to AdminLTE CSS and skin colours. ( Those files are in node_modules folder )

JavaScript File

Open your bootstrap.js file that’s located in the js folder. Now add the following line of code after try and catch block.

// AdminLTE code here. 
require('admin-lte');

It will add the essential JavaScript files.

5. Compile Files

So far you are done and you can use any component of AdminLTE in your project. But you must compile those file before.

npm run production

The above command will compile and minify the CSS and JavaScript files to the public directory.

6. Make a Master Page.

You can create a master page in the resources/view/layouts directory. Then paste the code from the AdminLTE blank.html to the master page. Now, Remove all the links to CSS files from the header and the same JavaScript files from the footer.

Now just give a link to app.css in the header and a script link to app.js in the footer.

<!-- should be added into the header -->
<link rel="stylesheet" href="{{asset('css/app.css')}}">

<!-- should be added into the footer before body tag ends -->
http : // asset('js/app.js')

If you use this master template now, everything should work except the toggle menu. We will fixe it in the next step.

7. Debug and Fix Problems

So, the toggle menu is not working. To fix it, just add the following code in your app.js which is located in resources/assets/js/app.js

// add custom js 

$('.sidebar-toggle').on('click',function(){

           var cls =  $('body').hasClass('sidebar-collapse');
           if(cls == true){
                $('body').removeClass('sidebar-collapse');
           } else {
                $('body').addClass('sidebar-collapse');
           }

});

Finally, recompile the file. ( step 5 )

Conclusion

So, it was AdminLTE plus Laravel 5 integration with NPM. We hope this article has been informative for you. If you have any questions or any problem during integration, feel free to ask below.