2 min read

How to connect an App to BFC API running locally

During feature development and bug fixing there are situations when you need to connect an App running on your device to an API running locally. How to do that for an IOS device is described in this section.

Prerequisites

  • Have Charles Proxy installed on your computer
  • Have Application installed on your phone (in this tutorial we will be using IOS device)
  • Have BFC API running on your computer

Steps

  1. Launch Charles
  2. Select Help > SSL Proxying > Install Charles Root Certificate on a Mobile Device or Remote Browser

Root certification installation, image 1
Root certification installation, image 1

You will be presented with the following window:

Root certificate installation, image 2
Root certificate installation, image 2

  1. On your iPhone, open Settings > Wi-Fi > PoqCommerce WiFi > Configure Proxy. On this page set following values and press Save:
    1. Manual
    2. In Server, type the IP address displayed by Charles on your Computer (final screen from point 2)
    3. In Port, type the port displayed by Charles on your Mac (final screen from point 2)
    4. Leave Authentication off

IPhone proxy configuration
IPhone proxy configuration

  1. On your iPhone, open Safari and go to https://chls.pro/ssl. Hit Allow and install the root certificate

Root certificate installation, image 3
Root certificate installation, image 3

  1. Open Settings > General > About > Certificate Trust Settings. Switch Charles certificate to On.

Trust root certificate
Trust root certificate

  1. Open an app on your iPhone.
  2. Check Charles logs on your Computer. You should now see traffic coming from your device in Charles.

Charles logs for standard domain
Charles logs for standard domain

  1. At the moment traffic is being routed to standard domain and standard route https://dev.poq.io/clients/yourbrand, while we need it to be routed to https://localhost:5001. In order to change that go to Charles on your Computer and open Tools -> Rewrite window

Rewrite menu item
Rewrite menu item

  1. In Rewrite Settings click Add button to add new rewrite rule and set the name of the rule

Rewrite settings
Rewrite settings

  1. In Location tab, press Add button specify following values:
    1. Protocol: https
    2. Host: dev.poq.io

Edit location
Edit location

  1. On Type and Action tab, press Add button and specify following values:
    1. Type: URL
    2. Match.Value: https://dev.poq.io/clients/yourbrand
    3. Match.Match whole value: unchecked
    4. Match.Case sensitive: unchecked
    5. Replace.Value: https://localhost:5001
    6. Replace.Replace First: selected

Rewrite rule
Rewrite rule

  1. Check Charles logs again, you should now have all the traffic redirected to the API running locally

Charles logs for localhost
Charles logs for localhost

Congratulations! You have successfully linked an Application on your device with the API running locally.

See Next