Laravel 8 with AdminLTE 3 + Font Awesome 5 + DataTables + DataTables Buttons + HTML5 & PDF Export Buttons

3 min readDec 2, 2021

Today we are going to create a Laravel 8 Project with AdminLTE 3 and Font Awesome + DataTables + DataTables Buttons + HTML5 & PDF Export buttons

Lets begin with a new Laravel project

Creating New Laravel Project Using Composer

composer create-project laravel/laravel my-project

Now get into the newly created project

cd my-project

Installing AdminLTE UI Theme

AdminLTE UI Theme can be installed using composer command

composer require infyomlabs/laravel-ui-adminlte

Now install AdminLTE theme assets, by running the following command in the terminal

php artisan ui adminlte

Integrating Auth Templates

You can Optionally integrate Authentication UI for Login, Register, Change Password, Forgot Password, and many more. This could be achieved, by running the following on your terminal

php artisan ui adminlte — auth

Admin LTE Theme has now been installed to our newly created project, You can verify using checking app.scss file under resources/css directory

and authentication scaffoldings under resources/views directory

Installing Font-Awesome 5

Now let’s install font-awesome 5 free fonts and icons with node’s npm module

npm install --save @fortawesome/fontawesome-free

After installing font-awesome packages now add following lines to app.scss file as below

$fa-font-path: "../webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";

Installing Data Tables with Buttons and HTML5 & PDF Export

npm install datatables.net-bs4 datatables.net-responsive-bs4 datatables.net-buttons-bs4 jszip pdfmake — save-dev

After installing all packages add following lines to app.scss file

@import ‘~datatables.net-bs4/css/dataTables.bootstrap4.min.css’;
@import ‘~datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css’;
@import ‘~datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css’;

and also add following line to bootstrap.js file

window.JSZip = require(“jszip”);
require(“datatables.net-bs4”);
require(“datatables.net-buttons-bs4”);
require(“datatables.net-buttons/js/buttons.html5.js”);
require(“datatables.net-buttons/js/buttons.print.js”);
require(“datatables.net-responsive-bs4”);
var pdfMake = require(“pdfmake/build/pdfmake.js”);
var pdfFonts = require(“pdfmake/build/vfs_fonts.js”);
pdfMake.vfs = pdfFonts.pdfMake.vfs;

Congratulation we have successfully added all required files to our project, now lets compile all assets by running following commands

for development builds

npm run dev

for production builds

npm run prod

Now you can update you .env file and start running your project.

Thank you for reading.