logo

Keen Admin

Bootstrap 4 Admin Dashboard Framework

Laravel Integration

Overview

This documentation manual will explain how to implement Keenthemes designed admin dashboard theme "Keen" in Laravel application. This article provided assuming you have a commom knowledge/understanding of Keen, Laravel and Webpack

Requirements

1. Installing Laravel

Go to the Laravel installation site to install the application. Or use below command if you already have the Laravel installed.

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

After Laravel finished installing, move to freshly installed application directory:

cd laravel

2. Preparing Keen theme assets

For the simplicity, we will just copy the whole Keen's demo folder instead of just assets. Copy Keen demo1 folder into laravel resources folder. From /keen/theme/demo1 into /laravel/resources/demo1

3. Preparing dependencies in Laravel package.json

Open /laravel/resources/demo1/tools/package.json and copy dependencies list. Paste it into /laravel/package.json dependencies list

The image of Keen's demo1 package.json file.

The image of Laravel's package.json file.

Important! Remove default package-lock.json file first from laravels root directory before the next step.

Now we can fetch the dependencies. Run this command in Laravel application root (where package.json is placed)

npm install

And wait until it finishes downloading packages which will be placed under node_modules directory.

3. Setup Assets Path

Find and open /laravel/resources/js/app.js file. Copy and paste below codes.

import '../demo1/tools/webpack/vendors/global';
import '../demo1/tools/webpack/scripts';

The image of Laravel's app.js file.

Find and open /laravel/resources/sass/app.scss file. Copy and paste below codes.

// base style
@import "../demo1/src/assets/sass/style";

// skins for demo1 only
@import "../demo1/src/assets/sass/global/layout/aside/skins/navy";
@import "../demo1/src/assets/sass/global/layout/brand/skins/navy";
@import "../demo1/src/assets/sass/global/layout/header/skins/base/light";
@import "../demo1/src/assets/sass/global/layout/header/skins/menu/light";

The image of Laravel's app.scss file.

4. Preparing Mix Config

Find and open /laravel/webpack.mix.js file. Copy and paste below codes.

// copy images folder into laravel public folder
mix.copyDirectory('resources/demo1/src/assets/media', 'public/assets/media');

/**
* plugins specific issue workaround for webpack
* @see https://github.com/morrisjs/morris.js/issues/697
* @see https://stackoverflow.com/questions/33998262/jquery-ui-and-webpack-how-to-manage-it-into-module
*/
mix.webpackConfig({
   resolve: {
       alias: {
           'morris.js': 'morris.js/morris.js',
           'jquery-ui': 'jquery-ui',
       },
   },
});

The image of Laravel's webpack.config.js file.

5. Fix Keen's Bootstrap Path

Find and open /laravel/resources/demo1/src/assets/sass/style.scss file. Remove ../../../tools/node_modules/ and keep below code;

@import "bootstrap/scss/bootstrap";

The image of Keen's demo1 style.scss file.

6. Compiling Assets

Run command to compile assets;

npm run dev

Once finished we will see new files in public directory of Laravel application: /laravel/public/js/app.js and /laravel/public/css/app.css

That is it! We now can implement Keen theme layout into Laravel application and include scripts/styles we have compiled.

7. Sample index.html File

Copy from /laravel/resources/demo1/dist/index.html file into /laravel/resources/views/. Rename file as index.blade.php.

Open /laravel/resources/views/index.blade.php file. Include generated app.css and app.js file into HTML. Remove all existing CSS and JS file paths.

<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" >
<script src="{{ asset('js/app.js') }}"></script>

The image of index.blade.php file.

The image of index.blade.php file.

8. Sample index route

Find and open /laravel/routes/web.php file. Edit sample route to the file index.blade.php file.

return view('index');

The image of Laravel's web.php file.

9. Run in browser

Open cmd in /laravel/ and run below command. Open in browser http://127.0.0.1:8000/

php artisan serve

Keen’s Key Features

Keen empowers your project with virtually limitless array of options
to create endless unique projects.

Multi Demo

Choose a perfect design for your next project among hundreds of demos

Limitless Components

A huge collection of components to power your application with the latest UI/UX trands

Angular 8 & React Support

Enterprise ready Angular and React integration with built-in authentication module and many more

Bootstrap 4

Metronic deeply customizes Bootstrap with native look and feel

Exclusive Datatable Plugin

Our super sleek and intuitive Datatable comes packed with all advanced CRUD features

75,000+ Strong

Metronic is the only theme trusted by over 70,000 developers world wide

Continuous Updates

Lifetime updates with new demos and features is guaranteed

Quality Code

Metronic is written with a code structure that all developers will be able to pick up easily and fall in love