WebReloader by Proxy

Introduction

This project can be used to hot-reload any non static web application during the development stage. For example applications written in PHP such as WordPress, Joomla and PrestaShop.
This is done by mirroring the web application in 3 main steps:

1. The url normally used to access the web application is proxied.
2. The base directory of the web application is watched.
3. Once a modification is detected in the base directory, the proxy is reloaded.

The hot-reload is inspired by vite and implemented thanks to BrowserSync.

Requirements

You need to have Node.js and npm installed on your pc. To make sure they are available run the following commands:

node --version
npm --version

Installation

First some definitions.

1. webreloader: The directory containing the code in charge of the hot-reload locally. Aka this project.
2. root: The parent directory of the webreloader project locally. And the directory containing your web application locally.

Using Git (recommended)

1. Open your console.
2. Navigate to the root.

   cd $root

3. Download the repository by running the following commands:
   1. If the root is already a GIT repository. shell git submodule add -- https://github.com/tapmeppework/webreloader-by-proxy.git webreloader cd webreloader npm install
   2. Otherwise shell git clone https://github.com/tapmeppework/webreloader-by-proxy.git webreloader cd webreloader npm install

Manually

1. Download the webreloader project as a .zip file.
2. Extract the .zip file. The result will be a single non-empty folder.
3. Rename the newly created folder to 'webreloader'.
4. Move the folder webreloader/ to the root. Meaning place it directly under the root.
5. Run the following commands:

   cd $root/webreloader
   npm install

Configuration

Move to the webreloader folder and copy the file configuration.template.json to configuration.json.

cd $root/webreloader
cp configuration.template.json configuration.json

Each node in the config file represents a mirror. Each mirror can be described with the following information:

• Mandatory
  • The TARGET: The key used as parameter to identify the mirror to load.
  • The URL to be proxied.
• Optional
  • The BASE_DIRECTORY (directory) represents the relative path to the base directory to watch.
    • It is relative to the root.
    • The root is the parent directory of the webreloader.
    • If unset the root itself will be used.
  • The BROWSER key is optional. If set the given browser(s), if installed, will be used. More information here.
  • The DEFAULT key is optional. If set the given mirror will run implicitly if no target is entered.
  • The FILES is an optional list of glob patterns to watch.
    • By default the following patterns are used:
      • '**/*.css'
      • '**/*.gif'
      • '**/*.htm'
      • '**/*.html'
      • '**/*.inc'
      • '**/*.jpeg'
      • '**/*.jpg'
      • '**/*.js'
      • '**/*.php'
      • '**/*.png'
      • '**/*.webp'
    • Anything else must be added if need be.
  • The IGNORE is an optional list of glob patterns to ignore.
    • Currently only the webreloader is ignored.
    • Anything else must be added if need be.
  • The PORT is optional and used to set a specific proxy port.

Start

To start a given mirror, run the following command:

cd $root/webreloader
npm start [__TARGET__]

The proxy will then open in your (default) web browser.