Unable to run npm command after installing laravel - laravel

I have installed new larvel project with the name startNew, for the purpose of installing admin-lte I run the command
npm install
This cause a lot of error, if anyone know another route to install admin-lte in laravel 5.7 please help.

I installed AdminLTE in Laravel 5.6 by declaring it as a dependency in package.json
"admin-lte": "^2.4.8",
You can also use composer command, if its not working for you by following command :
composer require "almasaeed2010/adminlte=~2.4"
Reference : https://adminlte.io/docs/2.4/installation
For you though, the problem is just with the connection. Try using different network or try to install using Ubuntu subsystems.
//Update
After running composer try this command
php artisan vendor:publish --tag=adminlte
It will publish the adminlte scripts to your path so you can use something like
For CSS:
<link rel="stylesheet" href="{{ asset('/admin-lte/bower_components/font-awesome/css/font-awesome.min.css') }}">
<!-- Ionicons -->
<link rel="stylesheet" href="{{ asset('/admin-lte/bower_components/Ionicons/css/ionicons.min.css') }}">
<!-- Animate CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset('/admin-lte/dist/css/AdminLTE.min.css') }}">
For JS:
<script src="{{ asset('/admin-lte/bower_components/jquery/dist/jquery.min.js') }}" ></script>
<!-- Bootstrap 3.3.7 -->
<script src="{{ asset('/admin-lte/bower_components/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<!-- AdminLTE App -->
<script src="{{ asset('/admin-lte/dist/js/adminlte.min.js') }}"></script>
Reference :
How to integrate Admin Lte theme in Laravel 5.4
Update:
Alternate Package:
packagist.org/packages/jeroennoten/laravel-adminlte

Related

Laravel jetstream using vite

sorry in advance my english is bad
I have a problem when I will use laravel jetstream for my project. Because when i used stack livewire, the display doesn't match, here I give the output result
enter image description here
And also I've run npm install & npm run dev so it will run development using mix as default
Here I will give the project folder structure
enter image description here
maybe what I can conclude is to change the development process from mix to vite, or there are hints from the experts here on how to solve the problem?.
Thank you in advance
Actually you can fix this issue by replacing the #vite with these one in views/layouts/app and guest blade.
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
because you install previous version of laravel, #vite was added in 9.+ laravel so i think its just bc you using 8. (any <9) version, just install previous jetstream version for example composer require laravel/jetstream:2.7.0
go to resources\views\layouts\guest.blade.php and resources\views\layouts\app.blade.php and replace below code, if its not there, just insert below code in these two files.
and also remember to comment out #vite line, see below screenshot.
see screenshot
I hope it will solve the problem.
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
this can help you to solve #vite :
php artisan view:clear

console showing script loading failed in laravel

problem(showing in console)
GEThttp://127.0.0.1:8000/public/vuexy-assets/vendors/css/vendors.min.css
[HTTP/1.0 404 Not Found 580ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/bootstrap-extended.css
[HTTP/1.0 404 Not Found 1153ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/bootstrap.css
[HTTP/1.0 404 Not Found 885ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/core/menu/menu-types/vertical-menu.css
[HTTP/1.0 404 Not Found 2443ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/themes/semi-dark-layout.css
[HTTP/1.0 404 Not Found 2158ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/themes/dark-layout.css
[HTTP/1.0 404 Not Found 1917ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/components.css
[HTTP/1.0 404 Not Found 1664ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/colors.css
[HTTP/1.0 404 Not Found 1405ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/core/colors/palette-gradient.css
[HTTP/1.0 404 Not Found 2671ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/css/pages/authentication.css
[HTTP/1.0 404 Not Found 3185ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets-sep/assets/css/style.css
[HTTP/1.0 404 Not Found 3580ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/images/pages/login.png
[HTTP/1.0 404 Not Found 5053ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/vendors/js/vendors.min.js
[HTTP/1.0 404 Not Found 3878ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/js/core/app-menu.js
[HTTP/1.0 404 Not Found 4127ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/js/core/app.js
[HTTP/1.0 404 Not Found 4425ms]
GEThttp://127.0.0.1:8000/public/vuexy-assets/js/scripts/components.js
[HTTP/1.0 404 Not Found 4681ms]
Loading failed for the <script> with source “http://127.0.0.1:8000/public/vuexy-assets/vendors/js/vendors.min.js”. 127.0.0.1:8000:297:1
Loading failed for the <script> with source “http://127.0.0.1:8000/public/vuexy-assets/js/core/app-menu.js”. 127.0.0.1:8000:302:1
Loading failed for the <script> with source “http://127.0.0.1:8000/public/vuexy-assets/js/core/app.js”. 127.0.0.1:8000:303:1
Loading failed for the <script> with source “http://127.0.0.1:8000/public/vuexy-assets/js/scripts/components.js”. 127.0.0.1:8000:304:1
This is my problem. when I load my website, its frontend UI is gone, only shown the basic HTML structure. I tried every thing to make it to correct but I cant make it.
code from my layout
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy-assets/css/bootstrap.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy-assets/css/bootstrap-extended.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy-assets/css/colors.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy-assets/css/components.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy-assets/css/themes/dark-layout.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vuexy-assets/css/themes/semi-dark-layout.css') }}">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="{{asset('vuexy-assets/css/core/menu/menu-types/vertical-menu.css') }}">
<link rel="stylesheet" type="text/css" href="{{asset('vuexy-assets/css/core/colors/palette-gradient.css') }}">
<!-- END: Page CSS-->
<script src="{{ asset('/vuexy-assets/vendors/js/vendors.min.js') }}"></script>
<!-- BEGIN Vendor JS-->
<!-- BEGIN: Page Vendor JS-->
<script src="{{ asset('/vuexy-assets/vendors/js/ui/jquery.sticky.js') }}"></script>
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<script src="{{ asset('/vuexy-assets/js/core/app-menu.js') }}"></script>
<script src="{{ asset('/vuexy-assets/js/core/app.js') }}"></script>
<script src="{{ asset('/vuexy-assets/js/scripts/components.js') }}"></script>
my page currently looks like this
what I tried
install npm
npm run div
composer require laravel/ui
php artisan install bootstrap ui
I also tried installing yarn, and also did sass-loader degrade to "sass-loader": "10.1.1", from 11.0.0
By default, Laravel's asset helper points to public folder inside your application folder. If your assets are placed there, then your asset path should be like this.
Instead of
If your assets are outside from public directory, then please make a magic link between that directory and public directory.
Rewrite link from
To
This will correct the following errors.

Laravel. Where Should I put CSS files?

I put file name style.css in {Laravel_project}/public/css/
I included in blade file like this.
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}" >
and then checked its source on browser.
<link rel="stylesheet" type="text/css" href="http://localhost:8000/css/style.css" >
the file doesn't exist.
404
Not Found
Laravel version
$ php artisan --version
Laravel Framework 7.11.0

Laravel 5.5 css path is not working under public directory

I have used the following to generate the CSS file:
<link rel="stylesheet" href="{{ asset('public/global/bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
However, I see the css is not loading. From the view source, I see the below code which is not opening (404).
<link rel="stylesheet" href="http://127.0.0.1:8000/public/global/bower_components/bootstrap/dist/css/bootstrap.min.css">
But, if I remove the "public keyword" from the above path, its working.
I'm using php artisan serve in Ubuntu 16.04
<link rel="stylesheet" href="{{ public_path('global/bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="http://127.0.0.1:8000/global/bower_components/bootstrap/dist/css/bootstrap.min.css">
these two works. Because when 127.0.0.1:8000 load, it starts making the project from public path.
and asset(/path) is represent asset folder. You must change this with public_path
You can use asset() helper,
<link href="{{ asset('public/global/bower_components/bootstrap/dist/css/bootstrap.min.css') }}" type="text/css" rel="stylesheet">

using elixir mix.version() in Laravel causes view to fail

I'm a new in Laravel and am trying to use the mix.version() in the Gulpfile.js in Laravel 5.3 for cache busting.
this is my gulpfile.js:
elixir(function (mix){
mix.less('custom.less');
mix.version('public/css/custom.css');
});
When running gulp command in my terminal, my less is compiled and versioned correctly, but when I try to include the the following line my view file, it breaks my view:
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css) }}">
screenshot of my error
Is there a specific include or something I need to call in my view file to ensure the above line of code actually works? If I remove the above elixir line in my view code and hard code link my css file, then it works, but I can't leave it like that as I need versioning for cache busting.
Thanks so much, I have tried the documentation, but not examples exist of how to include the code in the view file.
There is a ' missing
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css) }}">
should be
<link rel="stylesheet" type="text/css" href="{{ elixir('/css/custom.css') }}">
Regarding the question title
{{ elixir('/css/custom.css) }}
is causing the error not the mix.version()

Resources