Corgi-insure-embed NPM

Corgi Insure Embed Architecture

The architecture for the Corgi Insure application is designed to integrate an Angular application into a client's webpage via an iframe. This is achieved by using a custom web component that encapsulates the iframe logic.

Structure

`corgi-insure-embed`

This directory contains the Angular application that will be embedded into the client's webpage. This application should be built and hosted on a server or a CDN. Once hosted, it will have a URL which will be used as the src attribute for the iframe.

`corgi-insure-client`

This directory simulates the environment of a client who wants to embed the Corgi Insure Angular app.

`embed-widget.js`

It is a JavaScript file that defines a web component.
The web component contains an iframe.
The src of this iframe points to the hosted Angular app contained in the corgi-insure-embed directory.

`index.html`

Represents a client application that will consume the embeddable widget.
It should include a script tag pointing to the embed-widget.js.
The script should be hosted on a CDN, and its URL is placed in the src attribute of the script tag.

Client Integration

To embed the Corgi Insure application, the client will need to include the following in their HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Corgi Embed Client</title>
</head>
<body style="height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; margin: 0;">
    <corgi-insure style="width: 100%; height: 100%; overflow: hidden;"></corgi-insure>
    <script src="https://cdn.example.com/embed-widget.js"></script>
</body>
</html>

Testing Steps for Corgi Insure Embed

This guide outlines the process for testing the embeddable Angular application within a client's webpage using an iframe encapsulated in a web component.

Step 1: Build and Serve the Angular Application

Build the Angular App

Navigate to the corgi-insure-embed directory and build the Angular application:

ng build

This will compile the application and output the files to the dist/ directory.

Serve the Built Application Serve the production build using a static server. If using http-server, run the following command:

http-server dist/[project-name] -p 3000

Make sure to replace project-name with the actual project directory name inside dist/. The application will be available at http://localhost:3000.

Step 2: Update the Iframe Source in the Web Component

Modify the embed-widget.js file within the corgi-insure-client directory to include the Angular application URL in the iframe src attribute. The web component class should look like this:

class CorgiInsure extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.iframe = document.createElement('iframe');
        this.iframe.src = 'http://localhost:3000'; // Your Angular app URL here
        this.iframe.width = '100%';
        this.iframe.height = '100%';
        this.iframe.style.border = 'none';
        this.shadowRoot.appendChild(this.iframe);
    }
}
customElements.define('corgi-insure', CorgiInsure);

Step 3: Serve the Client Files

Now, serve the corgi-insure-client directory. This will host the index.html file that loads the web component.

http-server [path-to-corgi-insure-client] -p 8080

Step 4: Access the Client Page

Open a web browser and navigate to the client's HTML file served by the static server, typically http://localhost:8080/index.html You should see the Angular application displayed within the iframe on the webpage.

Following these steps will allow you to see the Angular app embedded inside the corgi-insure web component.

@angular/animations @angular/cdk @angular/common @angular/compiler @angular/core @angular/elements @angular/forms @angular/material @angular/platform-browser @angular/platform-browser-dynamic @angular/router concat rxjs tslib zone.js

0.0.1

2 years ago

0.0.2

2 years ago

0.0.0

2 years ago