There's no page at this address Check the URL and try again

[postprodigy]

When installing the app the first time using a test store - I see that this  Provider from app-bridge-react redirects the application to the Shopify admin URL..

https://admin.shopify.com/store/postprodigy2/apps/fba84766627cb9c79563e270e0954568/?hmac=f0c5a10dd6e83e912ebe5ae4238b66dfc9aa03ea64695b20a619d1fee8687426&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvcG9zdHByb2RpZ3ky&shop=postprodigy2.myshopify.com&timestamp=1679817335

But the issue here is that I get a 404 from Shopify on app install and I have no idea why - My Express / Next.js server has no logs. It looks entirely browser redirects Shopify's end bc there is no embedded iFrame for my app on this page.. This is all very confusing I have literally no clue how to debug what's wrong here. I read some other discussions about clear DB which I did, just delete the SQLite sessions file. Can anyone help me figure out what the heck is going on here? I can't find any documentation and there's no readable source-code for @Shopify/app-bridge-react? These tools and APIs are like the mother of all Rube Goldberg machines..

Here's the Provider higher order component that wraps the Next.js _app.tsx file..

import React, { useEffect, useMemo, useRef } from "react";
import { useRouter } from "next/router";
import { Provider } from "@shopify/app-bridge-react";
import { getShopifyApiKey, isServerEnvironment } from "../config";
import { redirectToAuth } from "../helpers/redirect-and-reauthorize";
import { getQueryValue } from "../helpers/get-query-value";

declare global {
  interface Window {
    ENV: { SHOPIFY_API_KEY: string };
  }
}

export function Host({ children }) {
  const apiKey = getShopifyApiKey();
  const hostRef = useRef<string>("");
  const router = useRouter();
  const { asPath } = router;

  useEffect(() => {
    const host = getQueryValue(router, "host");

    if (host) {
      hostRef.current = host;
    } else {
      redirectToAuth();
    }
  }, [router]);

  const history = useMemo(
    () => ({
      replace: (asPath) => {
        router.push(asPath);
      },
    }),
    [asPath]
  );

  const routerConfig = useMemo(
    () => ({ history, location: asPath }),
    [history, asPath]
  );

  if (!hostRef.current) {
    return null;
  }

  return (
    <Provider
      config={{
        apiKey,
        host: hostRef.current,
        forceRedirect: true,
      }}
      router={routerConfig}
    >
      {children}
    </Provider>
  );
}

[garyrgilbert]

Thats probably the internal uid of the app. Shopify uses that during the redirect phase of the app or directly after install, when the merchant then clicks on the app from the apps menu it puts in the actual name of the app.  I think they had some asynch issues thats why it uses the uid on first load.

I'm guessing you are using ngrok or some other passthrough to host your app during development on localhost or are using a web accessible host machine to begin with right? If no then this shouldn't be the problem either.

The very first thing that should happen during install is that the app gets redirected to the oath flow so that the merchant can approve the scopes.. is this happening?

Cheers,

Gary