This Gist works for CRA 3. For CRA 4, you can try community maintained craco plugin for converting to a single-spa application at https://github.com/hasanayan/craco-plugin-single-spa-application (thanks @hasanayan):
- Install react-app-rewired, as explained in https://github.com/timarney/react-app-rewired.
- Create a file in src called
single-spa-entry.js
(or tsx for typescript) - Modify config-overrides.js, as shown in the config-overrides.js file provided in this gist.
- (Optional) remove src/main.js, since single-spa-entry is the new entry
- (Optional) remove public/index.html, since single-spa applications share a single html file, instead of one html file per project.
If an organization were to use multiple applications based on CRA, it may also be desirable to change the the dev-server port and sockPort on each application config so that there are no collisions. This was pointed out by Frikk Fossan on the Slack channel.