Tips: getting Laravel webpack running on AWS

Apr 27, 2020 | XEO

Tips: getting webpack running in Laravel on AWS

How to Run Webpack aka Laravel Webpack aka Laravel Mix

There are lots of good tutorials about installing laravel mix aka webpack. I started my journey with the Scotch webpack tutorial. This got me to install npm laravel-mix (you don't use npm intall webpack oddly enough) and be able to use the simple examples of laravel mix. Now I had to do the heavy lifting on this particular site

Dialing in the Laravel assets directory structure

The model I use for laravel asset webpack compilation is read from /resources and write to /public. I used the paths variable to be very clear about where my assets started out and where they were going by using defined values. Some of my assets were in the wrong place so they had to move into the right place.

          
          var paths = {
            'resources':       'resources/assets/',
            'site_css':        'resources/assets/site/css/',
            'site_js':         'resources/assets/site/js/',
            'app_css':         'resources/assets/site/css/app/',
            'common_css':      'resources/assets/site/css/_common/',
            'common_js':       'resources/assets/site/js/_common/',
            'mixins_js':       'resources/assets/site/js/_mixins/',

            'js':              'public/js/',
            'css':             'public/css/',
            'fonts':           'public/fonts',
            'webfonts':        'public/webfonts',
            'trombowyg_icons': 'public/svg/trumbowyg',
          };
          
          

I probably could merge common_css and common_js and app_css but this matches my initial structure. Here is how paths work out to make the rest of the file readable.

          
          .copyDirectory('resources/fonts', paths.fonts)
          .copyDirectory(paths.resources + 'fontawesome/webfonts', paths.webfonts)
          
          

Adding to Bitbucket Webhook Deployment

This project uses bitbucket webhooks for auto deployment when code is checked into the appropriate branch. This script which I called mixit.sh is used to run webpack during the deployment. You'll notice that this script uses npm run dev not nom run prod. I used this for speed as its about 5 times faster than the production variant, but more importantly the dev pipeline does not use compress and was the only way to support a recently added javascript syntax. That error has been fixed but I'm still holding off on using the production variant because it takes over 2 minutes which is a very long time during our deployment. The purpose of this script is to run webpack. One would think that would require syntax similar to npm run webpack but alas no. The webpack npm or laravel-mix npm integration just requires npm run dev or npm run prod. Ends up the combination of webpack laravel npm and a couple of custom scripts makes a good build process.

          
          #!/bin/bash -v

          export NVM_DIR="/usr/.nvm"
          [ -s "/nvm.sh" ] && \. "/nvm.sh"  # This loads nvm
          [ -s "/bash_completion" ] && \. "/bash_completion"  # This loads nvm bash_completion

          npm run dev 2>&1
          
          

To use babel or scripts

Depending on which article you read, javascript files can be compiled using either scripts or babel. My strategy is to start with scripts and if that doesn't work I switch to babel. Otherwise I've seen more errors in babel than with scripts.

Using Autoload

As I got most of the webpack process working, I started to notice console errors loading jquery and tether. I'm not sure why the following worked to help with this but i found it soewher and will use it in my next project too.

          
          .autoload({
            jquery: ['$', 'window.jQuery'],
            tether: ['window.Tether', 'Tether'],
          })