npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

browser-reloader

v0.0.1

Published

An Awesome CLI tool to reload browser on every code change

Downloads

20

Readme

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😍