{"id":5517,"date":"2023-11-03T19:06:38","date_gmt":"2023-11-03T19:06:38","guid":{"rendered":"https:\/\/innovonics.com\/?p=5517"},"modified":"2024-04-09T04:33:46","modified_gmt":"2024-04-09T04:33:46","slug":"creating-a-free-tunnel-service-for-developing-shopify-apps","status":"publish","type":"post","link":"https:\/\/innovonics.com\/creating-a-free-tunnel-service-for-developing-shopify-apps\/","title":{"rendered":"Creating a free tunnel service for developing Shopify apps"},"content":{"rendered":"\n

This will be a quick tutorial on creating a tunnel service using Cloudflare’s Tunnel<\/a> solution to start developing Shopify apps locally, quickly, and without the need for changing tunnel endpoints. Also, Ngrok is great, but free is better.<\/p>\n\n\n\n

The first thing you will need is a Cloudflare account. That should be self explainatory, just go here: https:\/\/dash.cloudflare.com\/sign-up<\/a> and sign up.<\/p>\n\n\n\n

Next, you should install the Cloudflare CLI, this will allow us to run our tunnel. I’m using MacOS Homebrew: <\/p>\n\n\n\n

Bash<\/span><\/path><\/path><\/svg><\/span>
brew<\/span> <\/span>install<\/span> <\/span>cloudflare\/cloudflare\/cloudflared<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Now we can authenticate the client to continue configuring our tunnel:<\/p>\n\n\n\n
Bash<\/span><\/path><\/path><\/svg><\/span>
cloudflared<\/span> <\/span>tunnel<\/span> <\/span>login<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\n
This will open your browser, it may ask for you to login, then it will list the domains you can add the tunnel to:<\/p>\n\n\n\n
\"\"
<\/figcaption><\/figure>\n\n\n\n
Click Authorize<\/em> and you should see a confirmation.<\/p>\n\n\n\n
\"\"
<\/figcaption><\/figure>\n\n\n\n
\"\"
<\/figcaption><\/figure>\n\n\n\n
This will create a certificate on your machine, which would be ~\/.cloudflared\/cert.pem<\/code> by default, allowing you use cloudflared<\/code> to communicate with Cloudflare. <\/p>\n\n\n\n
Now let’s create the tunnel and give it a name, I’m going to name mine default<\/code>:<\/p>\n\n\n\n
Bash<\/span><\/path><\/path><\/svg><\/span>
cloudflared<\/span> <\/span>tunnel<\/span> <\/span>create<\/span> <\/span>default<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
You can use the following command to verify your tunnel and list all tunnels you might have created:<\/p>\n\n\n\n
Bash<\/span><\/path><\/path><\/svg><\/span>
cloudflared<\/span> <\/span>tunnel<\/span> <\/span>list<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Now open your Zero Trust<\/a> dashboard, go to Access<\/code> dropdown, then click Tunnels<\/code>.  You will see the tunnel listed as Inactive and a little hint telling you the tunnel is locally managed.<\/p>\n\n\n\n
\"\"
<\/figcaption><\/figure>\n\n\n\n
These steps are optional, but make managing your tunnel much easier since you can do it through the Zero Trust UI rather than through the Cloudflared CLI. <\/p>\n\n\n\n
Click on the tunnel name, then click configure<\/code> in the popout that shows<\/p>\n\n\n\n
\"\"
<\/figcaption><\/figure>\n\n\n\n
At this point you will need to run the tunnel in order to start the migration. Run the following command to start it up:<\/p>\n\n\n\n
Bash<\/span><\/path><\/path><\/svg><\/span>
cloudflared<\/span> <\/span>tunnel<\/span> <\/span>run<\/span> <\/span>default<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
This will enable the Start migration<\/em> button. You can click it now.<\/p>\n\n\n\n
\"\"
<\/figcaption><\/figure>\n<\/div>\n\n\n\n
Now just confirm all steps, no need to fill anything out, and confirm the migration:<\/p>\n\n\n\n
\"\"
<\/figcaption><\/figure>\n\n\n\n
You should now see it listed as Healthy<\/code>!<\/p>\n\n\n\n
\"\"
<\/figcaption><\/figure>\n\n\n\n
Now we need to configure the public hostnames we want to use. Click on the title of the tunnel then Configure <\/code>in the popout again. On the following page go to the Public Hostname<\/code> tab, and let’s Add a public hostname<\/code><\/p>\n\n\n\n
\"\"
<\/figcaption><\/figure>\n\n\n\n
\n
Fill out the info:<\/p>\n\n\n\n
    \n
  • Subdomain: the name of the subdomain you want<\/li>\n\n\n\n
  • Domain: the domain of the tunnel<\/li>\n\n\n\n
  • Path: I dont set this<\/li>\n\n\n\n
  • Type: HTTP<\/li>\n\n\n\n
  • URL: Where the tunnel points to locally. I use localhost:8002<\/code> where the port :8002<\/code> is where I point all my app to run in development<\/li>\n<\/ul>\n<\/div>\n\n\n\n
    \"\"
    <\/figcaption><\/figure>\n\n\n\n
    To confirm: you can go to your domains DNS settings and you should see the listing for your tunnel:<\/p>\n\n\n\n
    \"\"
    <\/figcaption><\/figure>\n\n\n\n
    Finally, go to your app settings in Shopify, and change your development apps App URL<\/code>‘s to the newly created tunnel url:<\/p>\n\n\n\n
    \"\"
    <\/figcaption><\/figure>\n\n\n\n
    You’re done! Now whenever you start development, just make sure to start up your tunnel service using the start command:<\/p>\n\n\n\n
    Bash<\/span><\/path><\/path><\/svg><\/span>
    cloudflared<\/span> <\/span>tunnel<\/span> <\/span>run<\/span> <\/span>default<\/span><\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
    This will be a quick tutorial on creating a tunnel service using Cloudflare’s Tunnel solution to start developing Shopify apps locally, quickly, and without the need for changing tunnel endpoints. Also, Ngrok is great, but free is better. The first…<\/p>\n","protected":false},"author":2,"featured_media":5765,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,18],"tags":[35,22,31],"_links":{"self":[{"href":"https:\/\/innovonics.com\/wp-json\/wp\/v2\/posts\/5517"}],"collection":[{"href":"https:\/\/innovonics.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/innovonics.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/innovonics.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/innovonics.com\/wp-json\/wp\/v2\/comments?post=5517"}],"version-history":[{"count":6,"href":"https:\/\/innovonics.com\/wp-json\/wp\/v2\/posts\/5517\/revisions"}],"predecessor-version":[{"id":5767,"href":"https:\/\/innovonics.com\/wp-json\/wp\/v2\/posts\/5517\/revisions\/5767"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/innovonics.com\/wp-json\/wp\/v2\/media\/5765"}],"wp:attachment":[{"href":"https:\/\/innovonics.com\/wp-json\/wp\/v2\/media?parent=5517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/innovonics.com\/wp-json\/wp\/v2\/categories?post=5517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/innovonics.com\/wp-json\/wp\/v2\/tags?post=5517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}