How to Integrate AdminLTE with Laravel 5 5 using NPM
HTML-код
- Опубликовано: 28 сен 2024
- How to Integrate AdminLTE with Laravel 5 5 using NPM. Without using any Laravel package, we are going to add AdminLTE to Laravel 5.5. It will be faster an independent.
![DDG & G Herbo - Nosey [Official Video]](http://i.ytimg.com/vi/I9Ra0Zc2NlQ/mqdefault.jpg)
The video you put it working for simple starter page. But In my case Datatable, Select2, sweetalert is not working. How to load all plugins js of admin lte? can you please tell me. Normal page is working bootstrap jquery load. But additional admin-lte plugin is not working.
Another way to fix the "SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; " error is to add "Schema::defaultStringLength(191);" in AppServiceProvider.php in the public function boot() section. Don't forget to bring in Illuminate\Support\Facades\Schema; as well
sir jee i love ur methodology
Hi. Thank you dear.
what about compile plugins?
for font awesome, just add this line as well in app.scss
@import '~admin-lte/plugins/fontawesome-free/css/all.css';
Thanks for the contribution, it is possible with this method for laravel 5.6 with bootstrap 4 adminlte 3.0
I believe yes. I haven't tried it yet. As long as the adminlte 3 support bootstrap 4, you can do it in the same way.
skin module is not there in admin-lte install with npm
It's because you installed admin-lte 3 not. What I used was admin-lte 2.4. So please change your admin-lte version of package.json and run npm update to update all your dependencies. than, you have the skill color. :)
after done the changes in app.scss ,included css file of admin lte but i removed den but still getting this error while running command "npm run dev" can any one help with this ....
> @ development C:\xampp\htdocs\GOAL
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
98% after emitting SizeLimitsPlugin
ERROR Failed to compile with 2 errors
error in ./resources/assets/sass/app.scss
Syntax Error: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(64:2) Missed semicolon
62 | input[type="checkbox"] {
63 | margin: 4px 0 0;
> 64 | margin-top: 1px \9; // IE8-9
| ^
65 | line-height: normal;
66 |
error in ./resources/assets/sass/app.scss
Syntax Error: SyntaxError
(64:2) Missed semicolon
62 | input[type="checkbox"] {
63 | margin: 4px 0 0;
> 64 | margin-top: 1px \9; // IE8-9
| ^
65 | line-height: normal;
66 |
@ ./resources/assets/sass/app.scss 2:14-266
Asset Size Chunks Chunk Names
/js/app.js 1.2 MiB /js/app [emitted] /js/app
ERROR in ./resources/assets/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(64:2) Missed semicolon
62 | input[type="checkbox"] {
63 | margin: 4px 0 0;
> 64 | margin-top: 1px \9; // IE8-9
| ^
65 | line-height: normal;
66 |
at runLoaders (C:\xampp\htdocs\GOAL
ode_modules\webpack\lib\NormalModule.js:301:20)
at C:\xampp\htdocs\GOAL
ode_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\xampp\htdocs\GOAL
ode_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\xampp\htdocs\GOAL
ode_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Promise.resolve.then.then.catch (C:\xampp\htdocs\GOAL
ode_modules\postcss-loader\src\index.js:207:9)
@ ./resources/assets/sass/app.scss
ERROR in ./resources/assets/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.js??ref--5-5!./resources/assets/sass/app.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(64:2) Missed semicolon
62 | input[type="checkbox"] {
63 | margin: 4px 0 0;
> 64 | margin-top: 1px \9; // IE8-9
| ^
65 | line-height: normal;
66 |
@ ./resources/assets/sass/app.scss 2:14-266
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\priya.gupta\AppData\Roaming
pm-cache\_logs\2018-12-20T10_58_04_280Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development` npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\priya.gupta\AppData\Roaming
pm-cache\_logs\2018-12-20T10_58_04_367Z-debug.log
you're missing a simicolon buddy. Please check your code.
that I also can see ,I had checked already ,I have not seen such issues in the files well anyway thanks
Thanks for the video
very welcome :)
Thanks for the video, this is exactly what I needed. I have a problem that none of the font-awesome icons are visible. I've fixed it by including a CDN, but how can I do it like you?
I had only this error
CSRF token not found: laravel.com/docs/csrf#csrf-x-csrf-token
but I've fixed it and still no icons.
I have no files in my project that contain the word "awesome". I thought I would have a file somewhere called "font-awesome.min.css", but I don't.
I've tried npm update, and nothing.
I should mention that I'm a noob with packages, dependencies, compiling js and css and all that stuff.
Thanks for a detailed reply. I know most of the stuff you said but it's still helpful. I just thought that font awesome would go with admin lte since you didn't install it separately.
> node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_mo
dules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_mod
ules/laravel-mix/setup/webpack.config.js
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
Invalid configuration object. Webpack has been initialised using a configuration
object that does not match the API schema.
- configuration.output.path: The provided value "public" is not an absolute pat
h!
im getting this error
it work now
problem with laravel 5.4
i install 5.5 it work fine now
thanks
I have also been looking for this admin dashboard and finally found it. I loved your video and your implementation. I also have the same issue with font-awesome not showing and the docker is not working even after adding the js code. Pls need help urgently. Thank you
LOVE YOU GUY.IT WAS EXACTLY I WAS SEARCHING FOR A LONG TIME :0 THANX A LOT.YOU ROCKED.MAY GOD BLESS U.LET TIME TO IMPLIMENT :)
Nice of you to put this together but I found the music agonizing, sadly. If you have built Laravel before you can skip to 04:00
omfg this music is so fucking annoying. Thanks for the video though, it was informational
You can mute it bro. I didn't know you hate the music
I am unable to find skins directory in css directory of node_module folder.
Thanks a million, finally found a proper way to use AdminLTE from npm in a Laravel project!
very welcome, :)
I followed carefully the tutorial. But the toggle sidemenu doesn't work. But when I Change the resolution of the screen it works only in the fullscreen. Can anybody help me...
Update:
The toggle menu problem has been fixed by putting the script in the master page. The original and based in the tutorial are placed inside the app.js file. Btw, I'm using the version on admin-lte 2.4.2 which is the latest.
Question, I add the script to bottom, before close html, but same problem, please attach a image o code, the solution please.
Genial q hicieras un video de como hacerlo funcional del todo
It was really amazing. Thanks for your video. I was looking for exactly like this. Could you please share any other admin panel like adminLTE.
very welcome. Sure there are a lot. If you are looking for free one, here is one with cool features github.com/puikinsh/Adminator-admin-dashboard
Tks.. great video !
kindly share me any CMS full tutorial plz
Hey there. Check out the last playlist. I teach a complete cms ☺
When I try and run NPM Run Watch (on Debian 9), I get the following error: Module build failed: ModuleBuildError: Module build failed: Error: /var/www/website/node_modules/mozjpeg/vendor/cjpeg: error while loading shared libraries: libpng12.so.0: cannot open shared object file: No such file or directory
Hujjat Nazari it's a fresh install of 5.5 with auth system.
Yes, I did. Should I just try again with a new install; or do you have any other ideas?
hello , thank you for this video , i use laravel 5.6 , and i have a problem for import font-awesome and glyphicons from node-modules , my errors : localhost/fonts/fontawesome-webfont.woff2?v=4.7.0 404 (Not Found) , localhost/fonts/vendor/bootstrap/dist/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb 404 (Not Found) , i don't know how call to these
files in app.scss , could you help me ?thanx
Hi. Firstly, I assume you know that laravel 5.6 comes with bootstrap 4 and adminLTE 2* is based on Bootstrap 3. So, If you don't have any issue with styles, Watch this video
ruclips.net/video/TCjpJvijrIY/видео.html
I explain how to solve font awesome problem with adminLTE. Also, remember that we are using font awesome 4.* not version 5.
If you got any issue, feel free to ask.
i followed ur video , i used bootstrap 3.3.7 not bootsrap-sass and font-awesome 4.7.0 , admin-lte 2.4.8, i still have the same error , i dont know i need use $icon-font-path in _variables.scss?wich path i need with bootstarp , bc u used $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"; for bootstarp-sass !
for bootstrap, you don't need to add the icon fonts. Only for Fontawesome, add the
$fa-font-path: "../fonts/" !default;
I suggest you to watch the above video I mentioned
can I have acces to the source code?
Sorry man, I don't have the source code now, But this project on github is almost the same where I teach the crud with laravel
github.com/Hujjat/laravel-crud
CRUD Series :
ruclips.net/video/hiaYGxA8IWQ/видео.html
Thanks, that video helped me :)
glad it was helpful :)
my nav bar and css is still broken :{
or do i need bootstrap 3?
Well i removed the default bs4 and added everything from the adminLTE node_modules
@import '~admin-lte/bower_components/bootstrap/dist/css/bootstrap.min.css';
@import '~admin-lte/bower_components/font-awesome/css/font-awesome.min.css';
@import '~admin-lte/bower_components/Ionicons/css/ionicons.min.css';
@import '~admin-lte/bower_components/jvectormap/jquery-jvectormap.css';
@import '~admin-lte/dist/css/AdminLTE.css';
@import '~admin-lte/dist/css/skins/_all-skins.css';
for image just copy the img from dist folder to public and link it
You should check your AdminLTE versions. It should be 2.* not 3.*. Because, adminLTE3 will need bootstrap 4 and AdminLTE2 needs Bootstrap 3. Also, Laravel 5.6 comes with Bootstrap 4 and It's not working with AdminLTE3.
Soon I will make new video on how to integrate AdminLTE3 with Laravel5.6
hi i m getting a error for npm run watch command ....can u help me out
what is your error ?
done with it sir ... there was proble with npm version
same problem
Do u have video of full ecommerce site which has categories subcategories n their sub subcategories
how did you solved it?