How To Share Your Local Xojo Web App to the Internet Using ngrok

Have you ever built an amazing Xojo web application locally on your machine and wished you could instantly share it with a client, test it on a real mobile device outside your local network, or integrate it with a webhook service like Stripe or Twilio? If so, you know the pain of needing a publicly accessible URL for your locally running app.

This is where ngrok comes in: a fantastic tool that creates secure tunnels to your localhost, making your locally running Xojo web app accessible from anywhere in the world. It’s a game-changer for testing, demonstrations, and rapid development.

What is ngrok and Why Xojo Developers Need It?

At its core, ngrok is a command-line tool that creates a secure, public URL for a service running on your local machine. Think of it as a temporary bridge from the internet directly to your computer, bypassing firewalls and NAT configurations.

For Xojo Web developers, this offers a wealth of benefits:

Real-device Testing: Test your Xojo web app’s responsiveness and functionality on actual mobile phones, tablets, or other computers, even if they’re not on your local Wi-Fi network.
Instant Demonstrations: Share your work-in-progress with clients, colleagues, or friends without the need of deploying to a remote server. They just need the ngrok-provided URL!
Webhook Development: Many third-party services (payment gateways, messaging platforms, etc.) use webhooks to notify your application of events. These webhooks require a public URL to send data to. ngrok provides this, making local webhook development a breeze.
Debugging Public-Facing Issues: Sometimes, an issue only appears when your app is publicly accessible. ngrok allows you to debug such scenarios without a full deployment cycle.

It’s truly a must-have tool in your Xojo Web development toolkit!

Getting Started with ngrok

Before we connect our Xojo app, we need to get ngrok set up.

Step 1: Download ngrok

Head over to the official ngrok website: https://ngrok.com/download.

Download the version appropriate for your operating system (Windows, macOS, Linux).

Step 2: Unzip and Place

Once downloaded, you’ll get a single executable file (e.g., ngrok.exe on Windows, ngrok on macOS/Linux). Unzip it and place it in a convenient location. I recommend creating a dedicated folder for it, or placing it somewhere easily accessible from your terminal or command prompt.

Preparing Your Xojo Web App

Xojo Web applications are self-contained web servers. When you run a Xojo Web app in debug mode or build it for deployment, it listens for incoming connections on a specific port. By default, Xojo Web apps usually listen on port 8080.

Let’s quickly ensure your Xojo Web app is ready:

Open your Xojo Web Project: Open any existing Xojo Web project, or create a new one for testing.
Run in Debug Mode: Click the “Run” button in the Xojo IDE. Your web app will launch in your default browser, at http://localhost:8080.

Tunneling Your Xojo App with ngrok

Now for the magic! With your Xojo Web app running locally, we’ll open a tunnel to it using ngrok.

Step 1: Open Terminal/Command Prompt

Open your system’s terminal (macOS/Linux) or Command Prompt/PowerShell (Windows).

Step 2: Navigate to ngrok Directory (if needed)

If you didn’t place the ngrok executable in a system PATH location, navigate to the directory where you unzipped ngrok using the cd command. For example:

cd /path/to/your/ngrok/folder

Step 3: Run the ngrok Command

Now, execute the ngrok command to create the tunnel. Since Xojo Web apps typically run on port 8080, the command will be:

ngrok http 8080

http: Specifies that we’re tunneling an HTTP service.
8080: This is the port your Xojo Web app is listening on. If you’ve configured your Xojo app to use a different port (e.g., in the Build Settings), make sure to use that port number instead.

After running the command, ngrok will output information about the tunnel it has created. You’ll see output similar to this:

ngrok                                                                            (Ctrl+C to quit)

Session Status                online
Account                       Account Name (Free)
Version                       3.x.x
Region                        United States (us)
Forwarding                    https://a52b-20-40-100-120.ngrok-free.app -> http://localhost:8080

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

The most important lines here are the Forwarding lines. These provide you with the public URLs that point to your Xojo web app.

Testing Your Public Xojo App

With the ngrok tunnel active, your Xojo web app is now live to the world!

Copy the HTTPS URL: Copy the https:// URL provided by ngrok.
Test It:
- Paste this URL into any web browser, on any device, anywhere with an internet connection.
- Send the URL to a friend or client to get their feedback.
- Test it on your mobile phone’s browser using its cellular data connection (not your local Wi-Fi) to simulate a truly external connection.

You’ll see your Xojo web app load as if it were hosted on a remote server!

To stop the ngrok tunnel, press Ctrl+C in the console.

Conclusion

ngrok can be an indispensable tool for any Xojo Web developer. It transforms the challenging task of exposing a local web app into a simple, one-line command. Whether you’re testing on diverse devices, showcasing your progress to clients, or integrating with external webhook services, ngrok streamlines your workflow and lets you focus on what you do best: building amazing applications with Xojo.

Give ngrok a try on your next Xojo Web project, and prepare to be amazed by the convenience it offers!

What if we create a Build Step script to automatically run ngrok when needed? Share your experiences and tips in the Xojo forums!

Gabriel is a digital marketing enthusiast who loves coding with Xojo to create cool software tools for any platform. He is always eager to learn and share new ideas!