Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
create-react-app + react-app-rewired + single-spa
module.exports = function override(config, env) {
config.entry = './src/single-spa-entry.js';
config.output = {
...config.output,
filename: 'project-name.js',
libraryTarget: 'system',
}
delete config.optimization
config.plugins = config.plugins.filter(plugin => plugin.constructor.name !== 'HtmlWebpackPlugin')
return config;
};
  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.
@flyyuan

This comment has been minimized.

Copy link

flyyuan commented May 16, 2020

Can you provided single-spa-entry.js example?

@joeldenning

This comment has been minimized.

Copy link
Owner Author

joeldenning commented May 16, 2020

single-spa-entry.js is shown here: https://single-spa.js.org/docs/ecosystem-react#quickstart.

In a CRA app, your rootComponent is App.js

@BartJanvanAssen

This comment has been minimized.

Copy link

BartJanvanAssen commented Jun 1, 2020

Very nice! I think I would leave out

  • filename: 'project-name.js'
    and favor:
  • config.output.library = 'project name'
@joeldenning

This comment has been minimized.

Copy link
Owner Author

joeldenning commented Jun 1, 2020

Hi @BartJanvanAssen, I disagree with setting output.library. Since the libraryTarget is system, this will change the output bundle to be a named System.register, which requires an additional SystemJS extra. The named-register systemjs extra has been the single largest source of bugs within systemjs and I have put together >5 fixes for it in the last year. I would prefer users to avoid it possible.

// Without output.library - DESIREABLE
System.register(['react', 'react-dom'], function () {})

// With output.library - NOT DESIREABLE
System.register('app-name', ['react', 'react-dom'], function () {})

You can read more about named systemjs registers at https://github.com/systemjs/systemjs#extras and https://github.com/systemjs/systemjs/blob/master/docs/system-register.md.

Regarding output.filename - using the project name as the filename allows for using a port number to auto-generate an override url, which is very convenient.

@BartJanvanAssen

This comment has been minimized.

Copy link

BartJanvanAssen commented Jun 1, 2020

Ah! Appreciate it 👍 I was also using UMD, I'll move to 'system'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.