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.

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;
    };
  },
};