How to setup a WordPress local environment with Laravel Homestead

I was switching between working on a Laravel project and working on updating the theme for this site and I found myself starting Local by Flywheel, when I realised that I have a Homestead machine running in the background. So I figured that I should make WordPress work on Homestead as well. As it seems, it’s not all that complicated.

I develop on a windows machine so your folder structures may differ a bit, but this is how this looks for me:

  • homestead/ — the location of the homestead machine
  • wp/ — local root of the WordPress instance
  • laravel/ — local root of the Laravel instance

The initial setup of the homestead machine is as follows:

  • move inside the homestead/ folder, run the composer init command and run through the setup.
  • run composer require laravel/homestead --dev
  • run vendor\\bin\\homestead make ( or if you are on a Mac php vendor/bin/homestead make)

Now we move to edit the Homestead.yml file:

  • the first things I usually set differently are
memory: 4096
provider: hyperv
ssl: true
  • next we map the wp/ and laravel/ to the internal homestead directories:
folders:
    -
        map: 'E:\Projects\podcast-directory'
        to: /home/vagrant/code/podcast
    -
        map: 'E:\Projects\wp-main'
        to: /home/vagrant/code/wp-main
  • next we map the sites
sites:
    -
        map: podcast.test
        to: /home/vagrant/code/podcast/public
    -
        map: wp.test
        to: /home/vagrant/code/wp-main
  • next we set up the databases
databases:
    - homestead
    - wp-main

And the last step would be to run a vagrant up, and that’s pretty much it.

Clean up unused CSS with PurgeCSS on Laravel and WordPress

I read recently the article How I dropped 250KB of dead CSS weight with PurgeCSS and thought I should put out my setup for this situation. I use Laravel Mix for both Laravel development and also for my WordPress work. My main stack includes Vue.js and TailwindCSS, so these snippets will do just fine when working with these frameworks. Beyond that I can’t make any promises.

But as an endorsement to PurgeCSS, I will tell you, that for the past few projects I have done in WordPress, I managed to get my CSS file down to around 50 kB minified.

My Laravel config file looks like this

let mix = require('laravel-mix');

require("laravel-mix-tailwind");
require("laravel-mix-purgecss");


mix.browserSync({
    host: 'localhost',
    port: 3000,
    proxy: '192.168.10.22'
});

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/css/main.scss', 'public/css')
   .options({
      processCssUrls: false,
   })
   .tailwind();
   .purgeCss();

if (mix.inProduction()) {
    mix.version();
}

 

My WordPress config file looks like this

let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");

require('laravel-mix-purgecss');

const purgecssWordpress = {
    whitelistPatterns: [
        /^rtl(-.*)?$/,
        /^home(-.*)?$/,
        /^blog(-.*)?$/,
        /^archive(-.*)?$/,
        /^date(-.*)?$/,
        /^error404(-.*)?$/,
        /^logged-in(-.*)?$/,
        /^admin-bar(-.*)?$/,
        /^no-customize-support(-.*)?$/,
        /^wp-custom-logo(-.*)?$/,
        /^search(-.*)?$/,
        /^nav(-.*)?$/,
        /^wp(-.*)?$/,
        /^screen(-.*)?$/,
        /^navigation(-.*)?$/,
        /^(.*)-template(-.*)?$/,
        /^(.*)?-?single(-.*)?$/,
        /^postid-(.*)?$/,
        /^post-(.*)?$/,
        /^attachmentid-(.*)?$/,
        /^attachment(-.*)?$/,
        /^page(-.*)?$/,
        /^(post-type-)?archive(-.*)?$/,
        /^author(-.*)?$/,
        /^gallery(-.*)?$/,
        /^category(-.*)?$/,
        /^tag(-.*)?$/,
        /^card(-.*)?$/,
        /^menu(-.*)?$/,
        /^tags(-.*)?$/,
        /^tax-(.*)?$/,
        /^term-(.*)?$/,
        /^date-(.*)?$/,
        /^(.*)?-?paged(-.*)?$/,
        /^says(-.*)?$/,
        /^depth(-.*)?$/,
        /^comment(-.*)?$/,
        /^comments(-.*)?$/,
        /^children(-.*)?$/,
        /^crnb(-.*)?$/,
        /^custom(-.*)?$/,
        /^custom-background(-.*)?$/,
        /^port-description(-.*)?$/
    ]
};

mix
    .browserSync({
        proxy: "custom.local",
        files: ["./**/*.css", "./**/*.js", "./**/*.php", "./*.php"]
    });

mix
    .js("assets/js/custom/custom.js", "assets/js")
    .postCss("assets/css/style.css", "./", [
        tailwindcss("./tailwind-config.js")
    ])
    .options({
        publicPath: "./"
    })
    .purgeCss({
        // enabled: true,
        globs: [
            path.join(__dirname, './../**/*.css'),
            path.join(__dirname, './../**/*.php'),
            path.join(__dirname, './../**/*.vue'),
            path.join(__dirname, './../src/**/*.js'),
        ],
        extensions: ['html', 'js', 'php', 'vue', 'css'],
        whitelistPatterns: purgecssWordpress.whitelistPatterns
    });