App Builder

hansle2 · 1/28/25

Is there any option for app builder to embed an iframe of an external application authenticated to the store similar to how Shopify & BigCommerce apps are developed, or is there a hard requirement to use Adobe I/O serverless functions for any backend logic, and CDN hosted JS for the frontend?

themanikjindal · 1/30/25

Hi @hansle2, I have forwarded your question to the right team, let's wait for their response.

Thanks
Manik

naomirobichaud · 1/30/25

Embedding an SPA into Commerce via App Builder requires the use of our UI SDK: https://developer.adobe.com/commerce/extensibility/admin-ui-sdk/

Those apps need to be developed using our App Builder stack - https://developer.adobe.com/app-builder/docs/guides/

sarav_prakash · 4/19/25

Hi @hansle2 , there is no hard requirement to use AIO only for backend logic. Appbuilder is only infrastructure, providing serverless ability to deploy our own apps. In your case, you are wanting to build a single page, loading an iframe. Steps are very easy

Create a new app builder project from developer.adobe.com.
Download its stage workspace json file
From terminal, create new local project by running command `aio app init`
Select your new App Builder project and its stage workspace
From template, choose a ui template. ui should suffice, action or event is not required for you
Now, we can delete rest of boilerplate code. Just keep the index.html.

In the index.html add an example iframe.

<!DOCTYPE html>
<html lang="en">
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <iframe style="border-radius:12px" 
      src="https://open.spotify.com/embed/episode/54J1NGQhNPWyWK3mQSDEaD?utm_source=generator" 
      width="100%" height="352" frameBorder="0" allowfullscreen="" 
      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" l
      oading="lazy"></iframe>
  </body>
</html>

Delete generated react code and js. Like this

Last step, after `npm i`, just run `aio app run`. The app will start from https://localhost:9080 and iframe will load. You can `aio app deploy` and run from the AppBuilder runtime

Now here, we are running a simple html from Appbuilder serverless. No integration or BE done. AppBuilder everytime, just serves the index.html. Try to build similar, playaround and add more flavors per your requirement.

App Builder

App Builder IFrame

Learn

Documentation

Events

Community

Support

Resources

Adobe account

Adobe