Building Development and Testing Environment Using ngrok

Introduction#

Recently, while working on my thesis, I needed to test on mobile devices. Although there are emulators available, it's still necessary to experience the app on a real device to better identify issues and areas for improvement. However, I didn't want my app to be limited to a local network or rent a server just for this purpose. That's why this tutorial was created.

1. What is ngrok?#

ngrok is a tool for creating a secure tunnel to your local machine. In simple terms, it allows your computer's services to be accessed from the public internet. There are also similar products available in China, such as "Huashengke" and natapp. If you want to use ngrok, you'll need to have a way to bypass the Great Firewall of China.

2. Using ngrok#

Once you've registered on ngrok, you'll receive an Authtoken Key. Using ngrok is very simple and only requires 3 steps:

Download and extract the compressed package for your operating system.
In the ngrok directory, execute ngrok config add-authtoken <authtokenkey>.
In the ngrok directory, execute ngrok http 80 to expose port 80 of your local machine to the internet.

After a successful run, you will receive a URL (e.g., https://cd30-23-247-137-82.ngrok.io) that can be used to directly access port 80 on your local machine. Each time ngrok runs, it assigns a different temporary URL. If you need a fixed URL, you'll need to subscribe to the premium version. The price is quite steep!

3. Using the ngrok API to Obtain Temporary URLs and Replace Them in Your Project#

Although ngrok provides a temporary URL each time it runs, manually adding the link to your project every time can be quite cumbersome. Therefore, we can use the ngrok API to replace the baseURL in our project. First, you'll need to apply for an API Key and record the API key. It's a simple process that only requires a description. Next, refer to the official documentation. The official website provides API libraries for 6 different programming languages. I used Python, and the official documentation for using the API is already very detailed, so I won't go into it here. Instead, I'll provide the script directly.

#!/usr/bin/env python
import ngrok
import re,os

# construct the api client
client = ngrok.Client("Insert API Key Here")

public_url = ""

# list all ip policies
# Since I'm using the Free Plan, I only have one temporary URL, so I didn't do much processing
for endpoint in client.endpoints.list():
    public_url=endpoint.public_url
print(public_url)

def updateFile(file,old_str,new_str):
    with open(file, "r", encoding="utf-8") as f1,open("%s.bak" % file, "w", encoding="utf-8") as f2:
        for line in f1:
            f2.write(re.sub(old_str,new_str,line))
    os.remove(file)
    os.rename("%s.bak" % file, file)

# Replace the baseUrl in the Flutter project
updateFile(r"xxxx/lib/api/request_util.dart", "static const String baseUrl = .*;", 'static const String baseUrl = "%s";' % public_url)

# Replace the baseUrl in the management backend
updateFile(r"xxxx/src/boot/axios.js", "baseURL: .*'", "baseURL: '%s'" % public_url)

4. Running the Scripts#

To make it more convenient to use, you can write two scripts to run ngrok and replace the baseURL in your project.

Note: The following scripts are written for MacOS. Please make the necessary adjustments for your system. If you want to use the following shell scripts, place them in the same directory as the Python file and add the ngrok path to the Path environment variable.

Script to run ngrok:

#!/bin/zsh
ngrok http 8333;
# Remember to change 8333 to the port of your backend project

Script to replace the baseURL:

#!/bin/zsh
dir=$(dirname $(readlink -f "$0"))
python $dir/rebase.py