Expand my Community achievements bar.

App Builder IFrame

Avatar

Level 1

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?

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

3 Replies

Avatar

Employee

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

Thanks
Manik

 

Avatar

Employee

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/

Avatar

Community Advisor

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

  1. Create a new app builder project from developer.adobe.com.
  2. Download its stage workspace json filesarav_prakash_0-1745103930626.png

     

  3. From terminal, create new local project by running command `aio app init`
  4. Select your new App Builder project and its stage workspace
  5. From template, choose a ui template. ui should suffice, action or event is not required for you
  6. Now, we can delete rest of boilerplate code. Just keep the index.html.
  7. 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 sarav_prakash_1-1745104304339.png

     

  8. 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.