I have a theme extension in my shopify app, which uses the app-proxy-path to make a request to the app backend. I have multiple different apps(QA, Test, Dev, Prod) linked with the same codebase using multiple toml files. Each app has a different proxy path. The issue I am facing is whenever I have to deploy new changes to any app, I have to manually change the api call in my extension’s liquid code to match the proxy of the current app. Is there any way I can get the proxy path of the current app in my liquid code automatically when I deploy any app so I don’t have to change it manually everytime?
I had this same issue with Checkout, Customer and POS Extensions, but with hardcoded React variables to make API calls back to dev/staging/prod.
My solution was to write a CLI utility that creates a configuration JS file from the current environment variables:
npx @getverdict/envify --vars API_HOST
That command will inject the API_HOST from the environment into a vars.tsx file in the Extension.
That way you can gitignore the vars.tsx files in your code, then during deployments generate the configuration file for production in CI.
Now I realize this is for extensions and not liquid, but maybe this pattern will help you too.
You mean changing /a/tools to /community/futz? What path is changing that is not directly in your source code?
1 Like
Each app has a different proxy path
Why do you use different proxy paths?
Is there any way I can get the proxy path of the current app in my liquid code
Unfortunately, there is no way.
No I mean for the dev app the proxy is https://[store domain]/apps/bannerapp-dev-proxy, for qa it is https://[store domain]/apps/bannerapp-qa-proxy and so on, in the extension’s liquid code I want to get the proxy path of current app while deploying, currently it is hardcoded and I have to manually change it while deploying changes to each app
From my understanding 2 apps can’t have the same proxy path, even if I keep the same proxy path shopify changes 1 of them automatically, moreover the app backend is running in different environments (qa, dev, prod) etc. and I want the request to be forwarded to the backend corresponding to the app (QA app should call qa backend, dev should call dev)
what if I store the proxy path of the current app in app metafields, and fetch the metafield in the liquid code. I think that should work
Thanks, will check it out. I was also thinking about storing the proxy path each app in app metafields, and fetch the metafield in the liquid code. I think that should work
You keep it simple. A Dev App is installed in a dev store. So the proxy can be the same as if it was a production store, unless you’re installing the production API key in your dev store on top of the Dev API key. In that case, you need to fumble with a rename. Otherwise, it just works. No need to mess around with Metafields. If you do, it means you’re going down the garden path… IMO