juliogc/1. single-spa-systemjs.md

## 1. single-spa-systemjs.md

      
    Raw
  

              1. single-spa-systemjs.md
            
          
    SingleSPA + SystemJS

Updating the index.ejs


Change import-map-override meta tag to make it work with SystemJS (more info at import-map-overrides/docs/configuration.md)
Update single-spa import to load a SystemJS script

    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@6.0.3/lib/es2015/system/single-spa.min.js",


Change all scripts tags type to use SystemJS type <script type="systemjs-importmap">
Remove the import-map-injector script tags
Load the SystemJS script

<script src="https://cdn.jsdelivr.net/npm/systemjs@6.15.1/dist/system.min.js"></script>


[Optional] Add the SystemJS extras

<script src="https://cdn.jsdelivr.net/npm/systemjs@6.15.1/dist/extras/amd.min.js"></script>


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);
  },

  
## 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/single-spa@6.0.3/lib/es2015/system/single-spa.min.js",
        "react": "https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js",
        "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/umd/react-dom.production.min.js"
      }
    }
  </script>
  <link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@6.0.3/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/systemjs@6.15.1/dist/system.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.15.1/dist/extras/amd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/import-map-overrides@4.1.0/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>
	<!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/single-spa@6.0.3/lib/es2015/system/single-spa.min.js",
	"react": "https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js",
	"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@18.3.1/umd/react-dom.production.min.js"
	}
	}
	</script>
	<link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@6.0.3/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/systemjs@6.15.1/dist/system.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/systemjs@6.15.1/dist/extras/amd.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/import-map-overrides@4.1.0/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>
No results found