Laravel | Front-end

This is an introduction to Laravel Front-end or Frontend what sounds better to you. When you are creating a page you want to define what libraries you want to use on future, how we will process CSS and other things to determine the front of our site.

This is probably not well explained in the official page, cause the documentation respectively to Laravel front-end changes on every version. This is not really a major problem, cause the methods and functions shared in the old versions still work in the new one majority of the time.

As you probably know if you read other articles on this site, I’m not a devotee of overcharge the page with JavaScript elements, I always thought that abusing and overcharging the site with JavaScript leaves the pages slowly in charge. In any case, we will see how to manipulate the different elements that we can find front-end.

I’m pretty sure that I’m going to mismatch some concept or behavior of some library, in that case, please contact me on Twitter, my Twitter it’s always at the end of all pages.

All things on this page work for Laravel 8 and 7, if some information is for another version will be specified.

Libraries

First of all, we need to know that Laravel uses Node.js, so we will use npm install and basic commands of Node if you go to your Laravel project you can see the node_modules folder.

Another thing that we need to know is that Laravel uses Webpack via laravel-mix this one is easier to understand than utilizing Webpack, you can minify, combine files, or other things depending on what rules you write in webpack.mix.js

Laravel-Mix

Well I don’t know exactly how to define laravel-mix, so I searched the definition on the official page, but only says” An elegant wrapper around Webpack for the 80% use case” that’s not a convincing definition, cause of this I decided to search for a better definition in another place, laravel-mix is installed with node and that’s why I decide to search in npm page and this is what I get:

Laravel Mix provides a clean, fluent API for defining basic webpack build steps for your applications. Mix supports several common CSS and JavaScript pre-processors.

https://www.npmjs.com/package/laravel-mix

The file that laravel mix is webpack.mix.js.

Lodash

Laravel also uses Lodash internally or as a minimum comes with the default installation, this library permits us to make a great number of things like manipulation of arrays and objects and is convenient for you to know that this library is at your disposal from the first time.

jQuery (dont come installed or yo cant use directly)

Laravel has come with jQuery in many older versions, but I do not remember if it was removed in the latest versions as a library that comes by default, or you need to add it in some way. And because I could not find if come with it, let’s try that:

laravel new jqexample

The next thing I need to do to check this is run npm to make app.js

npm install

npm run dev

At this moment, I will add code to the welcome view before </body> tag

<script src="{{ asset('js/app.js') }}"></script>
<script>
   $(document).ready(function() {
      alert("jquery loaded");
   });
</script>

When we prove this, lines of code in our browser we can se that jquery is not working

make it work

The following lines of code work on Laravel 8,7 and 6. This behaviors does not present on versions older than Laravel 6, and you should not use it on older versions.

composer require laravel/ui

php artisan ui bootstrap

After running these commands on the console you must run npm install && npm run dev, in my case I needed to run “npm run dev” again to get it working.

Although I don’t understand very well why i need to install the UI and bootstrap, if this only works in this way it must be improved in the next versions and split in a good way both libraries.

Scaffolding 

The scaffolding is like a structure where we to start its not necessary for a project but is a tool that Laravel gives us. To use it, we need to install package laravel/ui via composer

composer require laravel/ui

Once installed we have to decide what we’re going to use ¿we will use Bootstrap, Vue, or React?¿we going to use a combination of these?

Normally we decide to use one of these libraries or frameworks.

Bootstrap only

If we will use bootstrap only we can generate the basic to use bootstrap and the part for login and register

php artisan ui bootstrap

next command generates the login and register part

php artisan ui bootstrap --auth

you have to run npm install && npm run dev at the end to actualize app.js

Vue only

You can install this framework in the following way

php artisan ui vue

Case of need register and login

php artisan ui vue --auth

finally run npm install && npm run dev

React only

React define itself as a library for building user interfaces

php artisan ui react

In case of need authentication login/register

php artisan ui react --auth

After that run npm install && npm run dev(needed)

New option on Laravel 8 Breeze

Laravel 8 gives us the option to install laravel/breeze a package that permits us to implement the Laravel authentication that could be login, register, password, reset, email verification and password confirmation using Tailwind CSS. This is really good, cause Tailwind CSS is really light compared vs bootstrap.

Let see the official example:

curl -s https://laravel.build/example-app | bash
cd example-app
php artisan migrate

As you can see, this code installs a site example using curl and then runs migrate to create the database. This is only to install a base for the example and is not to install breeze, we will see that next

To install breeze:

composer require laravel/breeze --dev

Then we run breeze:install to create all the authentication elements that could be routes, controllers and views, below is the code you need to run

php artisan breeze:install

npm install
npm run dev
php artisan migrate

In the code, before we run npm install y npm run dev (this is to create css and js files) and then a migration

The things you can do with breeze not finish there, you can install React a Vue with it. Let’s see an example of Vue installation.

php artisan breeze:install vue

You can check for more of Brezee on the official page https://laravel.com/docs/8.x/starter-kits

Process files with Laravel Mix

We can find this part on Laravel’s official page as “Compiling Assets”. In programming, it’s called assets to all files that are JavaScript, CSS, Sass, Less, React, Vue and others. Not only this file could it be considered assets, images, and video could it be considered assets. If you want a simple definition of assets is “all files that you need to show your page as it must be”. The orders or rules of how we will process our files are in webpack.mix.js

Let’s take a look at webpack.mix.js file:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

First, we have that with mix we call laravel-mix, and then the different methods that can be applied too, in this case, js, sass, sourceMaps().

Ok, let’s see how it works the majority of these functions or methods, for the following list you can apply:

• js
• sass(archivos SASS),
• ts(archivos typescript)
• coffee(archivos Coffescript),
• postCSS
• less(Archivos LESS)
• stylus(Archivos stylus)

.[method_name](source_file, destination_folder)

This only works if it’s only a file, so in this way will take the name of this in the destination folder.

You may use destination_file instead of destination_folder

.[nombre_de_metodo](source_file, destination_file)

example:

.js(form.js,login_form.js)

Concatenate files

In order to make our web performance is convenient to minify files and concatenate files, let’s concatenate some files

mix.combine(['one.js', 'two.js'], 'merged.js')

You can concatenate with .scripts too

mix.scripts(['one.js', 'two.js'], 'merged.js')

When we are using CSS this vary a little

mix.combine('path/to/dir/*.css', 'all-files.css')

alternative way:

mix.styles('path/to/dir/*.css', 'all-files.css')

Before passing to the next topic please see that in source par we use *.css this concatenates all files CSS in the directory

Minify files

Minify files is something common these days, the following example shows you how to do that with laravel-mix

mix.minify('path/to/file.js');

Compiling React or Vue

In case of need to compile a React or Vue file, you can use .vue() or .react()

Vue Example:

mix.js('resources/js/app.js', 'public/js')
   .vue();

React Example:

mix.js('resources/js/app.jsx', 'public/js')
   .react();