Browser Reloader

An Awesome CLI tool to reload browser on every code change

Description

Browser Reloader is a CLI tool that automatically reloads your browser when you make changes to your code. It's particularly useful for web development projects that use template engines. The tool uses chokidar to watch directories for changes, and socket.io to communicate with the browser.

Features:

• Reload your browser on every code change.
• Watch multiple directories and reload multiple hosts.
• Reload another computer's browser with this tool (the other computer must be connected to the same network).

Installation: Command Line Tools

You can install Browser Reloader locally or globally using npm.

Locally:

npm i browser-reloader

Globally:

npm i -g browser-reloader

Installation: Connect Wtih Browser

There are two method to connect with browser.

1. Method: Extension

To install, download and unzip the extension, open chrome://extensions/, check the "Developer mode" box, and use "Load unpacked" extension on the directory containing your downloaded folder.

Manifest V2 (Recommended): Download

Manifest V3: Download

Firefox Addons: Get Extension

2. Method: Script Tag

Add this script tag into your project. If you want to reload both (locally and remotely) browser just add remote wi-fi script tag.

Locally:

<script src="http://localhost:64356/reloader.js"></script>

Remote Wi-Fi:

<script src="http://{IPv4 Address}:64356/reloader.js"></script>

How to use

Start Reloader: CLI

To start Browser Reloader from the command line, use the following options:

$ reloader --help

Options:
  -w, --watch [type...]  To watch directory, you can watch multiple directories 
  -h, --host [type...]   For reload host, also reload multiple hosts 
  -p, --port [type]      For port 
  --help                 display help for command

Examples

Here are some examples of how to use these options:

• Watch all directories and reload localhost (default):

$ reloader 

• Watch the public and views directories and reload localhost:

$ reloader -w public views

• Watches CSS inside the public folder, views directories, and reload all localhost:

$ reloader -w public/css views

• Watches public and views directories and reload localhost:4000:

$ reloader -w public views -p 4000

• Watches public and views directories and reload {IPv4 Address}:4000 (if you want to reload another PC or Android browser, use this option):

$ reloader -w public views -p 4000 -h {IPv4 Address}

• Watches public and views directories and reload {IPv4 Address}:4000, localhost:4000 (if you want to reload both the current PC browser and another PC or Android browser, use this option):

$ reloader -w public views -p 4000 -h {IPv4 Address} localhost

• Watches public and views directories and reload {IPv4 Address}:4000, localhost:4000 (if you want to reload multiple ports, use this option):

$ reloader -w public views -h localhost:3000 localhost:4000

If you want to reload your current browser then do nothing just install browser extension.If you want to reload remote browser through local wifi then switch local to wifi, input Ipv4 address then press connect.

Contribution

If you want to contribute or report any bug, you welcome
Don't forget to give a star😍