Livereload WordPress PHP code during development

I got tired of reloading 2 browser windows (one incognito) during development. I saw one fellow developer using Livereload in his code so I gave it a try.

Boy was that a good/effective idea.

  1. Create package.json file with npm init
    in your project dir.
  2. Add line "livereload": "^0.6.2" to devDependencies and "dev": "livereload -d wp-content", to scripts
    {
      "name": "example.com",
      "version": "1.0.0",
      "description": "",
      "dependencies": {
      },
      "devDependencies": {
        "livereload": "^0.6.2"
      },
      "scripts": {
        "dev": "livereload -d wp-content",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "repository": {
        "type": "git",
        "url": "git+ssh://git@bitbucket.org/exampleUser/example.git"
      },
      "author": "Michal Zuber",
      "license": "MIT"
    }
    
  3. Install livereload package npm install
  4. Next add LiveReload Chrome extension
  5. Run npm run dev or yarn dev
  6. Open project URL in browser and click LiveReload extension icon to connect with livereload. Example console output when handshake was successful
    yarn dev v0.28.4
    $ livereload -d wp-content
    LiveReload is waiting for browser to connect.
    
    Protocol version: 7
    Exclusions: /\.git\//,/\.svn\//,/\.hg\//
    Extensions: html,css,js,png,gif,jpg,php,php5,py,rb,erb,coffee
    Polling: false
    
    
    Starting LiveReload v0.6.2 for /srv/http/example.com/-d on port 35729.
    Watching /srv/http/example.com/-d...
    
    Browser connected.
    
    Client message: {"command":"hello","protocols":["http://livereload.com/protocols/official-6","http://livereload.com/protocols/official-7"],"ver":"2.2.2","ext":"Chrome","extver":"2.1.0"}
    
    Client requested handshake...
    
    Handshaking with client using protocol 7...
    
    Client message: {"command":"info","plugins":{"less":{"disable":false,"version":"1.0"}},"url":"http://localhost/example.com/test-page/"}
    
Advertisements

Author: Michal Zuber

Full stack developer, biker and rollerblader. Owner and developer at https://nevilleweb.sk/ Co-founded http://neville.sk/ Blog at https://michalzuber.wordpress.com/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s