Since single-spa is a framework that helps with organizational scaling, it is important to figure out how to split out and separate applications from each other so that developers and teams can work on the applications without stepping on each others' toes.
Most interpretations of microservice architecture encourage separate code repositories, builds, and deployments. Although single-spa does not solve how code is hosted, built, or deployed, these are relevant to many users of single-spa, so some strategies for doing so are discussed here.
Option 1: One code repo, one build
The simplest approach for using single-spa is to have one code repository with everything in it.
Typically, you would have a single package.json with a single webpack config that produces a bundle
that can be included in an html file with a
- Simplest to set up
- monolithic version control has some advantages
- One master webpack config and package.json means less flexibility / freedom for individual projects
- Slow build times once your project gets large
- Builds and deployments are all tied together, which can necessitate fixed release schedules instead of ad hoc releases.
Option 2: NPM packages
Create a root application that npm installs each of the single-spa applications. Each child application is in a separate code repository and is responsible for publishing a new version everytime that it updates. The root application should reinstall, rebuild, and redeploy whenever a single-spa application changes.
Typically, the single-spa applications compile themselves separately with babel and/or webpack.
Note that you can also use the monorepo methodology which allows for separate builds without having separate code repositories.
- npm install is familiar and easy to set up
- Separate npm packages means each application can build itself separately before publishing to npm
- The root application must reinstall the child applications in order to rebuild/redeploy
- Medium difficulty to set up
Option 3: Dynamic Module Loading
- Web server: have your webserver create a dynamic script tag for the "live" version of each single-spa application.
|Separate code repositories||Separate builds||Separate deployments||Difficulty to set up||Example repo|
|One code repo||Easy||simple-webpack-example and single-spa-examples|
|NPM modules||[x]||[x]||Medium||(No example repo, yet -- contributions accepted!)|
|Module loading||[x]||[x]||[x]||Hard||Parcels and SystemJS example & single-spa-portal-example|