Hot Reload Cheatsheet

If your a web developer like me and need to refresh your browser after you make each and every incremental code change, then you and me need all the help we can get. As there is litterally thousands of code updates that are required when coding a website, then tools that automatically reload your brower after making changes to your code base will drastically improve your coding speed.

you save energy aswell as time.

Hot reloading for PHP files in a WordPress or PHP-based project is possible with some additional tools. While Vite or similar tools can handle JavaScript and CSS hot reloading, you need a different approach to refresh the browser automatically when PHP files change.

For the best live-reloading experience, pair browserSync with Daisy UI or Tailwindcss as there is no compile time. Changes are reloaded instantly.

Approaches for Hot Reloading PHP Files

Use BrowserSync

BrowserSync is a popular tool for live-reloading any file type, including PHP. Steps:

Install BrowserSync:

Navigate to your project directory and install BrowserSync:

npm install browser-sync --save-dev

Create a browsersync.config.js File:

Add the following configuration:

const browserSync = require('browser-sync').create();

browserSync.init({
  proxy: "http://your-local-wordpress-site.local", // Your local WordPress site URL
  files: [
    "./**/*.php",      // Watch all PHP files
    "./src/**/*.js",   // Watch JS files (adjust path based on your setup)
    "./src/**/*.css",  // Watch CSS files
  ],
  notify: false,       // Disable notification popups in the browser
  open: true,          // Open browser automatically
});

Run BrowserSync:

"scripts": {
  "watch": "node browsersync.config.js"
}

npm run watch