I have created a new project and I want to integrate a css sheet within my website
to add the css files I have done it as follows
line code image
and first of all I used the following commands
composer require symfony/webpack-encore-bundle
tells me to use one of the following commands
npm install
or
yarn install
but I have the following errors
npm install error 1 image
yarn install error 2 image
You should install node and yarn in your laptop
https://linuxize.com/post/how-to-install-node-js-on-ubuntu-18.04/
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
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
For my Laravel course, I need to install npm.
To install npm, I had to go to nodejs.org, installed it. Then in cmd, I write npm install
and then I got this error-
npm WARN saveError ENOENT: no such file or directory, open 'C:\xampp\htdocs\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\xampp\htdocs\package.json'
npm WARN htdocs No description
npm WARN htdocs No repository field.
npm WARN htdocs No README data
npm WARN htdocs No license field.
What to do with this?
npm install is used to install the required modules that will be used in your application.
It uses the package.json file to know which modules need to be installed and run.
In you case it seems there is no package.json file created. So you have to create a package.json file first, using the command npm init.
Go into your main directory and run the preceding command, follow the steps like enter the application name, ...etc. and the file will be created.
Then use the npm install command to install any module you wish to, and the package.json will be updated and will keep track of the modules installed in your application.
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>