Frontend Development 11 min read

Introducing hiproxy: A Lightweight, Extensible Proxy Tool for Front‑end Development

hiproxy is a Node.js‑based, lightweight and extensible proxy solution that unifies hosts, Nginx‑style routing, HTTPS certificate management and browser integration to streamline front‑end development environment configuration, sharing, and debugging across teams.

Qunar Tech Salon
Qunar Tech Salon
Qunar Tech Salon
Introducing hiproxy: A Lightweight, Extensible Proxy Tool for Front‑end Development

1. Introduction

Front‑end developers frequently encounter environment‑related problems such as local debugging of online pages, cross‑origin requests, DNS caching, request capture, HTTPS debugging, and certificate management. Managing these issues with hosts files, Nginx, Fiddler/Charles, and various hosts‑switching tools consumes a lot of time, prompting the need for a unified solution.

2. Reflection on Current Development Mode

Projects typically involve multiple environments—online, beta, dev, and local—divided into production and testing categories. Developers often rely on the system hosts file to redirect requests to testing environments without changing URLs, but this approach has limitations.

Using Nginx can provide more precise proxying, yet it requires each developer to maintain separate Nginx configurations and coordinate hosts entries, leading to duplication, inconsistency, and maintenance overhead.

Additional pain points include DNS cache delays, HTTPS certificate generation, and the need for various auxiliary tools.

3. hiproxy Overview

hiproxy is a lightweight, extensible proxy tool built on Node.js. Its main characteristics are:

Lightweight and extensible : Minimal third‑party dependencies, fast installation, and support for custom commands, directives, and pages.

Reuse of existing habits : Configuration syntax mimics familiar hosts and Nginx styles, reducing learning cost.

Automatic HTTPS certificate management : Acts as a CA to generate root certificates and per‑domain certificates on the fly.

Deep browser integration : Launches a dedicated browser window with proxy settings automatically configured.

Basic Usage

Step 1: Start hiproxy – Navigate to the workspace and run the hiproxy command‑line tool to start the proxy service.

Step 2: Locate configuration files – hiproxy scans the workspace for project configuration files, parses them, and builds an internal proxy rule tree.

Step 3: Open browser window – hiproxy opens an isolated browser window with the proxy pre‑configured; other browser windows remain unaffected.

Step 4: Development & debugging – All requests from the dedicated window are processed according to the defined proxy rules.

Configuration Files

Configuration files are recommended to be stored in the project repository and shared via Git.

Simple configuration – hosts

hiproxy extends the system hosts syntax to support port numbers, allowing quick mapping of domains to local services.

Complex configuration – rewrite

For advanced scenarios, hiproxy uses a rewrite configuration file that follows Nginx‑like syntax, supporting regular expressions, request/response modification, and built‑in variables.

4. Comparison with Previous Approaches

DNS cache : hiproxy automatically updates DNS mappings after configuration changes, eliminating the need to restart browsers.

Team‑shared configuration : Storing configs in the project repository reduces maintenance cost and ensures timely updates for all team members.

HTTPS certificates : hiproxy generates trusted certificates automatically, requiring only a one‑time import of the root certificate.

Unified solution : Developers no longer need separate hosts files, Nginx instances, or additional tools; hiproxy handles all these concerns.

5. Current Status and Future Plans

Current status

Open source : Source code and documentation are hosted on GitHub (https://github.com/hiproxy/hiproxy).

Testing : Code coverage exceeds 90% with comprehensive test cases.

Documentation : Main documentation is available at http://hiproxy.org/ and is continuously improved.

Maintenance : Core contributors actively maintain the project.

Plugins : A Dashboard plugin enables online management of hiproxy configuration files.

Future plans

Achieve 100% test coverage and expand test suites.

Release more practical plugins, commands, and CLI features such as programmable mock and network request capture.

Optimize performance by refining data structures and algorithms.

6. Conclusion

hiproxy is still evolving; the community is encouraged to use, provide feedback, and contribute code or documentation to make it more powerful and suitable for developers.

frontenddevelopmentproxyNode.jsnginxhiproxyhosts
Qunar Tech Salon
Written by

Qunar Tech Salon

Qunar Tech Salon is a learning and exchange platform for Qunar engineers and industry peers. We share cutting-edge technology trends and topics, providing a free platform for mid-to-senior technical professionals to exchange and learn.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.