Web Applications in PHP

Laravel Mix

  • Laravel Mix provides a fluent API for defining Webpack build steps for your Laravel application (using several common CSS and JavaScript pre-processors and live preview with Browsersync)

Install Laravel Mix

  • Open a terminal and execute the command npm install to install the necessary Node modules
  • Open the Mix config file webpack.mix.js and add Browsersync at the end of the file



 
 
 
 

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

mix.browserSync({
    proxy: 'vinyl_shop.test',
    port: 3000
});
1
2
3
4
5
6
7
  • Open a new terminal window and execute npm run watch
    (You have to run this command twice because the first time, additional Node packages will be installed)
    • This command runs a NPM script that launches a development web server which can be reached via http://localhost:3000 and which proxies our domain http://vinyl_shop.test. The script "watches" changes in relevant files, and if a change is detected, the tasks listed in webpack.mix.js are executed
      • The necessary JavaScript files are bundled and the resulting file is copied into the public/js folder (line 1)
      • The Sass/SCSS files are compiled and the resulting CSS file is copied into the public/css folder (line 2)
      • The page gets reloaded via Browsersync (lines 4-7)
  • Open http://localhost:3000 in a browser and edit one of the Blade pages to see Browsersync in action

REMARKS

  • If you use a CDN to link your CSS and JavaScript frameworks, you can remove (or comment out) the first two lines in webpack.mix.js, and skip the remainder of this section. Your Mix experience will be limited to Browsersync.
  • Add an additional line to the first mix-statement if you would like to generate (Javascript and CSS) source maps:


 

   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css')
      .sourceMaps(true, 'source-map');
1
2
3

Update the template

  • After you run npm run watch there will be two extra files in the public folder
    • public/css/app.css: this file contains the full Bootstrap CSS
    • public/js/app.js: this file contains all the JavaScript code (jquery.js, popper.js and bootstrap.js)
  • Link these files in the template resources/views/layouts/template.blade.php using the Laravel mix() helper function
    • Replace the four CDN links in our template with the two links to these files





 








 



<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    <title>@yield('title', 'The Vinyl Shop')</title>
</head>
<body>
    @include('shared.navigation')
    <main class="container mt-3">
        @yield('main', 'Page under construction...')
    </main>
    @include('shared.footer')
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

WARNINGS

  • From now on you will program only in the SCSS and JavaScript files within the folders resources/js and resources/sass
  • Make sure that the npn run watch script is running, otherwise your changes will not be passed to the public folder (and thus, will not be visible in the browser)

Customize Bootstrap with SCSS

  • The folder resources/sass contains two files
    • The main file app.scss that will be automatically compiled to public/css/app.css
    • A partial _variables.scss
      • Imported in app.scss
      • Can be used to overwrite Bootstrap variables or to add your own variables
  • Open resources/sass/app.scss


 







// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
1
2
3
4
5
6
7
8
9
  • If you want to add some additional custom code (e.g. a minimum height for the main element), you can add it AFTER the Bootstrap import










    •  
     
     
     

    // Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

//Custom code
main {
  min-height: 500px;
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    TIP

    If you have a lot of custom code, it is better to add some extra partials to make the code more readable

    • Create a new file resources/sass/_main.scss and add this code
    main {
  min-height: 500px;
}
    1
    2
    3
    • Import _main.scss in app.scss AFTER the Bootstrap import











     

    // Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Custom code
@import 'main';
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    Add additional JavaScript

    • If you need extra JavaScript that applies to every page (later in this course), it is best practice to create a global JavaScript file that you can incorporate into the automation immediately
    • Create a new file resources/js/vinylShop.js
      • Add a simple console log message to check if it's visible inside the browser console
    export function hello(){
    console.log('The Vinyl Shop JavaScript works! 🙂');
}
    1
    2
    3
    • Open resources/js/app.js
      • Remove (or comment out) everything that follows after require('./bootstrap'); and import vinylShop.js



     

     

    require('./bootstrap');

// Make all functions inside 'vinylShop.js' that start with 'export' accessible inside the HTML pages
window.vinylShop = require('./vinylShop');
// Run the hello() function
vinylShop.hello();
    1
    2
    3
    4
    5
    6

    JavaScript in console

    REMARK

    • The code that is removed from resources/js/app.js are the references to Vue.js, as Laravel is configured to use Bootstrap and/or Vue (not used in this course) for front end automation

    Versioning (optional)

    • Look at the source code inside the browser (F12 or Ctrl+U)
    • The CSS link (for example) looks like this:
    <link rel="stylesheet" href="/css/app.css" />
    1
    • Add the following code to webpack.mix.js in order to enable versioning (or cache busting): each time your code changes, a new hashed query string file will be generated
    mix.version();
    1
    • Stop the watch script with Crtl + C and restart it with npm run watch
    • Look at the source code to see the extra hash at the end of the file
    <link rel="stylesheet" href="/css/app.css?id=e0a0cd9aee98968ed025" />
    1

    Disable notifications (optional)

    • If you don't like the pop-up (and beep) every time Mix compiles a new version, you can disable this by adding this line to webpack.mix.js
    mix.disableNotifications();
    1
    • Stop the watch script with Crtl + C and restart it with npm run watch

    Recompile for production

    WARNING

    The scripts compiled with npm run watch are NOT production ready! They are not minimized and still contain a lot of overhead code. Every time you put a new version of your CSS or JavaScript file online, first optimize your code with the command npm run prod.

    • Stop the watch script with Crtl + C
    • Build a minimized version of app.css and app.js with the command npm run prod
    • Upload the files to your hosting
    • Start the watch script (again) with the command npm run watch
    Last Updated: 6/5/2020, 8:02:06 AM

    ← Laravel helpers →