create-react-app + react-app-rewired + single-spa

config-overrides.js

module.exports = {
  webpack(config, env) {
    config.entry = './src/single-spa-entry.js';
    config.output = {
      ...config.output,
      filename: 'project-name.js',
      libraryTarget: 'system',
    }
    config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'HtmlWebpackPlugin' && plugin.constructor.name !== 'MiniCssExtractPlugin')
    delete config.optimization
    return config;
  },
  devServer(configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.disableHostCheck = true
      config.headers = config.headers || {}
      config.headers['Access-Control-Allow-Origin'] = '*'
      return config
    }
  }
}

Instructions.md

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):

1. Install react-app-rewired, as explained in https://github.com/timarney/react-app-rewired.
2. Create a file in src called single-spa-entry.js (or tsx for typescript)
3. Modify config-overrides.js, as shown in the config-overrides.js file provided in this gist.
4. (Optional) remove src/main.js, since single-spa-entry is the new entry
5. (Optional) remove public/index.html, since single-spa applications share a single html file, instead of one html file per project.

@joeldenning I noticed that you did not override/ delete MiniCssExtractPlugin in this config. Since MiniCssExtractPlugin is already used in CRA project default config, if we don't do any thing about it, it gives us build code in separate folder js, css, media respectively. However, we'd like to align this config with single-spa webpack config as much as we can. I am wonder if we can do anything here. Thanks !

Thanks @frankielin2015 - I have updated the gist with that

@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.

I tried above as per your directions:

1. I cant remove index.html, it says its required.
2. I also cant remove index.js:
   "Could not find a required file.
   Name: index.js"

Do you have repo where i can see these changes?

Me too, how you resolve it?

Thanks @frankielin2015 - I have updated the gist with that

i got this error when i build with plugin.constructor.name !== 'MiniCssExtractPlugin' and if i remove it the build is success

It's possible things are broken due to upgrades in create-react-app. I might be able to try things out with the newest version of create-react-app in the next few days and report back with what I find.

How to fix the error that System is not defined?

How to fix the error that System is not defined?

Are you intending to use SystemJS? If so, here are the webpack modifications required for SystemJS: https://github.com/systemjs/systemjs#compatibility-with-webpack. If not, change the webpack output.libraryTarget to not be System.

Hi,

first of all, thanks for this gist, it has been really helpful.

I'm trying to create a test app, to load one CRA micro-frontend with Single-Spa. I managed to load the application, but I cannot see the svg image when I load the application. Am I missing anything? this is my full example https://github.com/albertocorrales/single-spa-cra-example

For CRA 4 users, here's a community maintained craco plugin for converting to a single-spa application (thanks @hasanayan):

https://github.com/hasanayan/craco-plugin-single-spa-application

Hi all, I'm working on a CRA micro-frontend template, a Container App (aka Main SPA) and a demo app including two micro-frontends with nested routes in case you want to take a look.
Any comment is welcome! Thanks!

@joeldenning @hasanayan Does the https://github.com/hasanayan/craco-plugin-single-spa-application plugin allow you to run a CRA application as a standalone single-spa application?

If you use react-app-rewired, you can use react-app-rewired-single-spa, which can be quickly integrated into the react-scripts project, supports 4.x 5.x, and supports hot updates

// use `customize-cra`
const { rewiredSingleSpa, rewiredSingleSpaDevServer } = require("react-app-rewired-single-spa");
const { override, overrideDevServer } = require("customize-cra");

module.exports = {
  webpack: override(
    rewiredSingleSpa({
      orgName: "you",
      projectName: "test",
      reactPackagesAsExternal: true,
      peerDepsAsExternal: true,
      orgPackagesAsExternal: true,
    })
  ),
  devServer: overrideDevServer(rewiredSingleSpaDevServer()),
};

I made an example.

https://github.com/ThaddeusJiang/legacy-spa

I could config my cra with rewired with this configuration

the publicPath property loaded my assets correctly in the root frontend

const ASSET_PATH = process.env.ASSET_PATH || 'http://localhost:3000/';

module.exports = {
  webpack(config, env) {
    config.output = {
      ...config.output,
      filename: "mfe-1.js",
      libraryTarget: "system",
      publicPath:ASSET_PATH
    };
    delete config.optimization;
    return config;
  },
  devServer(configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.disableHostCheck = true;
      config.headers = config.headers || {};
      config.headers["Access-Control-Allow-Origin"] = "*";
      return config;
    };
  },
};