How to Build a Micro-Application using Single-Spa
•
0 likes•259 views
Micro-frontends gives you the ability to break your frontend into smaller pieces that make sense. This will allow you to test, build, develop, and deploy those pieces faster, since they’re independent. This article shows you how to build your own micro-frontend app from scratch using the single-spa angular framework.
Report
Share
![How to Build a Micro-Application using Single-Spa
© RapidValue Solutions 2
How to Create a Micro-Application using Single-Spa
Following are the steps to create a micro-application:
● Create an angular application with a unique prefix.
ng new --prefix app1
● Enter the command ng add single-spa-angular in our project which in turn will do the
following:
- Install single-spa-angular
- Generates a main.single-spa.ts in our project src/.
- Generates single-spa-props.ts in src/single-spa/
- Generates asset-url.ts in src/single-spa/
- Generates an EmptyRouteComponent in src/app/empty-route/, to be used in app-
routing.module.ts.
- Add an npm script npm run build:single-spa.
- Add an npm script npm run serve:single-spa.
● Install custom-webpack as dev dependency(npm install -D @angular-builders/custom-
webpack@9.1.0)
● Add providers: [{provide: APP_BASE_HREF, useValue: '/'}] to app-routing.module.ts
● Add {path: '**', component: EmptyRouteComponent} to our app-routing.module.ts routes.
● Add a declaration for EmptyRouteComponent in app.module.ts
● Register the micro-app in the index.html file and call single-spa.start() function.
For example,](https://cdn.statically.io/img/www.slideshare.net/data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
How to Build a Micro-Application using Single-Spa
- 1. How to Build a Micro-Application using Single-Spa By, Shwetha Thomas, Senior Software Engineer
- 2. How to Build a Micro-Application using Single-Spa © RapidValue Solutions 2 How to Create a Micro-Application using Single-Spa Following are the steps to create a micro-application: ● Create an angular application with a unique prefix. ng new --prefix app1 ● Enter the command ng add single-spa-angular in our project which in turn will do the following: - Install single-spa-angular - Generates a main.single-spa.ts in our project src/. - Generates single-spa-props.ts in src/single-spa/ - Generates asset-url.ts in src/single-spa/ - Generates an EmptyRouteComponent in src/app/empty-route/, to be used in app- routing.module.ts. - Add an npm script npm run build:single-spa. - Add an npm script npm run serve:single-spa. ● Install custom-webpack as dev dependency(npm install -D @angular-builders/custom- webpack@9.1.0) ● Add providers: [{provide: APP_BASE_HREF, useValue: '/'}] to app-routing.module.ts ● Add {path: '**', component: EmptyRouteComponent} to our app-routing.module.ts routes. ● Add a declaration for EmptyRouteComponent in app.module.ts ● Register the micro-app in the index.html file and call single-spa.start() function. For example,
- 3. How to Build a Micro-Application using Single-Spa © RapidValue Solutions 3 Figure 1: Import single-spa Here, we are using import maps to set the path for our micro-app. student is the micro app here which we are registering. Since we are running locally, the localhosturl is given. Once we deploy the micro app, we can replace local url by giving the deployed url. main.js is a javascript file with the webpack which is created while running the app. While building the app, main-es2015.js file is created in the dist folder with the webpack. Figure 2: Register application This script tag is given inside the body. Here we are registering the micro-app and then calling the singleSpa.start(). In this example, the function returns true, which means the app will be loaded by default. We can also specify a route, so the micro-app will be mounted only on calling the specific route. If the function returns, location.pathname.startsWith(‘/student’); student micro-app will be loaded only on calling /student. There are some script tags, which is needed on loading micro-apps which are given below: <script src='https://unpkg.com/core-js-bundle@3.1.4/minified.js'></script>
- 4. How to Build a Micro-Application using Single-Spa © RapidValue Solutions 4 <script src="https://unpkg.com/zone.js"></script> <script src="https://unpkg.com/import-map-overrides@1.6.0/dist/import-map-overrides.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/system.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/amd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named-exports.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/4.0.0/extras/named- register.min.js"></script> Make sure each micro-app runs in a different port locally. Serving a Micro-Application To serve a micro-application, run the following command: npm run serve:single-spa For angular version greater than 9, app name will be appended to this command. Check the package.json to know the exact command. For example, npm run serve:single-spa:app Building a Micro-Application .To build a micro-application, run the following command: npm run build:single-spa For angular version greater than 9, app name will be appended to this command. Check the package.json to know the exact command.
- 5. How to Build a Micro-Application using Single-Spa © RapidValue Solutions 5 For example, npm run build:single-spa:app This will create a dist folder. How to Register the Micro-Apps into the Portal We can load any number of micro-apps in a single application which is the portal. To create a portal application, we need an HTML file where we can register our micro-apps and call singleSpa.start(). To register a micro-app into the portal, ● We must specify the main.js path of the micro-app in the portal ● Add the required scripts ● Register the micro-application ● Call singleSpa.start() Take a look at the images given below for a better understanding. Figure 1: Specify main.js path
- 6. How to Build a Micro-Application using Single-Spa © RapidValue Solutions 6 Figure 2: Register micro-app and call start method This part is the same as registering a micro-app to itself. Following the above-mentioned steps ensures that the process of building and registering micro-applications in the portal is as seamless as possible.
- 7. How to Build a Micro-Application using Single-Spa © RapidValue Solutions 7 About RapidValue RapidValue is a global leader in providing digital product engineering solutions including Mobility, Cloud, Omni-channel, IoT and RPA to enterprises worldwide. RapidValue offers its digital services to the world’s top brands, Fortune 1000 companies, and innovative emerging start-ups. With offices in the United States, the United Kingdom, Germany, and India and operations spread across the Middle-East, Europe, and Canada, RapidValue delivers enterprise service and solutions across various industry verticals. Disclaimer: This document contains information that is confidential and proprietary to RapidValue Solutions Inc. No part of it may be used, circulated, quoted, or reproduced for distribution outside RapidValue. If you are not the intended recipient of this report, you are hereby notified that the use, circulation, quoting, or reproducing of this report is strictly prohibited and may be unlawful. © RapidValue Solutions www.rapidvaluesolutions.com/blog www.rapidvaluesolutions.com +1 877.643.1850 contactus@rapidvaluesolutions.com