search

single-spa / single-spa-examples

Examples of single-spa applications.
https://single-spa.surge.sh
MIT License
359 stars 128 forks source link

Are there any systemjs examples? #55

Closed kumaranbsundar closed 6 years ago

kumaranbsundar commented 6 years ago

All examples seem to be with webpack. How would we build the apps when they reside in different repos? Any help or suggestions is appreciated. Thx!

joeldenning commented 6 years ago

Apologies for the very very slow response here.

The majority of our initial examples (including single-spa-examples) used to be implemented with SystemJS, but we got rid of it because it became confusing for many people in the issue queues. If you went far enough back in the git history of single-spa-examples, you'd actually find SystemJS in there.

So currently I am not aware of any example repos that use systemjs. However, at Canopy we use SystemJS in production, have our single-spa applications in separate git repositories, and have the builds and deploys for single-spa applications completely independent of each other.

I actually start last week a blog post about this topic (see https://github.com/CanopyTax/single-spa/issues/221 and https://github.com/CanopyTax/single-spa/issues/169).

The basic approach:

  1. Load the SystemJS library as a global variable on the page
  2. Populate the SystemJS module registry with common dependencies, with SystemJS.registerDynamic('react', ....)
  3. Have separate git repos and package.jsons for each single-spa application
  4. Bundle with webpack each single-spa application down to an AMD format. Common dependencies should be "webpack externals" that get bundled down to amd dependencies.
  5. Register your single-spa applications, implementing the single-spa loading functions for your applications with SystemJS. For example, singleSpa.register('app1', () => SystemJS.import('/path-to-my-app.js', () => true)
  6. Deploy your applications by uploading the bundled file and making sure that SystemJS.import() finds the new file. We use the systemjs plugin sofe to help find the new url to the bundle file

Anyway, hope that helps! I'm going to close this for now but feel free to reopen with further discussion or questions.

Beej126 commented 5 years ago

wanted to submit a fresh working SystemJS based sample since this took me a bit to get my head around the specifics given SystemJS and everything else has evolved enough for errors to be confusing based on the slightly dated sample code in these threads... not a dig, just the reality of how everything is moving forward.

@joeldenning - thanks for all of your kind guidance in these threads! and thanks to CanopyTax for backing the single-spa rallying point... we have high hopes for this basic concept in a major Seattle county govt Azure based project... there'd be no way i would've got there without all your posts... these clear steps you listed here were my north star :)

i'm going to cross post this in a couple other issues to make sure people see it... just comment back if that's frowned upon and i'll delete.