Svelte Themes Logo Svelte Themes
Svelte Microfrontend Example screenshot

Svelte Microfrontend Example

Author Avatar Theme by Evanfuture
Updated: 4 Mar 2021
24 Stars

Based on a talk: https://slides.com/evanpayne/microfrontends-with-svelte

Github

Categories

Bootstrap Scss

Overview:

The Sample Svelte SPA/MicroFrontend is a Svelte project that compiles into a single JS file. This file can be published and integrated into other app-shells in a micro-frontend manner. The project provides a way to create and deploy microfrontend components that can be used in various applications.

Features:

  • Microfrontend Architecture: The project follows a microfrontend approach, allowing the compiled JS file to be integrated into other app-shells.
  • Single JS File: The project compiles all the necessary code into a single JS file, making it easy to deploy and use.
  • Customizable: The microfrontend component supports various customization options such as theme (light or dark), issue ID, base API URL, and preview mode.

Installation:

To use the Sample Svelte SPA/MicroFrontend, follow these steps:

  1. Build the project using the command: npm run build
  2. The project will be bundled by Rollup into the ./public/build/itemdetail.js file.
  3. Deploy the itemdetail.js file to a publicly accessible URL.
  4. On the page where you want to use the microfrontend, include the following script tag, replacing the src attribute with the URL of the itemdetail.js file:
    <script type="module" src="https://.../itemdetail.js"></script>
  5. After including the script tag, you can add the HTML for the microfrontend component either immediately after or dynamically using the following code:
    <itemdetail-spa issueid="1234" theme="dark" baseapiurl="https://evanpayne.com" preview="true" />

Note: The baseapiurl and theme attributes are optional. The issueid (required if preview is set to true) and preview attributes are required. The order of the attributes should be maintained as mentioned above.

Summary:

The Sample Svelte SPA/MicroFrontend is a project that allows you to create a standalone microfrontend component using Svelte. It compiles the component into a single JS file, which can be integrated into other app-shells following the microfrontend architecture. The component supports customization options such as theme, issue ID, base API URL, and preview mode. The installation process involves building the project, deploying the generated JS file, and including it in the desired application using a script tag.