Keen - The Ultimate Multi-Demo Bootstrap Admin Theme

The most complete UI/UX template solution for today's web projects of any size

Laravel Integration


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


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
* @see
   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

php artisan serve