Skip to content

Instantly share code, notes, and snippets.

@juliogc

juliogc/1. single-spa-systemjs.md

Last active February 7, 2025 21:44
Show Gist options
  • Save juliogc/9e8da2d51025821d685c483b69940d6a to your computer and use it in GitHub Desktop.
Save juliogc/9e8da2d51025821d685c483b69940d6a to your computer and use it in GitHub Desktop.
Download ZIP
SingleSPA + SystemJS
Raw
1. single-spa-systemjs.md

SingleSPA + SystemJS

Updating the index.ejs

  1. Change import-map-override meta tag to make it work with SystemJS (more info at import-map-overrides/docs/configuration.md)
  2. Update single-spa import to load a SystemJS script
    "single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/es2015/system/single-spa.min.js",
  1. Change all scripts tags type to use SystemJS type <script type="systemjs-importmap">
  2. Remove the import-map-injector script tags
  3. Load the SystemJS script
    • <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/system.min.js"></script>
  4. [Optional] Add the SystemJS extras
    • <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extras/amd.min.js"></script>
  5. Use the import API via SystemJS standard with:
<script>
  System.import('@org/root-config');
</script>

For a full example, take a look at index.sample.ejs

Updating webpack.config.js

According new changes, you have to configure SingleSPA Webpack Defaults to output your code in SystemJS format

  const defaultConfig = singleSpaDefaults({
    orgName,
    projectName: "root-config",
    webpackConfigEnv,
    argv,
    disableHtmlGeneration: true,
    outputSystemJS: true,
  });

Updating your root-config.ts

Ensure that root config will load apps using SystemJS import API

  loadApp({ name }) {
    return System.import(name);
  },
Raw
2. index.sample.ejs
<!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>org</title>
<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" use-injector />
<!-- If you wish to turn off import-map-overrides for specific environments (prod), uncomment the line below -->
<!-- More info at https://github.com/single-spa/import-map-overrides/blob/main/docs/configuration.md#domain-list -->
<!-- <meta name="import-map-overrides-domains" content="denylist:prod.example.com" /> -->
<!-- Shared dependencies go into this import map -->
<script type="systemjs-importmap">
{
"imports": {
"single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/es2015/system/single-spa.min.js",
"react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"
}
}
</script>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/es2015/system/single-spa.min.js" as="fetch">
<!-- Add your organization's prod import map URL to this script's src -->
<!-- <script type="systemjs-importmap" src="/importmap.json"></script> -->
<% if (isLocal) { %>
<script type="systemjs-importmap">
{
"imports": {
"@org/root-config": "//localhost:9000/org-root-config.js"
}
}
</script>
<% } %>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/system.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extras/amd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/import-map-overrides.js"></script>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<script>
System.import('@org/root-config');
</script>
<import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment