How to Setup Admin Dashboard Using Laravel and Filament

Along with CodeIgniter, Zend, and others, Laravel is presently one of the most powerful frameworks. Laravel adheres to the Symphony-based Model-View-Controller design. If you’re acquainted with ASP.NET Core MVC, Laravel is quite similar, but it’s built in PHP.

In this tutorial, we will see how to integrate FontAwesome and laravel 8 + admin lte using npm. Before we start our tutorial, let’s understand some of the terms we will be using in this tutorial. 

What is AdminLTE3?

Admin LTE is a free, open-source template for an admin dashboard and control panel built on top of Bootstrap. AdminLTE has been developed over time and is now at version 3.1.0. Its simplicity and fluidity reduce development time when combined with HTML and Bootstrap. Many components are pre-made and ready to use.

What is Font Awesome 5?

Font Awesome is the 2nd most popular icon set that you can use to get scalable vector images and customize them with CSS. It offers more than 1,600 icons in the free set that you can use to find an icon to suit your needs. Font Awesome 5 is available in two editions: a PRO version with 7842 icons and a FREE version with 1588 icons.

How can I use a free copy of Font Awesome 5?

To use the Free Font Awesome 5 icons, either download the Font Awesome library or create an account at Font Awesome and get a code (called KIT CODE) to add Font Awesome to your web page. In this video, we will implement AdminLTE 3 with a fresh Laravel 8 project using the npm command. Also, we will use FontAwesome 5 for icons. No need to do it manually.

Let us start with the integration tutorial:

Step 1: Install fresh Laravel

laravel new laravel-adminlte

cd laravel-adminlte

Step 2: Install laravel ui package

composer require laravel/ui

Step 3: Configure ui assets

php artisan ui vue

Step 4: You have to install npm

npm install

Step 5:

In this step, you have to integrate admin lte in laravel

Install admin-lte 3 in Laravel 8 using: https://adminlte.io/themes/dev/AdminLTE/index3.html

npm install admin-lte

Step 6:

In this step, you have to Install fontawesome

npm install --save @fortawesome/fontawesome-free

Step 7:

Import admin lte and fontawesome css in public/css/app.css using laravel-mixins

Open: resources\sass\app.scss and paste below code

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Font Awesome
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// AdminLTE
@import '~admin-lte/dist/css/adminlte.css';

Step 8: Import admin lte js in public/js/app.js using laravel-mixins

Open : resources\js\bootstrap.js  and put below the line

require('admin-lte');

Step 9: Copy admin lte related images from node_mudule directory to public directory

Open webpack.mix and add below line

.copy('node_modules/admin-lte/dist/img', 'public/dist/img');

Now the admin lte 3 and font awesome ready to use with laravel 8

Step 10:

Let’s create a route, open web.php, and paste below code

Route::get('admin', function () { return view('admin'); });

Step 11:

Create a admin.blade.php file and past admin lte index.html code as shown in my video tutorial

Now run the below command and enjoy

npm run dev && npm run watch

Clear the Laravel cache

php artisan optimize

Start laravel serve

php artisan serve

Congratulations! You are all set!

When you first open the Laravel application in your web browser, you’ll see the login and Register buttons in the upper right corner of the screen. After successfully starting the program, you may browse the following URLs and begin experimenting with the UI.

There are other open-source programs accessible online with which you may feel more at ease, including:

• Laravel-Administrative by Jeroennoten
• AdminLTE 3’s official docs
• MultiAuthority Bitfumes

The packages listed above are fantastic and make it simple to integrate AdminLTE with Laravel. It takes just a few minutes to configure them and have your application up and running.

Conclusion

Laravel and AdminLTE 3 are two new frameworks that you need to familiarize yourself with to complete the integration projects. If you are not able to integrate the two, contact us now. We are a popular Laravel web development company with hands-on experience in Laravel.