Setting up App Bridge Ver 4 in a non-Remix app

App Bridge
1

I’m developing my first Shopify app and I’m running into some issues with App Bridge ver 4. I tried setting up App Bridge based on what it says in the migration document but for some reason it’s not working.

I have this in the same index.html file that is used as an entry point for my React App.

<head>
  <meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
</head>

I replaced the content with the Shopify Client id as a hard coded value.
But I can’t see any reference to it network tab when I load my app.
And when I try to console.log the shopify object inside of the context of my iframe, it comes back as undefined.

Where can I find an example of App Bridge ver 4 being set up in a non-remix app?
And if there isn’t anything like that available, where in the Remix app is App Bridge configured?

I just want to see what I am doing wrong.

2

That code is correct.

Do you see it in the head when you View Frame Source in your browser?

3

What language / framework are you using? Is it plain react?

4

Just regular React on the frontend. I’m not ready for stuff like Next or Remix yet since most of my experience is in Vue JS.

5

@nunof I don’t see it in the browser at all and am not sure what I am doing wrong.

6

Can you share your full index.html please :folded_hands: just so we can check, but without the actual ids :blush:

7

@JordanFinners I had another issue in my react code that was stopping my home page component from loading. The issue was showing up in the compiled code so it took me a while to trace it back to the source.

Once I resolved that, I was able to see the shopify object injected by App Bridge.
So I got it working now.

But with that in mind, here’s a couple of related questions for you:

  1. what do you use to debug issues with your React components? I would normally use React Developer tools but the whole Shopify Admin is a React app so it’s hard to tell what is going on.

  2. How do you load the API key into the App Bridge meta element without hard coding the value? Should I write some logic inside of main.jsx to inject it?

8

Hey Patrick,

You can always run your app outside of Shopify, obviously the Shopify app bridge won’t work but your components should be fine.
I tend to use the chrome debugger too tbh.

In terms of the API key you can stamp the value in during a build process with vite or whichever tool you are using.
But if you’re just running a single app you could keep it hard coded :blush:

2 Likes
9

Hey thanks for your response. I’m still pretty new to building web apps so thanks for taking the time to answer my question.