Skip to content

Instantly share code, notes, and snippets.

@velotiotech
Created June 26, 2020 11:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save velotiotech/b66afc5af16f90fdedb554645dbbd6b9 to your computer and use it in GitHub Desktop.
Save velotiotech/b66afc5af16f90fdedb554645dbbd6b9 to your computer and use it in GitHub Desktop.
The Container in the Component based MicroFrontend approach
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>PetStore - because Pets love pampering</title>
<meta charset="UTF-8
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<!-- Header section -->
<header class="header-section">
....
</header>
<!-- Header section end -->
<main id='microfrontend'>
<!-- This is where the Micro-frontend gets rendered by utility renderMicroFrontend.js-->
</main>
<!-- Header section -->
<footer class="header-section">
....
</footer>
<!-- Footer section end -->
<script src="frontends/MicroFrontend.js"></script>
<script src="frontends/Home.js"></script>
<script src="frontends/Cart.js"></script>
<script src="frontends/Checkout.js"></script>
<script src="frontends/Product.js"></script>
<script src="frontends/Contact.js"></script>
<script src="routes.js"></script>
<script src="renderMicroFrontend.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment