Admin-lte installation and setup through npm

Hi @neeraj1005

Are there errors in your browser console?

@mvd Yes

Uncaught ReferenceError: jQuery is not defined
    at all.min.js:5
    at all.min.js:5

Have you tried checking if this try catch fails?

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');

    // AdminLTE code here.
    require('admin-lte');
} catch (e) {
   console.log(e)
}

@sinnbeck I didn't understand. This is my bootstrap.js code

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');

    // AdminLTE code here.
    require('admin-lte');
} catch (e) {}

THese are the console errors

all.min.js:5 Uncaught ReferenceError: jQuery is not defined
    at all.min.js:5
    at all.min.js:5
(anonymous) @ all.min.js:5
(anonymous) @ all.min.js:5

app.js:38315 [Vue warn]: Cannot find element: #app
warn @ app.js:38315
query @ app.js:43347
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:49563
Vue._init @ app.js:42693
Vue @ app.js:42759


./resources/js/app.js @ app.js:49760
__webpack_require__ @ app.js:20
0 @ app.js:49909
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87


DevTools failed to load SourceMap: Could not load content for http://acl.test/js/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Replace this

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');

    // AdminLTE code here.
    require('admin-lte');
} catch (e) {}

with this

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');

    // AdminLTE code here.
    require('admin-lte');
} catch (e) {
   console.log(e)
}

And recompile. Check if that console.log(e) gives any output

You also seem to be missing an a div with the id #app

app.js:38315 [Vue warn]: Cannot find element: #app

@sinnbeck I'm not use vue js. I have installed admin-lte through npm now all plugins are not working like datables, select2 etc..basic css js working.

Can you show your app.js file? It seems stange that vue throws an error if it isnt installed or used :)

@sinnbeck This is the

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});


// add custom js

// $('.sidebar-toggle').on('click',function(){

//     var cls =  $('body').hasClass('sidebar-collapse');
//     if(cls == true){
//          $('body').removeClass('sidebar-collapse');
//     } else {
//          $('body').addClass('sidebar-collapse');
//     }

// });

If you arent using vue, you should remove it ;)

This is all you need in the app.js file for now

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

@sinnbeck Now this new error comes DevTools failed to load SourceMap: Could not load content for http://acl.test/css/adminlte.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

app.scss

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

// Variables
@import 'variables';

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


// admin-lte

@import "~admin-lte/dist/css/adminlte.min.css";
@import "~admin-lte/plugins/fontawesome-free/css/all.min.css";

// @import "~admin-lte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css";
// @import "~admin-lte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css";
// @import "~admin-lte/plugins/select2/css/select2.min.css";
// @import "~admin-lte/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css";

A missing map is ok. Does it give other errors or is it working?

@sinnbeck No other errors but datatables not working again.

webpack.mix.js

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .js('node_modules/popper.js/dist/popper.js', 'public/js').sourceMaps();

// mix.scripts([
//     // 'node_modules/plugins/jquery/jquery.min.js',
//     'node_modules/plugins/bootstrap/js/bootstrap.bundle.min.js',
//     'node_modules/plugins/datatables/jquery.dataTables.min.js',
//     'node_modules/admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js',
//     'node_modules/admin-lte/plugins/datatables-responsive/js/dataTables.responsive.min.js',
//     'node_modules/admin-lte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js',
//     'node_modules/admin-lte/plugins/select2/js/select2.full.min.js',
//     // other scripts
// ], 'public/js/all.min.js');

aap.scss

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

// Variables
@import 'variables';

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


// admin-lte

@import "~admin-lte/dist/css/adminlte.min.css";
@import "~admin-lte/plugins/fontawesome-free/css/all.min.css";
// @import "~admin-lte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css";
// @import "~admin-lte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css";
// @import "~admin-lte/plugins/select2/css/select2.min.css";
// @import "~admin-lte/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css";

If they arent working, they should throw an error in the console. The only error you have currently is a missing source map file

@sinnbeck what are the basic instruction for load admin-lte all plugin using npm. Do you have any idea? How to resolve this?

The only error you have currently is a missing source map file

@sinnbeck do you have any instruction guide for this. How to load admit-lte all plugins. plz tell me, It would be very appreciable.

Sorry but I have never used it before. Perhaps look at how laravel packages does it?

https://adminlte.io/docs/2.4/implementations (there are 3 laravel packages)

@neeraj1005 did you already create an Blade file with only HTML / CSS / JS for datatables?

@mvd yes I created a blade file.

this is my master file blade

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <title>{{ config('app.name', 'Laravel') }}</title>

  <!-- Fonts -->
  <link rel="dns-prefetch" href="//fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

  <!-- Styles -->
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <!-- Navbar -->
    @include('includes.common.nav')
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->

    {{-- @include('includes.superadmin.sidebar') --}}
    @include('includes.sidebar')

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    @yield('content')
  </div>
  <!-- /.content-wrapper -->

  <!-- Control Sidebar -->
    @include('includes.control-sidebar')
  <!-- /.control-sidebar -->

  <!-- Main Footer -->
  @include('includes.common.footer')
</div>
<!-- ./wrapper -->
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ mix('js/popper.js') }}"></script>

{{-- <script src="{{ mix('js/all.min.js') }}"></script> --}}
</body>
</html>

@mvd @sinnbeck Problem Solved! Here I have put the steps, In future How to install admin-lte using npm

First Step

install admit-lte using npm npm install admin-lte --save

Second Step

Open webpack.mix.js file and setup the popper.js

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .js('node_modules/popper.js/dist/popper.js', 'public/js').sourceMaps();

Third Step

Open bootstrap.js and put admin-lte code inside try-catch block

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');

    // AdminLTE code here.
    require('admin-lte');
} catch (e) {
    console.log(e);
}

Fourth Step

Open app.scss file and import css what you needed

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

// Variables
@import 'variables';

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


// admin-lte 
// Here I put only datable and select2 css similarly you can put all other css file just check admin styles what he used for plugins

@import "~admin-lte/dist/css/adminlte.min.css";
@import "~admin-lte/plugins/fontawesome-free/css/all.min.css";
@import "~admin-lte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css";
@import "~admin-lte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css";
@import "~admin-lte/plugins/select2/css/select2.min.css";
@import "~admin-lte/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css";
@import '~jquery-ui/themes/base/all.css';

Fifth step

Open app.js file and import the admin-lte plugins with path

require('./bootstrap');

import $ from 'jquery';
window.$ = window.jQuery = $;

import 'jquery-ui/ui/widgets/datepicker.js';
import'admin-lte/plugins/datatables/jquery.dataTables.min.js';
import'admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js';
import'admin-lte/plugins/datatables-responsive/js/dataTables.responsive.min.js';
import'admin-lte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js';
import'admin-lte/plugins/select2/js/select2.full.min.js';

//Don't forgot to put code also same as below otherwise it will not working

// Datepicket Code
$('#datepicker').datepicker();

//Datatable
$("#example1").DataTable({
    "responsive": true,
    "autoWidth": false,
  });

//Initialize Select2 Elements
$('.select2').select2()

//Initialize Select2 Elements
$('.select2bs4').select2({
    theme: 'bootstrap4'
})
// ..........similarly other scripts comes

Note: afte all this run command in your terminal npm run dev or npm run prod

Edited: In blade define path as

 <!-- Styles -->
 <link href="{{ asset('css/app.css') }}" rel="stylesheet">

<!--Script -->
<script src="{{ asset('js/app.js') }}"></script>

<script src="{{ mix('js/popper.js') }}"></script>

I hope It would be useful 🙏

Thank you, I just remove all things and install step by step which you gave, Its work perfectly, Thank you So Much.