# 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 two JavaScript files (jquery.min.js and bootstrap.bundle.min.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)
  • Frontend scaffolding
  • Install Laravel Mix
  • Update the template
  • Customize Bootstrap with SCSS
  • Add additional JavaScript