TECHNIG
Gateway for IT Experts and Tech Geeks

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

adminlte - Free Premium Admin Template
AdminLTE – Free Premium Admin Template

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.

7 Comments
  1. lorem says

    Sir, I followed the steps but it doesn’t work. I copied the index.html from the adminlte original file and pasted in the master page. But the toggle sidebar doesn’t work I followed everything. Can you help me? Btw, this is a nice tutorial If i can fixed the issues I will share you site with my fellow friends there also looking for this out. Out of all admin lte tutorial this is the easiest way. But still theres a unfinished step I gues.

  2. lorem says

    Sir, any update on how to fixed the sidebar menu.

    1. Hujjat Nazari says

      What’s your sidebar problem?
      If you have a problem. watch the video https://www.youtube.com/watch?v=nCoHPmk3gPI

  3. lorem ipsum says

    The sidebar doesn’t work sir.

    1. Hujjat Nazari says

      You mean when you click on the toggle, it’s not opening and closing the sidebar menu? if so, please add the javascript to your app.js file. Read the last section of the article. 7. Debug and Fix Problems

  4. Alphaws says

    // import admin lte css
    ~~~scss
    @import “~admin-lte/dist/css/adminLTE.css”;
    @import “~admin-lte/dist/css/skins/_all-skins.css”;
    ~~~
    please change the first import : (Capital A letter)
    ~~~scss
    @import “~admin-lte/dist/css/AdminLTE.css”;
    ~~~
    and you need font-awesome
    ~~~
    $ npm install font-awesome –save
    ~~~
    app.scss:
    ~~~scss
    // import font-awesome css
    @import “~font-awesome/scss/font-awesome.scss”;
    ~~~

  5. Fitra says

    How about chart?
    Is that any several link or script must be include in the project? If any, where?

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

where to buy viagra buy generic 100mg viagra online
buy amoxicillin online can you buy amoxicillin over the counter
buy ivermectin online buy ivermectin for humans
viagra before and after photos how long does viagra last
buy viagra online where can i buy viagra