Installing Toastr.js in a Laravel Application

Overview
Toastr.js is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. Check official Documentation here.

Note that the idea from this article can be used to install any Javascript library in your Laravel App other than inserting CDN link every time.

This does come with a lot of stress to avoid that, you can just add the CSS and Js cdn link to your blade template.But for the sake of performance and Stable production deploys, lets go through the stress below.

Installation
1. Run npm install in your project root directory to get all your Javascript dependencies in place.
2. Run the npm command below to get your toastr package.

$ npm install toastr --save

3. Require your Toastr Js by adding this to your /resources/js/bootstrap.js file.

window.toastr = require('toastr');

4. Because the latest bootstrap has a .toast CSS class which would override the toastr CSS .toast class, we’ll split the scss file to be compiled into two.
In the directory /resources/sass add a new file and name it toastr.scss
Import the toastr css (scss actually) by adding this to the newly created file

@import '~toastr/toastr';

5. Edit you webpack.mix.js (this is found in the root directory) to look like this

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/toastr.scss', 'public/css');

this means our created toastr.scss file would be compiled into file /css/toastr.css.

6. Compile asset by running

$ npm run dev

Asset compilation result above

6. Include the following in your root blade template (used to be /layouts/app.blade.php, now you’ll need to set that up yourself)

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/toastr.css') }}" rel="stylesheet">
.
.
.
.
<script src="{{ asset('js/app.js') }}"></script>

Conclusion
Now we have toastr installed in our Laravel Application and it can be used by calling the keyword toastr as stated in the documentation.

Please leave a comment below If there’s anything I missed.
Thanks for your time.