Introduction
During local development having all the services on local can be a troublesome task. It further complicates the process when you have more than one backend services to consume.
“Map Remote” comes handy in such cases where you can map a remote URL to your local API calls without making any changes to your codebase.
Map Remote can also be used to
Test staging or production frontends with your local backend to debug issues.
Test your local JS / CSS files on production or staging for debugging.
Setting up Map Remote in Charles Proxy is little complex. You can follow the steps below to configure Map Remote with ease.
A Browser Extension, that just needs you to fill 2 fields and doesn’t have VPN issues, is also explained later in this post. You can also use that in place of Charles Proxy.
Charles Proxy’s Map Remote Tool: How It Works
Charles Proxy’s Map Remote feature allows you to intercept and redirect requests from their original destination to a new remote URL. This is particularly helpful when you need to point requests to a different server or environment without altering the actual codebase. However, configuring Map Remote can be a bit tricky and requires attention to detail.
How to Configure Charles Proxy’s Map Remote Tool
- Open Charles Proxy and ensure that your proxy is enabled and traffic is being captured.
- Navigate to the Tools Menu:
- In the top menu, click on Tools.
- From the dropdown, select Map Remote.
This will open the Map Remote settings window, here check Enable Map Remote box and click Add
Here you have 2 sections
Map From: Here you define the URL you want to redirect
Map To: Here you set the URL where the redirection leads to- Protocol: Here you can select your site’s protocol http or https
- Host: Here you can enter the host/domain that you want to apply the rule to.
- Port: You can specify the port on which your site is running.
- Path: Define the path if you want to apply on a specific path.
- Query: Here you can define the query parameters that should be targeted.
Now Save the rule.
- After saving this you should be able to see the rule and its modifications
- Now visit the site you selected and you can see the URL change.
I hope you are able to configure Map Remote, if you are facing issues in setup of SSL read about SSL setup on Charles Proxy official documentation.
Due to this complicated setup process of Charles Proxy and issues with VPN we, at Requestly, came up with a smart solution. We developed a Browser Extension that can sit inside the browser and use browser’s APIs to intercept and modify your network requests.
Map Remote rule in Requestly
Requestly is designed differently so it doesn’t need any SSL configuration and hence works seamlessly with your VPNs. Map Remote is simplified as “Redirect Rule” in Requestly. With just 2 inputs i.e. source URL matching condition and redirect to URL, you can redirect any network request to your desired destination.
There are more advanced rules in Requestly & other features to help you test the working of the rule along with details of how to use this rule are explained below.
- Source Condition: This determines which requests will be redirected.
- Type of Redirect: Choose the type of redirect you want to apply. It can be sent to another URL or a local file, or you can upload a file.
- Destination URL: Enter the destination URL for your redirect.
Steps to Configure Requestly’s Modify Header Rule
- Install Requestly Extension: Download and install Requestly’s browser extension.
- Open Requestly Dashboard: Visit app.requestly.io and log in.
- Click on the Rules tab and then select New Rule.
- Choose Redirect rule as the rule type.
- Enter the URL or URL pattern in the Source Condition field.
- Select the type of redirect you want: another URL, a local file, an uploaded file/ mock server.
- To redirect to another URL, simply set the destination URL.
- Name your rule and click Save.
Now test the rule on your desired website, or if you do not want to go through the hassle of setting it up yourself, we have created a shared list of this rule for disabling cache for you. Go ahead and import it by clicking this button below
Or create your own Rule by following the setups below
Interactive guide
Check out this interactive and easy explanation of how to create this rule :
Other Use Cases for Requestly’s Redirect Rule
- Testing API Endpoints: Redirect requests from production to a staging or local API server to test new features without changing the live app.
- Avoiding External API Calls: Redirect API requests to mock servers or local environments during development to avoid affecting live data or incurring unnecessary API costs.
- A/B Testing Without Server Changes: Use the Redirect Rule to direct traffic to different versions of a webpage or app, making A/B testing faster without needing to deploy code changes.
Migrate from Charles proxy
If you already have a Charles Proxy setup and want to give Requestly a try, You can import these tool settings in Requestly in just few clicks Requestly currently supports following tools that you can import from Charles Proxy:- Rewrite
- Map Local
- Map Remote
- No Caching
- Block lists
- Block Cookies
Steps to import
- In Charles Proxy, go to the top menu bar and select
Tools > Import/Export Settings.
In the popup window that appears, switch to the
Exporttab. Under theToolssection, select the tools you want to export and click theExportbutton at the bottom right.
- Open the Requestly dashboard. If you don’t have any existing rules, you’ll see an
Import settings from Charles Proxy.
- You can also open it from https://app.requestly.io/import-settings-from-charles
Upload or drag your exported Charles
.xmlfile into Requestly.
- Once the import is successful, your Charles Proxy settings will be converted into Requestly rules.
Conclusion
I hope you have got a clear understanding of both the Map Remote tool in Charles Proxy and how Requestly can achieve the same results with greater ease. While Charles Proxy effectively handles the task, Requestly offers a modern, simple and efficient experience.
Since Requestly operates directly from your browser and leverages built-in browser APIs, there’s no need for complex SSL configurations, eliminating the VPN issues often encountered with Charles Proxy. Plus, you don’t need to switch between different tools — everything you need is right in your browser.
Love for Requestly is reflected in its 4.4 ⭐ rating from over 1,200 users on the Chrome Web Store. Requestly is being used by 200K+ developers across the world.
Happy Debugging!!!
