Error building a public Shopify app: ngrok.io refused to connect

Question

I want a public and NOT embedded Shopify app. This app is a sales channel, which imports products from Shopify stores to my e-commerce website. The stores which install the app will have their products listed on my e-commerce website.

I have built the initial steps to install the app and import the products into my e-commerce website.

Now when user clicks on the app icon, I want him to be redirected to the following page which displays the list of imported product:

https://my-commerce.com/products?storeurl=perisn-handcrafts.myshopify.com

If the above links returns a list of product as below, the product list will be displayed within the Shopify Admin cosole:

<table data-toggle="table">
    <thead>
        <tr>
            <th>UniqueThirdPartyProductCode</th>
            <th>Title</th>
            <th>Price</th>
            <th>ImageUrl</th>
            <th>CombinedCategoryViewModel</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>39-4477334519894</td>
            <td>Blue</td>
            <td>550.00</td>
            <td></td>
            <td>"todo"</td>
        </tr>

        /* more data... */

    </tbody>
</table>

But if I put the table inside the page layout, which adds <html>, <head> and <body> tag to the result, then the result is not displayed... for example if my app return the following HTML:

<html>
<head></head>
<body>
    <table data-toggle="table">
    /* 
     * content of the table 
     */
    </table>
</body>

I would get this result:

I am not sure why I am getting this error:

ngrok.io refused to connect

Also it seems like my app is embedded within Shopify admin console, is it possible to build a public app which is not embedded?

The error you are showing is more related to ngrok connection or your http response (which might be an error code). I would suggest checking the ngrok output on your machine first as it might lead you on the best direction (check you see the requests coming in) — Eyal H

Hooman Bahreini Hooman Bahreini · Accepted Answer · 2020-01-24T23:21:28

Updated Answer

My Shopify app is a Sales Channel and Shopify requires all Sales Channels to be embedded within the admin console (I learnt this the hard way)

In order to make the app embedded inside Shopify admin console we need to remove X-Frame-Options header from response. My application which is developed in ASP.NET MVC and I have added the following code to Global.asax to remove the said header (note that removing X-Frame-Options expose our website to clickjacking attack, so remove the header just for this specific purpose):

Global.asax

protected void Application_PreSendRequestHeaders()
{
    var routeValues = HttpContext.Current.Request.RequestContext.RouteData.Values;
    if (routeValues.ContainsKey("controller"))
    {
        // make sure you only remove the header for a very specific use case
        if (string.Equals((string)routeValues["controller"], "EmbeddedShopifyController", StringComparison.InvariantCultureIgnoreCase))
        {
            Response.Headers.Remove("X-Frame-Options");
        }
    }
}

Original answer

The reason for this error was that I had configured my app to be embedded. To check if your app is embedded or not, go to your Shopify Partners page:

Apps -> Extensions -> Embedded app

Click on Manage embedded app button, and here you can see if the app is configured to be embedded or not. You can Enable/Disable this setting.

In my case, I disabled the embedded app configuration and my app now works fine.

Error building a public Shopify app: ngrok.io refused to connect

1 Answers

Updated Answer

Original answer