I am following this tutorial to implement Pusher in Laravel 5.4
Below were the step by step things done.
composer require pusher/pusher-php-server
npm install --save laravel-echo pusher-js
instantiated the Echo instance in your resources/assets/js/bootstrap.js
Initialized the pusher key in env and in bootstrap.js file.
Finally, I wrote below code in blade.
<script>
debugger;
window.Echo.channel('SendMessageChannel.1')
.listen('.App.Events.SendMessageEvent', (e) => {
console.log(e);
});
</script>
also added <script src="{{ asset('js/app.js') }}"></script> reference in layout.
While debugging, I found that window.Echo is undefined.
Am I missing anything?
Once you install laravel-echo and pusher-js, you need to run npm run dev so that app.js can have those both libraries.
Related
I have been learning Laravel (8) and have enjoyed working with tailwindcss. That said there are some things I still wish to use Bootstrap for. I am having trouble locating documentation on how to set up bootstrap with laravel mix in laravel 8. More specifically, in the resources/css/app.css file we put the following for tailwind:
#tailwind base;
#tailwind components;
#tailwind utilities;
but Im not sure what would go here for bootstrap.
I noticed older versions of laravel used php artisan ui bootstrap but that is not available in Laravel 8 from what I have seen.
Run: npm install --save-dev bootstrap jquery popper.js
How your webpack.mix.js should look:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
How your app.scss should look:
#import '~bootstrap/scss/bootstrap';
How your app.js should look:
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js');
require('bootstrap');
This is how you could use generated files in your .blade.php files:
<link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css">
<script src="{{ mix('js/app.js') }}"></script>
If you want to customize Bootstrap, copy node_modules/bootstrap/scss/_variables.scss to resources/sass/_variables.scss, change variables you want and change your app.scss to:
#import '~bootstrap/scss/functions';
#import 'variables';
#import '~bootstrap/scss/bootstrap';
You have some helpful documentation on https://getbootstrap.com/docs/4.0/getting-started/webpack/
Laracasts is also quite helpful.
use this steps
npm install bootstrap
npm install #popperjs/core
npm install sass#^1.32
npm install sass-loader
For Bootstrap Sass files, let's create the “scss” folder in /resources and then a new app.scss file in /resources/scss/. Then insert the following line to the /ressources/scss/app.scss file
#import "bootstrap";
For Bootstrap JavaScript, insert the following line to the /resources/js/app.js file :
import "bootstrap";
To compile Bootstrap JavaScript and Sass files with Laravel Mix, you need to edit the /webpack.mix.js file as follows:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass("resources/scss/app.scss", "public/css");
now you can run you command
npm run dev
Now that we have the /public/css/app.css and /public/js/app.js files with Bootstrap included, we can include them on a page (template Blade) via Laravel's asset helper () to use the Bootstrap components
On your Head
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
On your footer
<script src="{{ asset('js/app.js') }}"></script>
now i think he will work enjoy
Seems to be available in Laravel v8.24.0 though.
Be aware that doing this procedure do regenerate the webpack.mix.js.
Steps are:
install laravel ui: composer require laravel/ui
generate scaffolding: php artisan ui bootstrap
optionnaly generate the same for auth: php artisan ui bootstrap --auth
make npm install required packages: npm install
compile assets: npm run dev or npm run production (for development or for production)
Then make sure to have the following in your blade templates:
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
I can't use the app.css in my application. Every time the server returns following error
GET http://localhost:8000/css/app.css net::ERR_ABORTED 404 (Not Found).
I use a blade page.
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
I tried to use php artisan serve and php -S localhost:8000 -t public and the booth didn't work.
try this before running your project on server make sure to compile laravel-mix
npm install
and then run
npm run dev
your facing the error because app.css not compiled yet
Make sure you compile your css imports properly in resources/css/app.css first. It should look something like this:
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Bootstrap
#import 'bootstrap';
// Font Awesome
#import '#fortawesome/fontawesome-free';
Then, run this on your terminal: npm run dev. This will in turn, compile your app.css in your public/css. If you are making custom css definitions, i suggest using a custom.css and putting it in your public/css folder, and define it BELOW your app.css, like:
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/custom.css') }}" rel="stylesheet">
Assets must always be in the public folder so they can be seen by the {{asset ('') }} command.
Use this worked 100%
run this command
npm i vue-loader
then run
npm run dev
you will get your solution .
This the step for installing:
composer require laravel/ui --dev
php artisan ui bootstrap
php artisan ui bootstrap --auth
npm install
npm run dev
If you get an error at this step you can try this:
npm run prod or npm run production
I have just started using Laravel 8, so how do I include bootstrap in Laravel 8 since my pages are not loading bootstrap?
In this case it does not load the list group with the proper styling.
#extends('layouts. app')
#section('content')
<h1>{{ $title ?? '' }}</h1>
<ul class="list-group">
<li class="list-group-item">Web design</li>
<li class="list-group-item">programming</li>
<li class="list-group-item">SEO</li>
</ul>
#endsection
For install Bootstrap 4 in Laravel 8 then install following Laravel UI composer package to get command:
composer require laravel/ui
After successfully install above package then we are ready to install Bootstrap.
Exists 2 way to do that, one is a simple Bootstrap setup install and another is install Bootstrap with auth.
Install Bootstrap 4:
php artisan ui bootstrap
Install Bootstrap 4 with auth
php artisan ui bootstrap --auth
Now you can see your resource directory JS folder.
You also need to install npm and run it:
npm install
and then, run NPM
npm run dev
Now you can work with your Bootstrap 4 app.
You can use it including these lines on the header of your Blade templates:
<head>
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
Regards
if you want install bootstrap in laravel 8
install
composer require laravel/ui
then install bootstrap with auth or not
php artisan ui bootstrap (--auth)
after that you need to write
npm install && npm run dev
same steps like laravel 7
all the best
the easiest way
remove white space from here #extends('layouts. app') to #extends('layouts.app')
then put this line in resource\view\layouts\app.blade.php
<script src="{{asset('bootstrap/js/bootstrap.bundle.min.js')}}"></script>
and put this file in public folder directly bootstrap
I ran
composer require laravel/ui
then
php artisan ui bootstrap
then npm install and npm run dev
Laravel 8 is dropping bootstrap and implementing tailwind CSS.
I recommend learning and using tailwind css.
This can be easily installed with:
npm install
npm install -D tailwindcss
npx tailwindcss init
Laravel Tailwind CSS docs
Tailwind CSS
i worked with the older way when you build the website from scratch and that works, i used bootstrap.min.css, bootstrap.min.js and jquery file in public folder of laravel and linked this files to index.blade.php
<script src="{{ asset('js/jqueryv3_9_0.js') }}" defer></script>
<script src="{{ asset('js/bootstrap.mini.js') }}" defer></script>
<link href="{{ asset('css/bootstrap.mini.css') }}" rel="stylesheet">
Here is my step.
php artisan ui vue
npm install
npm run dev
app.blade
webpack
i'm sure the path js/app.js and css/app.css is correct.
but i still got html front,which step am i missing?
try asset()
<link href="{{ asset('css/main.css') }}" rel="stylesheet">
<script`` src="{{ asset('js/app.js') }}"></script>
ref link https://laravel.com/docs/7.x/helpers#method-asset
When I run $ npm install sweetalert --save-dev
I get
"sweetalert": "^1.1.3"
saved to my package.json
I run $ npm run dev to compile the app.js file with webpack which loads successfully
But when I try to use the module eg
<script>
sweetAlert("Hello world!");
</script>
I get Uncaught ReferenceError: sweetAlert is not defined
I have also tried to reference the js and css files in my header with combinations of "./node_" and "../node_" and "/node_" and so on
<script src="node_modules/sweetalert/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/sweetalert/dist/sweetalert.css">
What am I missing?
Add require('sweetalert') to your app.js file e.g.:
require('./bootstrap');
require('sweetalert');
Then run npm run dev again.
Lastly, just make sure <script src="{{ mix('js/app.js') }}"></script> is above
<script>
sweetAlert("Hello world!");
</script>
NB The above assumes you have not changed the paths/filenames that come out-of-the-box with laravel.
Hope this helps!