Exposing your UI App to the public

Congratulations for reaching this far with your first Quantive Results UI App! Now that you have the app working locally, the next step is to make it available to the public. This is an important step, as all UI Apps must have a public URL so they can be submitted to the Quantive Results Marketplace, which enables you to then test the app in your Quantive Results account. For more information on testing your UI App, see: Build and publish an app.

You can use any mechanism you prefer to expose your UI App URL to the public. For the purpose of this tutorial we will use ngrok. Ngrok is a cross-platform application that exposes local server ports to the Internet, which is just what we need. The demo UI App you cloned and started on the previous steps of this tutorial comes with Ngrok pre-configured.

Prerequisites

Ensure the demo UI app you downloaded in the previous steps is up and running. Check Download and run the demo app

Configure ngrok

If you have not used ngrok before, follow these steps to configure it on your machine:

  1. Download ngrok on your machine
  2. Sign up for a free ngrok account - you will need a free account, so you can use ngrok
  3. Once you sign up for an Ngrok account you must configure your Ngrok auth token on the local machine

Following these steps results in an auth token that is saved in your local ngrok configuration. This way the demo UI App can use your ngrok token and provide you with a working public URL every time you start it.

Automatic setup

The demo UI App from this tutorial comes with ngrok pre-configured. Every time you run it (refer to Download and run the demo app) it will run locally on http://localhost:5000/hello-world and will also provide you with a public URL via ngrok. To get the public URL, follow these steps:

  1. Start the demo UI app
npm start
  1. Check your console or terminal window for the output from runnign this command. The application it will generate a ngrok url and print a result like this: ngrok console screen.
  2. Use the generated ngrok URL to submit your UI App to te Quantive Results Marketplace. You can then test the app in the context of your Quantive Results account. For more information on testing your UI App, see: Build and publish an app.

NOTE Every time you restart your demo UI App (and/or ngrok respectively), it will generate a new public URL. You must update your UI App in the Quantive Results Marketplace, so it uses the new URL and you can continue testing it.

NOTE Ngrok's free plan has a limited time for serving your localhost. Once it times out you can always restart it.

Manually setting up ngrok for your next UI Apps

If you are not using the demo UI App, but are working on a new UI App, this section will guide you through the necessary steps to use ngrok and generate a public URL.

As a prerequisite, ensure you can Configured ngrok. Once you have installed and configured ngrok, follow these steps:

  1. Open a terminal. Navigate to your ngrok installation directory and run the following command:
./ngrok http 5000

This command instructs ngrok to start forwarding any traffic on the public URL (usually something like http://your-ngrok-id.ngrok.io) it generated to your http://localhost:5000. NOTE If you are running your UI App on a different port, make sure to adjust it above.

If everything is successful you should see a similar output in your terminal:

Session Status    online
Account           Quantive Results (Plan: Pro)
Version           2.3.35
Region            United States (us)
Web Interface     http://127.0.0.1:4040
Forwarding        http://your-ngrok-id.ngrok.io -> http://localhost:5000
Forwarding        https://your-ngrok-id.ngrok.io -> http://localhost:5000

You can validate the publicly generated URL by visiting it in your browser.

NOTE Every time you restart ngrok, it will generate a new public URL. You must update your UI App in the Quantive Results Marketplace, so it uses the new URL and you can continue testing it.

NOTE Ngrok's free plan has a limited time for serving your localhost. Once it times out you can always restart it.