WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›SSPA

Getting started

  • Introduction
  • Walkthrough

Pages

  • Pages Overview
  • Creating a Page
  • Layout and Styles

    • Page Layout
    • Templates
    • Themes
    • Accessibility

    Page Configure

    • Page Artefacts
    • Page Cache
    • Partial Page
    • Page Parameters
    • Examples

    Page Actions

    • Navigation
    • Events

    Custom Development

    • Theme Editor
    • Manual Theme
    • Create Template

SSPA

  • Micro Frontend App

Databases

  • Database Services Overview
  • Database Tools
  • Database Designing

    • Working with Databases
    • Data Modelling
    • DataBase Schema Modes
    • Working with DB Schema
    • Database Views
    • Temporal Support

    Accessing Database

    • Accessing Database

    Queries and Procedures

    • Working with Queries
    • Working with Stored Procedures
    • Version Queries & Procedures
    • Blob Queries and Procedures
    • Queries & Procedures - Java Services

    Database Variables & API

    • Database CRUD
    • CRUD Event Listeners
    • Database APIs
    • Database Service APIs

REST & SOAP

  • Web Services Overview
  • Restful

    • REST Services
    • Secure Server-side Properties
    • REST Request Timeouts
    • REST Services using OAuth 2.0

    SOAP

    • Working with SOAP Services
    • Imported SOAP APIs

    Websocket

    • Working with WebSockets

    APIs

    • API Designer
    • Mocking APIs
    • Mocking REST API
    • Swagger Import

    Variables

    • CRUD Variable
    • Service Variable
    • WebSocket Variable

Java Services

  • Java Service
  • Java Services

    • Java Integration Services
    • DB Service Integration
    • API Composition
    • Variables for Invocation
    • Generated REST APIs (API Designer)

    Java Services Variables & API

    • Variable for Java Service
    • Java Service APIs

    Source Files

    • Resources and Third-party Libraries
    • Using 3rd party JavaScript files
    • Using 3rd party jar files

Variables & Actions

    Variables

    • Variables Overview
    • Model Variable
    • Device Variables

    Binding

    • Variable Binding
    • Custom Formatter

    Actions

    • Actions
    • Navigation Action
    • Login Action
    • Logout Action
    • Timer Action
    • Notification Action

    Events

    • Events
    • JavaScript Access

Security

    App Security

    • Overview
    • Authentication
    • Authorization
    • Access Levels & Permissions
    • Login Configuration
    • Session Persistence
    • SSL Encryption
    • XSS antisamy policy configuration
    • OWASP
    • XSS Prevention
    • Central Authentication System
    • Token Based Authentication
    • SAML Integration
    • Secure Connection for Deployed Apps
    • Concurrent Sessions
    • HostHeader Injection

    Security Variable and API

    • Security Variables
    • Remember Me
    • Variable for Security Service
    • Security Service APIs

Developer options

  • Test and Run (Preview) Apps
  • Chrome Extension: Devtool
  • Debugging
  • Inspection Framework
  • Build Options
  • WaveMaker Mobile Apps Automation
  • Developer Integration

    • Project User Management
    • Developer Collaboration
    • Extending the Application using IDEs
    • Import, Export & Update Apps
    • Project Shells

    Add-ons

    • Localization
    • Artifacts Repository

Deployment

  • Overview
  • Deployment Profile
  • One-click Deployment
  • WaveMaker CI/CD Pipeline

    • Overview
    • Configuration Profiles
    • Configuration Management
    • Pipelines and Phases

    Pipeline Configuration

    • Default Pipelines in WMO
    • Configure Pipeline in WME

    Deploy to Cloud Providers

    • AWS
    • Azure
    • Google Cloud
    • DigitalOcean

    Pipeline Configuration cont.

    • Phase configurations
    • Webhooks Integration
    • Tests Integration

    Manage Deployed Apps

    • Manage Deployed Apps

    Integrate with your CI/CD Providers

    • Push Code to External repo
    • Custom VCS Integration
    • Export WaveMaker Application
    • Building Project with Maven
    • Build with Docker
    • Jenkins Integration
    • Deploy using Docker Compose
    • Deployment to Heroku

    WaveMaker apps Interation with CDN

    • App Integration with AWS CDN
    • App Integration with Azure CDN

    Deployment to external web servers

    • Application Server Overview
    • Deploy to Tomcat
    • WebSphere
    • JBoss - WildFly
    • WebLogic Server

Connectors

  • Introduction
  • Architecture
  • Import Connectors
  • List of Connectors
  • Build a New Connector

Teams

  • Overview
  • Team Setup
  • Dashboard
  • Manage Users
  • Manage Projects
  • Manage Prefabs
  • Project Branches
  • Manage Roles
  • Code Repository
  • Import VCS Project
  • Team Profile
  • Manage Subscription
  • FAQs
Edit

WaveMaker App as Micro Frontend Module


WaveMaker is a low-code platform enabling users to develop high-quality apps swiftly. Micro Frontends is a design practice that enables users to scale their development and produce composable independent modules that can serve in building a new app or progressively integrating features into an existing app.

To support our customers' phased modernization methods, we wanted to build support for this cutting-edge design pattern in the microservices world.

WaveMaker is the only low-code platform to support Micro Frontend modules extending low-code benefits to Micro Frontend development. It adopts the runtime integration approach for Micro Frontends and works with the Single-spa framework.

Single-spa is a JavaScript framework for frontend microservices, supporting multiple framework modules. Compatible artifacts must be generated and integrated for any app to work with Single-spa.

note

Read our developer's blog about how Micro Frontend modules work and how it fits in your low-code development approach.

WaveMaker Single SPA Framework

WaveMaker has developed a node-based CLI to generate Single-spa compatible artifacts for a WaveMaker app.

The CLI requires the exported project location and deployed URL as its input. The CLI and details are available in the link below.

note

@wavemaker/wm-sspa-cli

screenshot

Generate Single-spa Artifact

Follow the steps below to generate the Single-spa artifacts for a WaveMaker application.

  1. Ensure the node >=v12.22.x is installed on the machine.
  2. Login to WaveMaker and develop a project.
  3. Deploy the project, and note the deployed URL.
  4. Export the project from WaveMaker as a Zip, extract it into a folder, and note the location.

Invoke CLI

  1. Open the terminal and invoke CLI using the command below.
 npx @wavemaker/wm-sspa-cli
  1. npx downloads CLI and prompts for the location of the WaveMaker project, deployed URL, and SSPA deployed URL.

  2. Alternatively, you can provide the location of the project, deployed URL, and SSPA deployed URL as parameters.

 npx @wavemaker/wm-sspa-cli -p <project_path> -d <deployed_url> -s <sspa_deployed_url>
note
  • The usage of npx ensures execution of the latest version of CLI.
  • The CLI validates the input before triggering the process.
  1. Once the valid parameters are provided, the CLI generates Single-spa compatible artifacts and their location.

Additional Parameters

WaveMaker SSPA CLI provides additional optional parameters for more detailed artifact customization. The following shows how parameters can be passed to the CLI command besides the above-specified commands.

 npx @wavemaker/wm-sspa-cli -p <project_path> -d <deployed_url> -s <sspa_deployed_url> -l <library_target> -c <true/false> -m <true/false> -r <true/false>

Library Target

-l umd or -l system

Parameter helps build the library with a specified module format. By default, it considers the umd format when generating artifacts. WaveMaker SSPA CLI supports umd and system formats.

Split Styles

-c true or -c false

When you set this parameter to true, it will generate Base, Theme and App styles separately (styles, wm-theme-styles, wm-app-styles respectively). By default, it is set to false.

Mount Styles

-m true or -m false

If you want to handle the mounting or unmounting of styles on your own, then set this parameter to false. By default, it is set to true.

Resource Hashing

-r true or -r false

If this parameter is set to true, it will enable hashing for JS and CSS files in the generated artifacts. By default, it is set to false.

Generated Artifacts

The artifacts generated include:

  • main-es2015.js : the application code and need to be used for app registration.
  • scripts.js: the global scripts modules required for the WaveMaker app.
note

Single-spa needs the deployed location of all the artifacts, so ensure the files are hosted.

  1. Once the artifacts are generated, you can use the artifacts to register it as an application in the Single-spa shell.
  2. Validate the changes using the Single-spa shell project.

Configure Script

  1. Once the project is downloaded, open the index.html in the folder [folder-location]/root-html-file

  2. Include the script below in the head section of the index.html.

<!-- 
 Example: 
 [APP_DEPLOYED_URL]: http://localhost:8080/TestProject 
 [ARTIFACTS_DEPLOYED_URL]: http://localhost:8081/
-->
 <script src="[ARTIFACTS_DEPLOYED_URL]/scripts.js"></script>
  1. Update one of the app target URLs in import maps as highlighted below in index.html.
 <script type="systemjs-importmap">
  {
    "imports": 
      {
        "app1": "http://localhost:4201/main.js",
        "app2": "[ARTIFACTS_DEPLOYED_URL]/main-es2015.js",
        "navbar": "http://localhost:4300/main.js",
        "single-spa":"https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.5/system/single-spa.min.js"
      }
  }
 </script>
note

If resource hashing (-r) is enabled, replace the file names with generated hash code. It applies after the sspa build as shown in the example below:

Example in #2: <script src="[ARTIFACTS_DEPLOYED_URL]/scripts.[HASH].js"></script>

Example in #3: "app2": "[ARTIFACTS_DEPLOYED_URL]/main-es2015.[HASH].js"

  1. Add a .wm-app class to the parent element of the route in index.html.
 <template id="single-spa-layout">
  <single-spa-router>
 ---
  <div class="wm-app">
    <route path="app2" >
      <application name="app2"></application>
    </route>
  </div>

 ---
  </single-spa-router>
 </template>

Once the changes are done in index.html, follow the instructions in the README.md of the Single-spa shell project link to start.

Last updated on 9/12/2022 by PriyankaPathoori
← Create TemplateDatabase Services Overview →
  • WaveMaker Single SPA Framework
  • Generate Single-spa Artifact
  • Invoke CLI
    • Additional Parameters
  • Generated Artifacts
  • Configure Script
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.