Step 1: Embed Script and CSS
Include the production stylesheet and JavaScript modules via the official CDN URLs:
Stylesheet URL:
https://rawcdn.githack.com/fgta5/fgta5js/demo-server/dist/fgta5js-v1.9.2.min.css
JavaScript Library URL:
https://rawcdn.githack.com/fgta5/fgta5js/demo-server/dist/fgta5js-v1.9.2.min.js
Step 2: HTML Structure
Define a basic container element in your HTML body where your application content lives.
<!DOCTYPE html>
<html>
<head>
<title>Application 1</title>
<link rel="stylesheet" href="https://rawcdn.githack.com/fgta5/fgta5js/demo-server/dist/fgta5js-v1.9.2.min.css">
</head>
<body style="background-color: #fff;">
<main id="myapp">
<h1>1st Application</h1>
Application Example
</main>
<!-- Load library bundle -->
<script type="module" src="https://rawcdn.githack.com/fgta5/fgta5js/demo-server/dist/fgta5js-v1.9.2.min.js"></script>
</body>
</html>
Step 3: Application Initialization
Initialize the dynamic sub-application context inside your module script.
<script>
window.addEventListener("load", async (event) => {
const app = new $fgta5.Application('myapp')
});
</script>
See Also
Ready to manage multiple modules using the Shell application container? Check out our guides: