single spa root config -index ejs
------------------------------------
dynamic load balancer and load the latest build to ui app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Single SPA root config</title>
<script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13.7/runtime.min.js"></script>
<link
rel="preload"
href="https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js"
as="script"
/>
<!--
This CSP allows any SSL-enabled host and for arbitrary eval(), but you should limit these directives further to increase your app's security.
Learn more about CSP policies at https://content-security-policy.com/#directive
-->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' https: localhost:*; script-src 'unsafe-inline' 'unsafe-eval' https: localhost:*; connect-src https: localhost:* ws://localhost:*; style-src 'unsafe-inline' https:; object-src 'none';"> -->
<meta name="importmap-type" content="systemjs-importmap" />
<!-- Add your organization's prod import map URL to this script's src -->
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/import-map-overrides@2.2.0/dist/import-map-overrides.js"></script>
<% if (isLocal) { %>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/extras/amd.js"></script>
<% } else { %>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/extras/amd.min.js"></script>
<% } %>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="nav-container"></div>
<main>
<div id="mfe1-container"></div>
<div id="mfe2-container"></div>
</main>
<div id="root"></div>
<script async>
async function isFirstPoolUp(url) {
try {
const response = await fetch(url, { method: 'HEAD' });
console.log('The URL is valid and accessible.');
return true;
} catch (error) {
console.error('Error fetching the URL:', error);
return false;
}
}
let poolOne = '';
(async () => {
let url = '';
let env = 'dev';
if(window.location.hostname.includes('prod')) {
url = "https://mfe1-godaddy-prod.com/main.js";
env = 'prod';
} else if(window.location.hostname.includes('test')) {
url = "https://mfe1-godaddy-test.com/main.js";
env = 'test';
} else {
url = "https://mfe1-godaddy-dev.com/main.js";
}
poolOne = await isFirstPoolUp(url);
console.log(poolOne);
// Create a dynamic import map based on window.location
const importMap = {
imports: {
"single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
"@mfeappsinglespa/root-config": "/main.js",
"react": "https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js",
"@mfeappsinglespa/mfe1": env == 'prod' ? "https://mfe1-godaddy-prod.com/main.js?"+Date.now() : env == 'test' ? "https://mfe1-godaddy-test.com/main.js?"+Date.now() : "https://mfe1-godaddy-dev.com/main.js/main.js?"+Date.now(),
"@mfeappsinglespa/mfe2": env == 'prod' ? "https://mfe2-godaddy-prod.com/main.js?"+Date.now() : env == 'test' ? "https://mfe1-godaddy-test.com/main.js?"+Date.now() : "https://mfe1-godaddy-dev.com/main.js/main.js?"+Date.now(),
}
};
const importMap2 = {
imports: {
"single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
"@mfeappsinglespa/root-config": "/main.js",
"react": "https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js",
"@mfeappsinglespa/mfe1": env == 'prod' ? "https://mfe1-godaddy-prod2.com/main.js?"+Date.now() : env == 'test' ? "https://mfe1-godaddy-test2.com/main.js?"+Date.now() : "https://mfe1-godaddy-dev2.com/main.js/main.js?"+Date.now(),
"@mfeappsinglespa/mfe2": env == 'prod' ? "https://mfe2-godaddy-prod2.com/main.js?"+Date.now() : env == 'test' ? "https://mfe1-godaddy-test2.com/main.js?"+Date.now() : "https://mfe1-godaddy-dev2.com/main.js/main.js?"+Date.now(),
}
};
// Inject the import map into the document
const script = document.createElement('script');
script.type = 'systemjs-importmap';
script.textContent = JSON.stringify(poolOne ? importMap : importMap2);
document.head.appendChild(script);
// Import the main module
System.import('@mfeappsinglespa/root-config').catch(console.error);
})();
</script>
<import-map-overrides-full
show-when-local-storage="devtools"
dev-libs
></import-map-overrides-full>
</body>
</html>
