LightProxy is an open source desktop proxy software developed by the IFE team based on Electron and Whistle. It aims to enable front-end developers to accurately control their own development environment and forward and modify each request and response content using HTTP proxy rules.

Why do you need a proxy tool

Proxy tools allow you to control your current development environment as much as you want.

The development environment is one of the biggest impediments to r&d performance. Unusable environments, uncompleted deployments, unstable upstream environments, and so on can easily consume days of a very simple requirement.

When the development environment falls into an unhealthy state, developers are more likely to break the pot. I’d rather endure manual build-ups for a few minutes every time I change a line of code than spend time making the Watch usable and then find myself getting busier and busier.

In Greek mythology there is a man named Sisyphus who was punished by having to push a huge boulder up a hill, only to have it roll back down the hill every time he reached the top, and so on for ever. In Western contexts, the adjective Sisyphean describes “an endless and fruitless task.”

Proxy tools can quickly mock out your interfaces and pages when they suddenly don’t work. When you want to test the possible consequences of an online page change, proxy tools allow you to quickly see what you want locally without going through a complicated publishing process.


What is a good development environment

Since we’re talking about the impact of a development environment on r&d efficiency, let’s take a look at what makes a good front-end development environment.


stable

A good development environment should first be stable and usable, and should not be frequently broken or changed during development tests. A front-end that relies on the back-end’s day-to-day interface for debugging should know this all too well, as the environment often introduces new problems before their own problems are solved.


Quickly validate

Making changes to code that can be verified in as little time as possible is also a fundamental requirement, which is why most front-end builds focus on Hot Reload and more advanced HMR.

Some scenarios require a long wait for a simple change, such as relying on upstream to modify the returned content of the interface, modifying the back-end page structure and redeploying, and going through a complete release process to test the impact of a change on the real online page, etc.

The drag on productivity from waiting dozens of minutes to change a line is terrifying.

Consistency with the line

The online environment of many projects is extremely complicated. In order to solve the problems in daily development, there will be an offline DEMO page, which will be moved online after the development.

This method is relatively stable and can be verified quickly, but the prominent problem is that it is inconsistent with online. There is a lot of if-else logic in development, such as the most common:

const API_BASE = utils.isDaily ? 'http://localhost:7001:': 'https://xxxx/';Copy the code

This also makes bugs very difficult to locate, forcing developers to revert to an online environment where debugging is inefficient.


deterministic

Developers should be aware of the current environment, rather than constantly wondering if their configuration is working, if they hit the cache again, etc.

In some cases, we use the hosts switch tool to perform the synchronization, but after cutting the hosts, we have to go back and forth to check whether the switch is effective. We know the DNS Cache of Chrome, and we know the Socket.

This uncertainty not only increases the developer’s mental burden, but also makes it difficult to locate bugs.


How does LightProxy address these issues

So how does LightProxy solve these problems

LightProxy allows you to modify request and Response in your development environment with whistle-based proxy capabilities.


For example

For example, when we need to add a DIV to the online page, if there is no proxy, we need to rely on a similar pre-release environment at the back end, but with LightProxy, we only need to use:

https://www.alibaba.com/ htmlPrepend://(<div>test</div>)Copy the code



You can insert a div into a page on a line.

Similarly, we can directly forward a JS from a page to a local file under development

https://www.google.com/xx.js file:///User/xxx/xxx.jsCopy the code

When the back end lacks a CORS header, we can simply add the CORS header to it first

https://xxx.com/xx.json resCors:// Add the CORS header to the response requestCopy the code

It is also possible to turn a file into an inline text, as long as it is framed like an ES6 string

https://xxx.com/xx.json `test text`Copy the code

In general, LightProxy allows developers to take full control of their own development environment and customize it at very low cost, rather than always waiting for their dependencies to provide the environment for their needs.

Even more, you can write your own response to a rule in NodeJS: write rules in NodeJS


Quick confirmation

To quickly verify that the proxy is working as expected, we added some information to the Response Header of a LightProxy network request to help developers quickly determine what rules the current request matches and how the request came about (who responded, what rules were matched, The actual source of the real visit).

There is no silver bullet

While proxy tools can be a quick fix for various development environments, they are not a silver bullet.

This solution is more suitable for quickly bypassing various obstacles in the development phase, but in the end, a healthy environment is still needed to ensure the smooth collaboration process of the project in the multi-person collaboration, and the development environment cannot be completely ignored because of the agent tool.


Start & Download

With that said, start controlling your development environment with LightProxy: github.com/alibaba/lig…


download

MacOS version of Windows version

The problem of feedback

Welcome to join the Group to discuss and feedback questions, or directly to the issue of feedback questions: github.com/alibaba/lig…

Ps: Whistle’s author is here, too