Adding Browser Sync to Laravel and Docker with Vessel

Mikhail 🐺 — Wed, 15 Jul 2020 19:02:29 +0000

I recently stumbled upon Vessel by Chris Fidao which is a great way to leverage Docker in your development environment. I'm a big fan of Docker and use it extensively for home lab work, but haven't fully explored it for development yet.

Getting it going with some Laravel projects I had on hand was super smooth and will probably be my new choice for development going forward. However, I was still hoping to fix an issue I've been having developing on WSL 2--getting Browser Sync to work. It's one of the biggest annoyances when working in Window's WSL 2 versus on macOS.

After some playing around with the config files Vessel generates, I've gotten Browser Sync to work with it--which also means it works in WSL 2 thanks to Docker!

First this assumes you have a relatively new Laravel project (version 6 or 7) and have set up Vessel without any major customizations.

First lets update our .env to reduce any port conflicts, changing the APP port and MYSQL port as appropriate.

# .env
APP_PORT=8080
MYSQL_PORT=33060

Running ./vessel start should get your containers up and running with your defined ports--great! Next we're going to ensure you've Browser Sync included in your dependencies.

./vessel npm i browser-sync browser-sync-webpack-plugin --save-dev

Update your webpack.mix.js to leverage the new package. Here you can choose whether just to watch for files going through the webpack pipeline (CSS and JS) or also include any changes to your Blade templates or even user content.

// webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .browserSync({
        proxy: 'app:80',
        open: false,
    })

The magic line is app:80--this should be equal to the container Vessel created for you. It should be called app. To confirm run ./vessel ps and look for one that has app in the title. If you run into issues, it may also be called yourappname_app_1.

The port by default is 80 but change this if you've changed your docker_compose.yml file to something else. This should be the internal container port, not the port you used to view your site (in this case 8080 as defined earlier).

Finally, we're going to tell Docker to expose the Browser Sync ports, as well as a default command to ensure the container doesn't immediately exit and opens the ports for you.

# docker-compose.yml
...
node:
  command: npm run watch
  ports:
    - "3000:3000"
    - "3001:3001"
...

Finally, let's stop and start our containers, and if all went well we should see our Browser Sync connected app at localhost:3000!

./vessel stop && ./vessel start

If you don't initially see your app, you can run the below command to see any log output from the node process--sometimes it takes a bit to get everything built initially.

./vessel logs node

# If you wanna follow the logs live
# ./vessel logs -f node

This post originally appear on my personal site

Vue CLI 3, TailwindCSS, and PurgeCSS

Mikhail 🐺 — Wed, 26 Sep 2018 15:14:26 +0000

The new Vue CLI just came out and I was itching to give it a go. Our wedding website needed a fresh coat of paint so decided to move it from Nuxt to just a plain Vue app. It's two pages so there was really no need to bring Nuxt in.

The new Vue CLI is awesome and got things up and running in no time. Add in my new favourite CSS framework, TailwindCSS, and things were soaring along. Until I decided the decrease my bundle size.

Because of how TailwindCSS works, by default the entire framework gets included. You can add some configuration options to add or removes colours, responsive states, and such. However, an even easier way to handle things is with PurgeCSS. It'll go over through your HTML (Vue in my case) files and see what CSS selectors you use, and remove all the others from your CSS. This should cause your TailwindCSS output to be tiny, just the classes you use!

A new project with Vue CLI 3 uses postcss-load-config to handle PostCSS plugins. However, the default way of using your package.json to configure plugins doesn't appear to work with the PostCSS PurgeCSS plugin. Thankfully, postcss-load-config allows you to use numerous different type of configuration files. Switching to a JavaScript one (.postcssrc.js) gave me the below config that allows you to use TailwindCSS in your Vue files, but also removes unused CSS from the generated bundle.

const tailwindcss = require('tailwindcss')
const purgecss = require('@fullhuman/postcss-purgecss')
const autoprefixer = require('autoprefixer')
const postcssImport = require('postcss-import')

module.exports = {
  plugins: [
    postcssImport,
    tailwindcss('./tailwind.js'),
    purgecss({
      content: ['./src/**/*.vue'],
      extractors: [
        {
            extractor: class TailwindExtractor {
                static extract(content) {
                    return content.match(/[A-z0-9-:\/]+/g) || [];
                }
            },
            extensions: ['vue']
        }
      ]
    }),
    autoprefixer
  ]
}

This took me far too long to figure out, but the benefits are profound! Before adding PurgeCSS my CSS bundle was 50.12 kb Gzipped, after PurgeCSS it was only 2.33 kb--over a 20 times reduction in size!

Update: The custom extrator is required for Tailwind's responsive classes which get stripped out by default!

Originally posted on my site

DEV Community: Mikhail 🐺

Adding Browser Sync to Laravel and Docker with Vessel

Vue CLI 3, TailwindCSS, and PurgeCSS