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 thewebpack.mix.js
script (only indevelopment
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 (indevelopment
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 thenpm 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.