Lesson 10 - Simple CMS in Laravel - Laravel Mix

In the last lesson, Simple CMS in Laravel - Article management, we learned about HTTP request classes and also took a look at article management.

As I promised, in today's lesson we will look at the front-end part of our application and at the same time we will beautify it a bit. More specifically, we will focus on compiling files of JavaScript or SCSS.

Adding a package

In the fifth lesson, Simple Content Management System in Laravel - Project Structure, we installed the npm package system, which will use in this lesson. In addition to the well-known front-end frameworks that package Laravel UI includes and which we talked about in the just mentioned lesson, we will add Font Awesome to our project.

Font Awesome is a very well-known framework of various icons in the form of font, SVG or CSS. Use of this or a similar collection of icons is a good start on the way to a great looking application. Just look at different sites around you and notice how many of them actually use such framework

Font Awesome can also be found as a package on GitHub. So we don't have to manually download this framework or use its online version, but instead we'll use a package system.

The advantages of this option are:

• Possibility to upgrade to a new version with only one command.
• Independence from external source - If the server from which we get the icons fails, the page would take a long time to load (it would wait for the server's response) and then it would be displayed without the given icons. This can be quite annoying in some cases, for example when a link to edit the article is just an "image".
• Clarity of used packages. If we want to see what all the packages we use, we will open only one file with their list containing the version.

However, this option has also a certain disadvantage:

• Size of received data (= longer reading). Every user who comes to our website has to load far more data, and it is completely unnecessary. This is because countless projects use such frameworks, and if each of them kept its own version on its own server, the user would have to reload this file when visiting another application, even though a similar one is already in the computer's cache. Therefore, most projects use CDN (C ontent D elivery N etwork). If we use CDN, the user reads the file only once, and if another site links to the same server with the given framework, the contents of the file are already loaded only from the user's computer cache. This achieves faster loading and thus a reduction in downloaded data.

Package installation

We can simply add the Font Awesome to our project using the following command:

npm install --save-dev @fortawesome/fontawesome-free

If we now look at the list of packages managed via npm, which can be found in the package.json file in the root folder of the project, we will see that the following line has been added under the devDependencies category:

"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.13.1",
    "axios": "^0.19",

Your Font Awesome version may differ depending on the latest stable version.

Compiling front-end files

Now that we've added Font Awesome to our project, we need to use it somewhere. The file located in resources/sass/app.scss, which we showed in the previous lessons, will help us with this. In the file we only import the main file of the given framework and then also the file containing the solid icons:

// Font Awesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';

Laravel Mix

However, no change will be reflected on our site yet. SCSS files must be compiled. To do this, we will use Laravel Mix, which is already automatically included in our application and is built in the Webpack tool.

In the file named webpack.mix.js in the root folder of the project we have to define what we really want to compile. Its content looks like this:

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');

In Laravel Mix methods, such as js(), scss(), less(), optipng() and others, we define the source file and then the folder where the compiled version is to be placed. In our case, we don't have to add anything, because as you can see, the app.scss file is ready to compile from the ground up.

If you are interested more in compilation options and other available methods, I recommend visiting the official documentation.

Versioning of front-end files

However, we will edit webpack.mix.js file a bit. We will also use the version() method, which ensures that each time the compiled file is changed, a unique string is generated, which is then added after the file name. With this version, each change will require the user to reload the file because the browser will think it is a different file:

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

Compilation options

We have 5 commands available for compilation:

• npm run dev - Compiles all files defined in the webpack.mix.js script (only in development mode).
• npm run prod - Compiles all defined files and minifies their output.
• npm run watch - This command runs in the background until we interrupt it. It compiles files as soon as they are changed (in development mode). It is useful during development, so we do not have to run any of the commands above after each minor modification.
• npm run watch-poll - The command above may not work in some environments. If you are experiencing these issues, be sure to use this command. It is functionally identical to the npm run watch command.
• npm run hot - This command compiles and load a file in a browser without refreshing the page, including maintaining the state of the component. It is also suitable for development. However, because its setup is a bit more complicated, we will not focus on it in this course.

Since we don't need to debug our front-end, we run the npm run prod command. This will take some time the first time you use it - additional dependencies must also be installed. However, we will then see this output with a listing of all compiled files:

We also receive a notification that some files are too large. In the case of Font Awesome, it doesn't matter so much, as it contains all possible icons. However, we should solve the js/app.js file by removing unnecessary libraries, but we will not deal with that.

Use of versioning in views

In the folder public/ we created the file mix-manifest.json, which contains the above-mentioned random strings for versioning. Its content may look something like this:

{
    "/js/app.js": "/js/app.js?id=8f8d69030540ce047ade",
    "/css/app.css": "/css/app.css?id=e4df60a8d980d281fb61"
}

You are definitely interested in how we can actually work with this file at all. Let's look at it now. We'll open our main view resources/views/base.blade.php and use the helper function mix() instead of asset() in the HTML header:

    <title>@yield('title', env('APP_NAME'))</title>

    <link href="{{ mix('css/app.css') }}" rel="stylesheet" />

    <script src="{{ mix('js/app.js') }}"></script>
</head>

If we now visit our page and examine the HTML code via the "Inspect element" (F12 key on the keyboard), the output of our template above will look like this:

<link href="/css/app.css?id=e4df60a8d980d281fb61" rel="stylesheet">

<script src="/js/app.js?id=8f8d69030540ce047ade"></script>

Article listing improvements

Since we already control the addition of packages and the compilation of front-end files, we can use this experience in our application - more precisely in the article listing. It currently looks quite poor and does not contain much information. To show that compilation went really well, we'll add the modification date along with the calendar icon and customize its appearance in the file resources/views/article/show.blade.php:

@extends('base')

@section('title', $article->title)
@section('description', $article->description)

@section('content')
    <article class="article">
        <header>
            <h1 class="display-4 mb-0">{{ $article->title }}</h1>
            <p class="lead">{{ $article->description }}</p>
        </header>

        <div class="article-content">{!! $article->content !!}</div>

        <footer>
            <p class="small text-secondary border-top pt-2 mt-4"><i class="fa fa-calendar"></i> {{ $article->updated_at }}</p>
        </footer>
    </article>
@endsection

Subsequently we also define the CSS rules for the classes that we used in the view above. We will add these properties to the already mentioned SCSS file resources/sass/app.scss and compile it again using the npm run prod command:

.article {
  font-family: Arial, sans-serif;
}

.article .lead {
  font-size: 1.35rem;
}

.article > .article-content {
  font-size: 1rem;
  text-align: justify;
}

The result of our efforts looks like this:

As you can see, Font Awesome also works wonderfully for us.

That's all for this lesson.

Next time, in lesson Simple CMS in Laravel - Working with the date, we will continue to improve our project. We will be working with the date and create the main page of our application.