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.
@joeldenning - if we have multiple configurations in config-overrides.js, then facing few errors when executing commands like build / run.
const customWebpackConfig = (config, env) => { const singleSpaConfig = Object.assign({}, config, { name: "singlespa", entry: "./src/singleSpaMain.tsx", output: { ...config.output, path: path.resolve(process.cwd(), "build/singlespa"), filename: "bundle.js", libraryTarget: "system", }, }); delete singleSpaConfig.optimization; return [singleSpaConfig, config]; };
Above is my custom config overrides, to have application build to output two different versions. One is normal app and other one in the micro-app with single-spa lifecycle methods.
When i ran npm run build, getting below error
"File sizes after gzip:
ENOENT: no such file or directory, open 'PROJECT DIR/build/bundle.js'
"
It seems, appBuild path reference not updated for updated new entry with output of different folder. Have you faced this issue. Any alternate ways to achieve multiple configuration outputs without any error.