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.
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.
Generate Single-spa Artifact
Follow the steps below to generate the Single-spa artifacts for a WaveMaker application.
- Ensure the node >=v12.22.x is installed on the machine.
- Login to WaveMaker and develop a project.
- Deploy the project, and note the deployed URL.
- Export the project from WaveMaker as a Zip, extract it into a folder, and note the location.
- Open the terminal and invoke CLI using the command below.
npx downloads CLI and prompts for the location of the WaveMaker project, deployed URL, and SSPA deployed URL.
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>
- The usage of npx ensures execution of the latest version of CLI.
- The CLI validates the input before triggering the process.
- Once the valid parameters are provided, the CLI generates Single-spa compatible artifacts and their location.
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>
-l umd or
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.
-c true or
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
-m true or
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
-r true or
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
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.
Single-spa needs the deployed location of all the artifacts, so ensure the files are hosted.
- Once the artifacts are generated, you can use the artifacts to register it as an application in the Single-spa shell.
- Validate the changes using the Single-spa shell project.
Once the project is downloaded, open the
index.htmlin the folder [folder-location]/root-html-file
Include the script below in the head section of the
- Update one of the app target URLs in import maps as highlighted below in
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:
Example in #3:
- Add a
.wm-appclass to the parent element of the route in
<route path="app2" >
Once the changes are done in
index.html, follow the instructions in the
README.md of the Single-spa shell project link to start.