Guidance on Embedded App Development

Retired Boards Appdev Fulfillment Api
1

Hi everyone,

I’m trying to build an embedded public app for Shopify using NodeJS (Express) backend and Svelte SPA frontend but am struggling to understand the overall auth flow. I’m trying to avoid the shopify-cli tool as it’s forcing me to use NextJS and I prefer to use Svelte.

The current app structure is as follows:

server.ngrok.io is the NodeJS /Express app

client.ngrok.io is a separate client side only app using Svelte (no server side rendering)

My app currently implements the following flow:

  1. User enters app at server.ngrok.io/api/shopify-auth/

  2. server.ngrok.io/api/shopify-auth/ redirects user to client.ngrok.io/install which is essentially just a skeleton Svelte page with the iframe escaping script per Shopify’s App Bridge guide, which redirects the user to the Shopify permission page

  3. Shopify redirects back to server.ngrok.io/api/shopify-auth/callback

  4. server.ngrok.io/api/shopify-auth/callback exchanges temp token for a permanent one, stores perm in my db

However, I’m encountering the following problem:

  1. If I redirect the user to client.ngrok.io from step 4 above, the app will open in a new window, not in the iframe. I’ve tried going to my test store’s admin → apps’ page and I could render the app but the AppBridge isn’t working as the host parameter is never passed to the AppBridge instance. How do I go about passing this host parameter to the my frontend app given that it’s only provided once during the OAuth flow?
  2. After browsing around, I realised the host is just a Base-64 string of the .myshopify.com/admin. I’ve tried generating this manually in the frontend app but now I’m encountering a different issue. Shopify won’t instantiate the AppBridge as the starting point in my partner dashboard is the server.ngrok.io host whereas the AppBridge is instantiated in client.ngrok.io host. Am I missing something? How should this be handled in a dev environment? I know I could do npm run build and serve the client from the backend but I’d lose all the hot reloading feature in development.

Appreciate it if anyone can help me solve both of these issues!

Cheers

2

Hi ksoenandar!

If your application url is set to server.ngrok.io, then in all likelihood Shopify won’t recognize redirects to client.ngrok.io. It may be the cause of your problem. Both your server and your web app should live on the same domain. You’d have to serve the Svelte app from your Node App instead of them running on two separate instances.

Hope that helps!

3

Hi @alanthai ,

Thanks for your response. I get that if I serve it from my nodejs app then it (most likely) will work. But in a dev environment, when I need hot reloading etc, rebuilding the app every time I make a change (even a minor one) would be a major downside to the DX, no? Is there a better solution to this?

Thanks

4

You could try reverse proxying requests from your backend to your front end. If you’re familiar with nginx, that would be viable. A quick Google search gives me this node alternative, although I haven’t tried it myself https://www.npmjs.com/package/http-proxy