Skip to main content

How to embed a Genesis app in another app

You can embed an entire Genesis application (or specific web components from a Genesis application) within another application.

There are a number of ways to achieve this:

Each of these methods is discussed in detail below.

info

The method you choose depends on your specific requirements, such as the need for isolation, ease of integration, or modularity.

In this page, we assess the advantages and challenges of each method, to help you decide which you prefer.

Embedding web applications using iframe​

Concept: An iframe enables you to embed your Genesis web application within a separate host application, creating a separate browsing context.

Advantages:

  • Isolates the embedded application’s context, preventing conflicts with the host.
  • Simple and quick to implement.

Challenges:

  • Limited interaction between the host and embedded app.
  • Performance and security issues, such as X-Frame-Options and cross-origin resource sharing (CORS) policies.

Including web applications as a script tag and web component​

Concept:

A web application or single component can be included as a script tag in the host application, and then registered as a Web Component (Custom Element) to be used within the host’s DOM.

Implementation:

  • Script Tag: Add a <script> tag in the host’s HTML pointing to the external web app's JavaScript file.
  • Web Component: The external application can be registered as a Web Component, allowing it to be used as a custom HTML element, e.g., <external-app></external-app>.

Advantages:

  • Seamless integration with the host’s DOM.
  • Allows for easy reuse of the component across different projects.
  • Interaction between the host and embedded app.

Using Webpack 5 Module Federation​

Concept:

Genesis applications are compatible with Webpack 5, which introduced Module Federation. This enables multiple independent applications to share code and dependencies at runtime, creating a micro-front-end architecture.

Implementation:

  • Configure ModuleFederationPlugin in both the host and remote applications.
  • The remote application exposes specific modules (e.g., components, utilities), which can be dynamically loaded into the host application.

Advantages:

  • Enables true micro-front-end architecture, allowing independent deployment and updates.
  • Reduces redundancy by sharing common dependencies between applications.

Embedding in a React application​

Script Tag + Web Component:

info

We have provided an example React application that uses Genesis Components.

From this point, you can drill down through client/src to look at different parts of the front-end code.

Webpack Module Federation:

  • You can configure Webpack Module Federation in the React application, so that parts of another React or non-React app can be loaded dynamically.

iFrame:

  • Similar to the general approach, you can embed an iframe within a React component.

Embedding in an Angular application​

Genesis provides tools that enable you to bootstrap an Angular application that uses Genesis components.

info

We have provided an example Angular application that uses Genesis Components.

From this point, you can drill down through client/src to look at different parts of the front-end code.

iFrame:

  • You can embed external applications via iframe within Angular templates.

Script Tag + Web Component:

  • Include external scripts in the index.html or as part of an Angular component.
  • Use Angular’s support for Web Components (e.g., using customElements.define()).

Webpack Module Federation:

  • Use Angular CLI’s support for Webpack 5 to configure Module Federation, allowing Angular apps to consume or expose modules dynamically.

Technical details​

See our reference data on Integrations for a full explanation of the possibilities for working with both Angular and React applications.