I am beginner to laravel. I have created project. And I have run following commands to it.
composer require laravel/ui --dev
npm install
npm run dev
php artisan ui vue
php artisan ui vue --auth
after this command I get Login and Register menus on my welcome page.
Now my laravel welcome page loads properly. But when I click on login it shows plain html.
I serached and checked app.blade.php for links of css and js. It looks fine.
layouts/app.blade.php having following links
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}" defer></script>
Where should be the problem? Why Login and Register not getting css, when welcome page gets css? Please guide.
Step 1:
Download nodejs
Install nodejs in your pc
Step 2:
then open your project root and command
composer require laravel/ui
php artisan ui vue --auth
npm install
npm run dev
After npm command it will generate node_module folder inside your project remove that folder.
npm command only for .css and .js file.
for help see this video: https://www.youtube.com/watch?v=hOYW3jqh19I&t=9s
The very simple solution for this problem is use the following cdn
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
instead of
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
the links I have provided are the bootstrap cdn and check that . It will work
and use
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
instead of
<link href="{{ asset('js/app.js') }}" rel="stylesheet">
I tried following commands in laravel 8 and it works well
composer require laravel/ui
php artisan ui bootstrap
php artisan ui bootstrap --auth
npm install
npm run dev
npm run production
Some times cache can be the issue in such case, you can run
php artisan cache:clear and optionally php artisan view:clear.
You can download these two files from here :
CSS File
JS File
Then create css and js folders into public folder just put :
CSS file : app.css into project_folder/public/css/
JS file : app.js into project_folder/public/js/
Its work for me. I think it will also work for you. Thanks.
You need to run the below commands for laravel 7.x.
Solution
First go to your project root folder C:\Whatever\Your_project_name>
composer require laravel/ui
Try any of the below command according to your front-end framework.
php artisan ui vue --auth
php artisan ui bootstrap --auth
php artisan ui react --auth
At the end don't forget to run
npm install
If your User Interface is not working properly try below command.
npm run production
If the above commands don't work for you.
Reason: The error is because there is no css code in the public/css/app.css when you have executed all the commands but still there would be no code in that folder.
Take the file or code from here https://github.com/sabaoonbedar/Css-File-For-Laravel-Developers/tree/master and place it in your project public/css/app.css OR create similar folders if don't exists.
For me it was simply the npm run dev command.
In my ubuntu 19.10, it has to run with sudo
I tried following commands in laravel 8 and it works well, you can also give it a try.
composer require laravel/ui
php artisan ui bootstrap --auth
npm install
npm run dev
npm run production
You must compile packages use npm run watch command. after that you can run npm run dev
You need to clear the cache on your browser. To confirm that go into incognito mode and try your URL again. If it works then that's the problem.
run
npm install
npm run dev
npm run watch for continues compiling
It seems to me that your node.js version was outdated. Just update the Node.js and start from the beginning by installing the laravel ui and so on.
composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
npm install
npm run dev
Hope it will fix the problem.
Run the below commands in your Laravel project.
composer require laravel/ui
php artisan ui bootstrap --auth
npm install
npm run dev
I face the same problem while implementing the composer require laravel/ui in laravel version 7 but I fixed it by following the below steps.
First :
Download nodejs
Install nodejs in your pc
Second : run this command
composer require laravel/ui
Once the laravel/ui package has been installed, you may install the frontend scaffolding using the ui Artisan command:
// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth
To generate node_module folder inside your project run the below command
npm install
Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file. Typically, your compiled CSS will be placed in the public/css directory:
npm run dev
some time you may need to run this command npm audit fix or npm audit fix --force to fix some packages if they required to be.
Maybe some time by running this command npm run dev or npm run watch it will show you an error like below.
# dev C:\xampp\htdocs\Auth
npm run development
# development C:\xampp\htdocs\Auth
mix
Additional dependencies must be installed. This will only take a moment.
Finished. Please run Mix again.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! # development: `mix`
jus run the npm run watch again it will start Mix █████████████████████████ emitting (95%) after the success the build will be succeeded too.
This command working in my machine command.
npm run dev
composer require laravel/ui
php artisan ui vue
npm install
npm run dev
php artisan ui vue --auth
npm install
npm run dev
You will have to call npm install and npm run dev for both scaffolding
I was facing the same issue CSS & js works with CDN links but not with default CSS. so there was files no CSS code in the public/css/app.css and js files so I copy and paste the code and files in the public directory from my another laravel directory and now that works fine.
after install every thing try this
npm update vue-loader
In my case, I just downloaded the latest version of nodejs and install it. After, just type npm run dev. And refresh your browser and good to go!! Cheers!!
you can use the styles and the script like this :
Style :
<link href="/css/app.css" rel="stylesheet">
JS :
<script src="/js/app.js"></script>
Run the command:
npm uninstall popper.js && npm i #popperjs/core
to remove the deprecated package and install their new Popper v2.
Public your CSS. I mean keep your CSS file in the public directory of your project.
Your css file should be here at: yourprojectname\public\css\app.css
Related
Quite new to Laravel and I made sure I did looked into the documentations of Laravel 9 before diving but incase I missed one, I have this issue wher app.css and app.js on the the link served by artisan are not found. Boostrap scaffolds are now in the views folder but it seems like the (quite unsure about this) the app.js & app.css are still inaccessible so bootstrap doesnt work. I made sure to run npm install and npm run dev after the bootstrap and boostrap --auth installation from artisan. As of now the project is totally fresh so it works except the boostrap won't load because of the 404 error. Here are some snapshots of the projects including the running terminal sessions.
Commands used in sequence:
composer require laravel/ui --dev
php artisan ui bootstrap
php artisan ui boostrap --auth
npm install
npm run dev
All of the threads I've looked here in SO are stating they're not running npm dev which I am running already but I still haven't manage to find a working solution.
You can follow below steps:
create project with laravel
composer create-project laravel/laravel "project name"
install laravel UI for bootstrap 5
composer require laravel/ui
Generate login / registration scaffolding with bootstrap 5
php artisan ui bootstrap --auth
import bootstrap 5 path in vite.config.js
import path from 'path';
resolve:{
alias:{
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
}
}
import bootstrap 5 scss in js folder
import '../sass/app.scss';
import * as bootstrap from 'bootstrap';
use #vite blade directive in your template
#vite(['resources/js/app.js'])
finally build your asset file.
npm run build
and then run project using artisan command.
php artisan serve
in browser in console part shows the Error:
GET http://localhost:8000/asset/app.js net::ERR_ABORTED 404 (Not Found)
then I tried to install boostrap using documentantion steps are.
1. composer require laravel/ui --dev.
2. php artisan ui bootstrap.
3. php artisan ui bootstrap --auth.
4. npm install.
but here again in 4th Section it shows the Error and that the command not found.
Still not working bootstrap
You are saying you are getting an error with the 4th command. I assume you do not have NPM installed.
Try installing NPM from here https://www.npmjs.com/get-npm. NPM is Node Package Manager. It will handle the front end dependencies for you. And is used to compile everything.
Also, after npm install run npm run dev to compile the javascript and such.
Install node to enable npm.
Also you can include bootstrap CDN directly in the tag in your blades like a normal HTML project without installing it.
Here's how to add bootstrap CDN in your HTML file - Remember, blades are finally HTML files.
Bootstrap CDN
Today I installed laravel 6.x version for a new project.
I have PHP 7.3 in my system so laravel 6 was successfully installed.
Then I run this command to set the Auth UI for VueJS.
artisan ui vue —auth
along with this command:
composer require laravel/ui --dev
But when I checked my login page, it was just an html skeleton.
I checked over the internet and found a solution and tried to run this command,
npm run dev
But still am getting an ugly login page without css and Js files. I checked for CSS and JS files but found no solution.
Anyone please help and tell me how can I setup the front end scaffolding.
Thanks in advance
The command to implement Auth is as follows:
composer require laravel/ui
php artisan ui vue --auth
If your Login and Register page only shows plain HTML. And CSS is not loading properly then run this two command:
npm install
npm run dev
OR
Simply you've to follow this two-step.
composer require laravel/ui
php artisan ui:auth
This will solve your problem for sure!
Check if your npm install shows any deprecation error,
if shows then go to nodejs official site https://nodejs.org/en/ and download and install latest one in your system.
Then in your terminal run:
npm install
npm run dev
That's it.
In your laravel public folder, css and js should have shown after that npm run dev command.
Now your login and register page should be nice looking as expected.
Do one thing,
1) Create app.css and put into project_name/public/css/
2) Create app.js and put into project_name/public/js/
I believe it will work.
If not, make sure you have used these commands before.
npm install
npm run dev
Thanks.
I'm sorry to ask this simple question. I'm completely new to package managers, npm in particular. Normally, what I use is linking my CSS/Scripts to CDN's
In this case, I'm wirtting a Laravel app which will need a bit more advanced <select>, so I decided to try bootstrap-select which covers my requirements.
Before trying npm or composer I tried the CDN way, but there was a file missing, so it didn't work.
In the documentation, there are several ways to install it, one is via npm:
npm install bootstrap-select
Other will be via composer:
composer require snapappointments/bootstrap-select
After it finishes installing, I check in my /vendor folder, and yes, there's a snapappointments with several folders beneath.
So... now what?
How do I link my CSS to this freshly installed package? same goes to scripts?
this way is by using npm after you run the command npm install bootstrap-select
then go to /resources/assets/sass/app.scss to import the SCSS file
you will import it like that:
#import "../../../node_modules/bootstrap-select/sass/bootstrap-select.scss";
after that you need to add also the js file in, go to this path:
resources/assets/js/app.js
and import js files like that
require('../../../node_modules/bootstrap-select/dist/js/bootstrap-select');
At Last:
run this command npm run watch or npm run dev to make a compiled css&js file
npm run watch run compile your files every time you hit save
npm run dev to compile your files on time
and import it to your app blade using asset helper function like this,
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app,js') }}"></script>
I am pretty new in PHP and moreover in Laravel and I have the following problem: I have to correctly install latest Bootstrap CSS framework version into my Laravel application.
Into the Bootstrap download page: http://getbootstrap.com/getting-started/#download
it says that I can do it using composer by this statment:
composer require twbs/bootstrap
So I tryied and I obtained this output in my console:
Andrea#Andrea-PC MINGW64 /c/xampp/htdocs/HotelRegistration
$ composer require twbs/bootstrap
Using version ^3.3 for twbs/bootstrap
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
- Installing twbs/bootstrap (v3.3.7) Downloading: 100%
Package illuminate/html is abandoned, you should avoid using it. Use laravelcollective/html instead.
Writing lock file
Generating autoload files
> Illuminate\Foundation\ComposerScripts::postUpdate
> php artisan optimize
Generating optimized class loader
The compiled services file has been removed.
What exactly means the previous output? It has been successful? My doubt is that I can't find the bootstrap.css file into the .../resources/assets directory of my project.
Why? What am I missing? How can I use Bootstrap into my project?
EDIT 1: I saw that Composer have putted BootStrap in this folder:
.../vendor/twbs/bootstrap/dist/css/bootstrap.css
So, following this SO link: How to setup bootstrap after downloading via composer?
I have tryed to do:
php artisan asset:publish --path="vendor/twbs/dist/css" bootstrap/css
to publich the content of the vendor/twbs/dist/css as an asset but I obtain this error message:
Andrea#Andrea-PC MINGW64 /c/xampp/htdocs/HotelRegistration
$ php artisan asset:publish --path="vendor/twbs/dist/css" bootstrap/css
[Symfony\Component\Console\Exception\CommandNotFoundException]
There are no commands defined in the "asset" namespace.
So it seems that asset statment doesn't exist.
What have I to do?
You are importing bootstrap wrong way. Mostly laravel uses composer for pulling server-side libraries. Bootstrap is used for front end basically.
Laravel By Default Provides Bootstrap for you, see here.
Following are the steps which will help you.
Step 1 : Check Node.js and NPM are installed on your machine.
node -v
npm -v
If not installed don't worry here is the link.
Step 2 : (Considering you installed node.js) Go to project root folder and execute following command.
npm install
this command will download all pre-requisites along with your bootstrap.
Step 3 : compile the required js files.
npm run dev
Step 4 : Add js file to your application.
<script src="/js/app.js"></script> (Or it would be already imported)
That's it!
You can find more here and here
Hope it helps you!
If i were you i wouldn't do all of that, after a fresh installation of laravel 5.4 twitter bootstrap come out of the box you just need to load your dependancies using npm .
Install npm dependancies :
npm install
Then, Implementing Bootstrap into your project is now simple. Open resources/assets/sass/app.scss and see this line:
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
now to compile all bootstrap sass files to your public folder public/ you should use npm run dev or npm run production if you're in production environnement .
then you have all the Bootstrap styles ready for you to use.
That’s literally all that is required.
****Bootstrap 4 can be easily installed with following steps.****
Step 1 — Remove existing bootstrap
Uninstall Bootstrap
npm uninstall --save-dev bootstrap-sass
Step 2 — Install Bootstrap 4
Install Bootstrap 4 beta and popperjs
npm install --save-dev bootstrap#^4.0.0-beta.2 popper.js
Step 3 — Update code references
In resources/assets/js/bootstrap.js replace
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
with
try {
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default;
require('bootstrap');
} catch (e) {}
In resources/assets/sass/app.scss replace
#import “~bootstrap-sass/assets/stylesheets/bootstrap”
with
#import “~bootstrap/scss/bootstrap.scss”
In resources/assets/sass/_variable.scss replace
$font-size-base: 14px;
with
$font-size-base: 0.875rem;
Step 4 — Recompile Assets
Run
npm run dev
Now you have removed all Bootstrap 3 references and installed Bootstrap 4
This worked for me:
run php artisan preset bootstrap
install node.js if not from the official website
run npm install
run npm run dev
And use these at your HTML:
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>