/https://specials-images.forbesimg.com/imageserve/600b1f251167e320a5711c93/0x0.png)
Now we’re prepared to start out exporting the navigation app.
Subsequent, we register it within the residence app. To register the micro-frontends app, the next steps are required:
- Embody script tag
- Listing in remotes
- Add a registration
- Embody a container
div
Let’s undergo these steps.
Embody script tag
First, to devour the code from the navigation app, we now have to incorporate it within the HTML file.
Go to residence/public/index.html and embody the script tag.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://localhost:3001/remoteEntry.js"></script>
...
</head>
As said earlier than, The publicPath of the navigation app is http://localhost:3001 and the file identify is remoteEntry.js.
Listing in remotes
Subsequent, go to residence/webpack.config.js and specify the remotes part:
remotes: {
home-nav: 'navigation',
},
navigation is the identify of the configuration in navigation/webpack.config.js:
plugins: [
new ModuleFederationPlugin({
name: 'navigation',
library: { type: 'var', name: 'navigation' },
filename: 'remoteEntry.js',
remotes: {},
exposes: {
Header: './src/Header',
Footer: './src/Footer',
},
shared: ['react', 'react-dom', 'single-spa-react'],
}),
],
The home-nav is the identify used within the residence app.
You’ll be able to change the identify of the import by altering the important thing to no matter you need.
Add a registration
Subsequent, we register the navigation app in residence/src/index.ts:
The registerApplication takes three issues:
- An software identify
- A operate to load the appliance’s code
- A operate that determines when the appliance is energetic or inactive
The import operate specifies the identify of the remotes key as said above.
() => import('home-nav/Header'),
Embody a container div
Lastly, we write a div container that’s used to incorporate a Header and Footer element.
Go to residence/public/index.html and add them:
By default, with no possibility, single-spa will go discover single-spa-application:{app identify} and render the HTML under.
On this case, we’ve already registered the Header and Footer as header and footer so it can discover the id of single-spa-application:header and single-spa-application:footer.
Let’s do this out.
Earlier than that, make sure that to put in dependencies:
yarn
And begin the server on the root:
yarn begin
So, navigate to http://localhost:3000 and you can see that two React elements rendered efficiently.
