When we first contructed our Laravel tennis club application we used Composer the PHP dependency package management system. This downloaded Laravel and a whole range of third party packages on which Laravel depends. We then added the Infyom generator, and the packages on which depends - also using Composer. Later when we used FullCalendar, the third party front-end component we installed it manually along with a number of components on which it depends.
There are a range of front-end components package managers available. Although there are many the main ones are:
- Gulp.js
- Grunt
- Browserify
- Yarn
- NPM
Laravel Mix is a package which comes pre-installed with Laravel (since Laravel 5.8). Laravel Mix uses NPM - Node Package manager together with webpack.js to download javascript component and the components on which they depend and then bundle the required components up into a single css file (public/css/app.css) and a single js file (public/js/app.js). Full documentation on Laravel mix is available here. This has a number of benefits
- It reduces the amount of CDN Links and CSS links in your code thereby reducing the amount of code and makes it easier to manage
- It means that user's browsers need only load a single css and a single js file as opposed to many different files which takes longer to load and reduces the response time
- It makes it easier to download and install 3rd party components
While these advantages are significant there is some work to do before we can enjoy them. First off we need to install node.js. Node.js is a javascript based webserver - so an alternative to Apache/PHP which allows people to code in javascript on both the client and the server. While we will continue to use PHP as our Language/Server, Node.js has some additional features which we need - namely the Node Package Manager which allows us to install and manage javascript component packages. Go ahead and download and install Node from here https://nodejs.org/en/download/
Once you've installed Node the npm command will be available from the command line. To verify this type
npm --version
You should see the following
Don't worry if the version is not exactly as printed here - so long as the command works. Next run the command to install packages
npm install
To install bootstrap3 using npm type
npm install bootstrap@3.4.1
To install the bootstrap star rating component type
npm install bootstrap-star-rating@4.0.2
The bootstrap-star-rating component depends on jquery to run therefore we must install jquery
npm install jquery@3.6.3
Next, we need to edit the files which instruct webpack.js to bundle up our resources into a single app.js and app.css. To do this for javascript open the file resources\js\app.js and add the following lines to the one(s) which are already there.
require('jquery/dist/jquery.js');
require('bootstrap/dist/js/bootstrap.js');
require('bootstrap-star-rating/js/star-rating.js');
global.$ = global.jQuery = require('jquery');
Now we need to add the css for those components. Open the file resources\sass\app.scss and add the following lines
@import '~bootstrap/dist/css/bootstrap.css'; @import '~bootstrap-star-rating/css/star-rating.css';
Having added these instructions we can get npm to use webpack.js to create a single app.js and a single app.css containing all these components. When you install Laravel it bundles in Laravel mix which uses Webpack (a popular javascript asset bundler) to put the many disparate javascript plugins your application no-doubt uses into a couple of neatly organised app.js and app.css files. The more recent versions of Laravel favour tailwind.css over Twitter Bootstrap. This means that the version of webpack.mix.js that comes with Laravel is set up for tailwind. There are certainly advantages to tailwind but at the time of writing Bootstrap is more evolved and established so we'll stick with bootstrap. In addition to the tailwind issue, I discovered a problem with Laravel mix in the way that it auto_loads JQuery - in particular with bootstrap 3.4 and Jquery >3.0. To overcome this problem and to make sure Laravel mix compiles and bundles our assets properly including scss assets you need to replace code in the webpack.mix.js file found in the root folder of your project with the code here:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.autoload({
jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"]
});
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css').sass('resources/sass/app.scss', 'public/css');
Having installed the required node modules and set up webpack.mix.js correctly, we are ready to build our app.js and app.css files. To do this return to the command line and type the following command.
npm run dev
This has now created a single public\js\app.js file and a single public\css\app.css which will allow us to replace all the cdn links and css references in the toplevel app.layouts file. To make this modification open resources\views\layouts\app.blade.php file. In time, we can install the full range of components listed here using npm and replace all of these css and js references with just one. For now, we'll just replace the bootstrap links
with the following lines
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<script src="{{asset('js/app.js')}}"></script>
With these lines we have jquery, bootstrap and bootstrap-star-rating all bundled up into the files app.js and app.css. In the next post in this series we'll modify the ratecourt view to allow the users to select stars to rate the court rather than inputting a number.
****Important**** - as with packages in the vendor folder, packages in the node_modules folder are ignored by git due to a line in .gitignore. This is to avoid a lot of duplicated packages taking up un-nesscary space on github and using up un-necessary data-centre related carbon worldwide. To ensure every member of the team can use the packages installed using npm, whenever a team member pulls changes where node modules have been installed, they must run
npm install
on the command line