Issue: A Shopify CLI Node app deployed to Heroku renders inside Shopify Admin but is completely unresponsive. Opening the app URL directly shows “https:undefined…” errors, and the browser console reports “AppBridgeError: APP::ERROR::INVALID_CONFIG: apiKey must be provided,” suggesting environment variables aren’t being read.
What was configured: Heroku config vars set (SHOPIFY_API_KEY, SHOPIFY_SECRET_KEY, scopes, host, shop). App URL and whitelisted redirect URL updated to the Heroku domain.
Key finding/resolution: Several users report it starts working only after making an initial commit and running “git push heroku master” in addition to “shopify deploy heroku.” This indicates the deploy step alone didn’t propagate the code/config as expected.
Debugging tips shared:
Log process.env.SHOPIFY_API_KEY on Heroku to confirm it’s present.
If push says “up to date,” inspect .gitignore (files may not be committed/deployed).
Open questions/remaining issues: One user still affected suspects the HOST env var; no confirmed value was provided. Another asks why a manual “git push heroku master” is necessary and whether it’s documented. Status: partially resolved; cause and documentation remain unclear.
Summarized with AI on February 16.
AI used: gpt-5.
I created my app with Shopify CLI “shopify create” (Node.js app) and deployed it to Heroku (shopify deploy). I already add my .env variables (scopes ,SHOPIFY_API_KEY, SHOPIFY_SECRET_KEY, host, shop) to my heroku config Vars, and I changed my app url to https://MY-URL.herokuapp.com/ , and the whitelisted redirect urls to https://MY-URL.herokuapp.com/auth/callback
When trying to open the app in my dev store, the interface is shown correctly (see image below)
However, the interface is unresponsive. So e.g. I can not press the button or select the text with mouse. (actually I can not do any mouse actions at all)
I have no idea what could cause this unresponsiveness.
Further info:
If i open https://MY-URL.herokuapp.com/ in browser, Safari says "Safari cant find the server, “https:undefined/admin/oauth/authorize?..”,
As you can see, it says “{name: “AppBridgeError”, message: “APP::ERROR::INVALID_CONFIG: apiKey must be provided”, action: undefined, type: “APP::ERROR::INVALID_CONFIG”, stack: “AppBridgeError: APP::ERROR::INVALID_CONFIG: apiKey must be provided”}”
However, I included the SHOPIFY_API_KEY as key in my Heroku config vars (and the value without “” ). I have not changed the code generated by shopify-cli ( so I still try to access with process.env.SHOPIFY_API_KEY ).
Maybe I made a mistake when trying to include my config vars with Heroku?
My memory on this is really foggy as this was months ago, but I recall when I created a Rails app using shopify CLI and deployed to heroku, I needed to also make sure I manually added the environment variables in the Heroku interface.
I had the same issue and git push heroku master fixed it surprisingly. Anyone have any idea why this works? Does Shopify have this step documented anywhere (guessing not )?
)?