Back to Overview
Getting Started

Application Implementation

Guide to implementing dynamic sub-applications (Modules) to run under the Application Manager.

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>
Download apps1.html Example Live Preview

See Also

Ready to manage multiple modules using the Shell application container? Check out our guides: