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.

Or use composer to install.

2. Install NPM Packages

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

By default, it will install the following packages.

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.

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.

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.

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.

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.

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

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.

You might also like
6 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”;
    ~~~

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.