Subscription Extension URL

[HunkyBill]

When Shopify creates a subscription extension we get the template code to Add, Create, Edit and Remove aspects of the plans. The boilerplate template lets us call our own server. In my case, using the Shopify CLI I get handed an ngrok URL to both my App (embedded) and the extension.

When I am coding in my extension, and I want to call my server, what is the easy way to get the current ngrok tunnel to call my App doing the back-end work? Since I get a new ngrok every time I fire up the CLI I don't want to copy and paste this throughout my code. I would rather pick it up somehow from the extension. Is that available?

[Greg_P]

Hello @HunkyBill, you can use cloudflare tunnel instead of ngrok, thanks to that you will always have the same app url 🙂

[HunkyBill]

Ok. sure, I can also use a consistently named ngrok tunnel. But more to the point, I was wondering if the code itself can pick that up. As another similar, related issue, the URL changes depending on development or production access, and that is also not accounted for. So an URL switcher seems needed even if I settled on a named tunnel.

[EcomGraduates]

hello there  

When using ngrok with the Shopify CLI, the ngrok URL is randomly generated each time you start the CLI. This means that you need to update your app or extension code with the new URL each time you start the CLI.

To make this process easier, you can use environment variables in your code. You can set the ngrok URL as an environment variable, and then reference this variable in your app or extension code.

To set an environment variable in your app or extension code, you can use the process.env object in Node.js. Here's an example:

const ngrokUrl = process.env.NGROK_URL;

In this example, NGROK_URL is the name of the environment variable that contains the ngrok URL. You can set this variable using the command line or in your local development environment.

To set the environment variable in your local development environment, you can create a .env file in the root directory of your app or extension. Here's an example of what the file might contain:

NGROK_URL=https://123abc.ngrok.io