Unminified source code for the app-bridge.js CDN file

It’d be really great to get access to the unminified source code or a source map for the AppBridge CDN script at https://cdn.shopify.com/shopifycloud/app-bridge.js. Its code that runs within our apps and has a lot to do with key application functionality, and debugging it with only the minified source available is hard and annoying. If Shopify insists on delivering the App Bridge via CDN and not via NPM, it’d still be great to be able to understand, audit and debug like all the other code I use in my app!

Shopify’s platform is the web platform, but the web platform uses unminified source code in development, and minified source code in production! Please, my poor eyes!

1 Like

This is a tricky one - the prior art here is more akin to something like Google Analytics, which is not available as unminified source. The app-bridge.js script is also pretty small (20kb) and contains very little functionality of its own. Most of the guts live in Shopify’s Admin, which (I’d hope unsurprisingly :sweat_smile:) we wouldn’t want to provide an unminified version of.

The goal with app-bridge CDN was to make it as close to invisible as possible, which ideally means never having a need to debug or inspect it - just like you can’t debug or inspect the browser’s implementation of fetch.

Have there been any specific things you’ve run into that warranted debugging app bridge itself? It might be an indication that we need to make it more transparent or make error handling better or something along those lines.

Its definitely not invisible – all authentication flows through the tokens it brokers! The Google Analytics snippet doesn’t change how your app functions, but an embedded Shopify app can’t function without the app bridge script at all.

For me, I have wanted to peer inside how it works for two reasons:

  • I was sending in incorrectly formatted data that wasn’t passing the RPC validation, but I couldn’t tell if it was client side inside my iframe or outside the frame
  • I want to try to mock some of the app bridge so I can test my app’s LCP using Lighthouse outside of the Shopify Admin iframe, which is super hard when we have to couple to the app bridge to auth but then can’t use it elsewhere.

And, what exactly is the downside of publishing a source map, or open sourcing the repo? It would definitely help debuggers like me so there is upside for sure – just like any other piece of software, there’s issues and debuggers need to see what something is doing to rule it involved or not in a bug. Since its code that runs client side (and in my app) its not like its private. If you want to obfuscate it because it’s protected IP, minification isn’t really a secure way to do that in the first place.

Without being too glib, I thought I saw tobi like DHH’s tweet about this once: Paying tribute to the web with View Source - Signal v. Noise , please, my eyes!!!

There’s more requests for similar publishing of source code here: Make Shopify/app-bridge public · Issue #137 · Shopify/shopify-app-bridge · GitHub