App bridge 4 not working in dev

[linaori]

With this change: https://github.com/Shopify/shopify-frontend-template-react/pull/255/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R20

It is supposed to insert the %VITE_SHOPIFY_API_KEY%, but not matter what I try this isn't inserted. When I run the build command it works fine and my key gets inserter, but in dev it doesn't get replaced. This causes all fetch() calls to just stop working and not do anything. I don't get errors, I don't get warnings, I don't get logs, I don't get http calls.

How am I supposed to get this to work in dev mode? The documentation doesn't specify anything, and there's nothing in the migration guide for this change.

[lizkenyon]

I there 👋

Could you clarify a few things for me?

• What are you using for the backend of your application? The express template, or ruby template, or custom?
• What version of the Shopify CLI are you using?

[linaori]

• The backend is based on the php template (which is using this frontend).
• I've tried with several versions, 3.79.1 is the latest I've tried it with.

[Mini-Sylar]

Been struggling with the same issue for a while in dev mode and seeing this comment somehow made me figure it out (I'm working on a vue template similar to this but with express)

What you can do is when in dev mode you can inject those tags and embed the necessary keys before you serve them to the client

Example in express:

app.use('/{*path}', shopify.ensureInstalledOnShop(), (_req: Request, res: Response) => {
  let htmlContent = readFileSync(join(STATIC_PATH, 'index.html'), 'utf8')
  // ! When in dev mode inject the keys into the index.html
  if (process.env.NODE_ENV !== 'production') {
    const apiKey = process.env.SHOPIFY_API_KEY || ''
    console.log(`[Dev Server] Injecting Shopify API Key: ${apiKey}`)
    const shopifyTags = `
  <meta name="shopify-api-key" content="${apiKey}" />
  <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>`
    htmlContent = htmlContent.replace('</head>', `${shopifyTags}\n</head>`)
  }

  res.status(200).set('Content-Type', 'text/html').send(htmlContent)
})

Then in your react vite.config you can write a simple plugin to do the transformation when in production mode:

plugins: [
    {
      name: 'vite-plugin-replace-shopify-api-key',
      enforce: 'pre',
      transformIndexHtml() {
        return {
          tags: [
            {
              injectTo: 'head-prepend',
              tag: 'meta',
              attrs: {
                name: 'shopify-api-key',
                content: process.env.SHOPIFY_API_KEY
              }
            },
            {
              injectTo: 'head-prepend',
              tag: 'script',
              attrs: {
                src: 'https://cdn.shopify.com/shopifycloud/app-bridge.js'
              }
            }
          ]
        }
      }
    },
    vue()
  ],

That did it for me 👍

[linaori]

I ended up using str_replace(...) in php before serving it from the backend, but this shouldn't be necessary for the frontend to work.

[Mini-Sylar]

I think in dev mode the index.html is served too quickly before the vite transforms it, and for some reason no HMR doesn't automatically detect the updated variable to replace it.

IMO manually embedding the key on the server side during dev mode is the right move

[darrynten]

In your vite config export defineConfig() just do this:

  define: {
    "import.meta.env.VITE_SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
  },

to make %VITE_SHOPIFY_API_KEY% get replaced in the index.html file with your env value automatically

[Mini-Sylar]

You would have to embed the key in on the server side, or it wouldn't work with appbridge v4

I just noticed that was already fixed on the backend in the node template;

See https://github.com/Shopify/shopify-app-template-node/blob/decd5f918a8ef267ddc43c80c949ae1dcec3cbc3/web/index.js#L82