= Where to start: Shared Header or Footer In this guide, you will learn how to create a shared header and footer component using Module Federation, and how to use them in two different applications. You will also learn how to handle routing, authentication, and styling in the shared components. == Step 1: Create the header and footer components The first step is to create a separate project that will contain the header and footer components. This project will act as a host for the shared components, and will expose them using Module Federation. - Create a new folder called `shared-components` and navigate to it. - Run `npm init -y` to initialize a new Node.js project. - Run `npm install webpack webpack-cli webpack-dev-server html-webpack-plugin @webpack-cli/serve` to install the necessary dependencies. - Create a new file called `webpack.config.js` in the root folder and add the following code: + [source, javascript] ---- const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: "development", devServer: { port: 3000, }, plugins: [ new HtmlWebpackPlugin({ template: "./public/index.html", }), ], }; ---- + This is a basic Webpack configuration that will serve an HTML file using the webpack-dev-server. + - Create a new folder called public and add a new file called index.html with the following content: + [source, html] ---- Shared Components ---- + This is the HTML file that will be served by the `webpack-dev-server`. It has two empty divs with ids header and footer, where we will render our shared components. + - Run `npm install react react-dom` to install React as a dependency. - Create a new folder called `src` and add two files: `Header.js` and `Footer.js`. These files will contain the React components for the header and footer. + In `Header.js`, add the following code: + [source, javascript] ---- import React from "react"; function Header() { return (

Shared Header

); } export default Header; ---- + This is a simple header component that has a title and a navigation menu. + In Footer.js, add the following code: + [,js ] ---- import React from "react"; function Footer() { return (

© 2023 Shared Components. All rights reserved.

); } export default Footer; ---- + This is a simple footer component that has a copyright notice. + - Create a new file called `index.js` in the `src` folder and add the following code: + [source, javascript] ---- import React from "react"; import ReactDOM from "react-dom"; import Header from "./Header"; import Footer from "./Footer"; ReactDOM.render(
, document.getElementById("header")); ReactDOM.render(