# Automation

• The configuration from the previous section is very basic and has several limitations
  • A CDN link is not the best solution if you want to change or expand the look and feel of Bootstrap.
    It's better to use a locally hosted, Sass/SCSS version of Bootstrap that will be compiled (automatically) to CSS.
  • Currently you have linked three JavaScript files (jquery.js, popper.js and bootstrap.js). You can combine these into one JavaScript file.
  • We don't have our own JavaScript file yet, in which we group all the scripts that apply to every page. We can also combine this with the previous script file.
  • A browser caches CSS and JavaScript files. Each time you make a change to one of these files, the user has to "hard reload" the page (emptying the cache) before the changes become visible. This can be solved by by placing a different (random) version number as a query string behind the file name (e.g. app.css?id=xxxxx and app.js?id=yyyyy).
  • You'll need to refresh your browser manually every time you make a change to the code. Browsersync can do this automatically for you.
• All these limitations can be solved easily with Laravel Mix
• Follow the instructions in Config -> Laravel Mix to incorporate Mix into your application (resulting in a better, automated workflow)
  • Install Laravel Mix
  • Update the template
  • Customize Bootstrap with SCSS
  • Add additional JavaScript
  • Versioning (optional)
  • Disable notifications (optional)

# Commit "Opdracht 2: <= Automation"

• Execute the following commands in a terminal window:

git add .
git commit -m "Opdracht 2: <= Automation"
git push