single-spa-systemjs-cra2.1-ts-no-eject
single-spa sample using SystemJS for the remote subspa bundle.js imports
Highlights
- single-spa container starting point: main/src/index.tsx
- subspa1 is the remotely referenced child spa
- both projects created via
create-react-app --typescript
(CRA v2.1.3)
- uses rescripts to customize webpack config WITHOUT EJECT, see
subspa1/.rescriptsrc
output.libraryTarget = 'amd'
necessary on the subspa builds for main spa SystemJS import compatibility, CRA defaults to esnext
- webpackDevServer CORS - necessary to host the subspas on their individual ports
Call out
- instead of just
() => SystemJS(url)
... i realized i needed to traverse to the .default
property to expose the actual module, otherwise the dreaded LOADING_SOURCE_CODE: does not export an unmount function or array of functions
error... see main/src/helpers/microSpa.ts::remoteImport()
Considerations
- .rescriptsrc is also doing the webpack config mods to generate a single bundle.js file vs any code splitting... that probably means the client will be downloading more than necessary across all sub-spas...
- this was necessary so far because it gives us a known filename to reference vs the randomized chunk names...
- and by default webpack doesn't seem to respect the amd module type for building the "vendor" chunks
- for these initial projects the bundles are naturally super small anyway but this is an area to keep in mind for further optimzation if those start getting sizable during the course of real construction
running the sample
- just
yarn install
in both main & subspa1
- then
yarn start
subspa1 first and then main