https://github.com/fupengl/react-app-rewired-single-spa
Use single-spa in your create-react-app.
https://github.com/fupengl/react-app-rewired-single-spa
customize-cra react-app-rewired react-scripts single-spa single-spa-react systemjs
Last synced: 12 days ago
JSON representation
Use single-spa in your create-react-app.
- Host: GitHub
- URL: https://github.com/fupengl/react-app-rewired-single-spa
- Owner: fupengl
- License: mit
- Created: 2022-05-21T06:22:20.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2025-03-02T14:31:10.000Z (4 months ago)
- Last Synced: 2025-04-15T03:53:43.438Z (2 months ago)
- Topics: customize-cra, react-app-rewired, react-scripts, single-spa, single-spa-react, systemjs
- Language: JavaScript
- Homepage:
- Size: 4.39 MB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-app-rewired-single-spa
Use `single-spa` `systemjs` in your `create-react-app`.
[npm]: https://img.shields.io/npm/v/react-app-rewired-single-spa
[npm-url]: https://www.npmjs.com/package/react-app-rewired-single-spa
[download]: http://img.shields.io/npm/dm/react-app-rewired-single-spa.svg?style=flat
[![npm][npm]][npm-url]
[![NPM downloads][download]][npm-url]
> Quickly adapt `react-scripts` as a submodule of single-spa !!!
> Support `[email protected]` `[email protected]` version.
## Features
- Support `[email protected]` compatible with common configuration migrations
- Output `systemjs` library auto add `SystemJSPublicPathPlugin`
- Support `ReactFastRefresh` hot refresh
## Installation
```bash
npm i react-app-rewired-single-spa -D
```
## Usage
This project is based on [`react-app-rewired`](https://github.com/timarney/react-app-rewired).
```js
/* config-overrides.js */
const {
rewiredSingleSpa,
rewiredSingleSpaDevServer,
} = require("react-app-rewired-single-spa");
module.exports = {
webpack: rewiredSingleSpa(),
devServer: function (configFunction) {
return function (proxy, allowedHost) {
const config = configFunction(proxy, allowedHost);
return rewiredSingleSpaDevServer()(config);
};
},
};
// use `customize-cra`
const { override, overrideDevServer } = require("customize-cra");
module.exports = {
webpack: override(
rewiredSingleSpa({
orgName: "you",
projectName: "test",
reactPackagesAsExternal: true,
peerDepsAsExternal: true,
orgPackagesAsExternal: true,
})
),
devServer: overrideDevServer(rewiredSingleSpaDevServer()),
};
```
## Options
### orgName
Type: `string`
The name of the organization this application is written for.
### projectName
Type: `string`
The name of the current project. This usually matches the git repo's name.
### entry
Type: `string`
Default: `src/{orgName}-{projectName}.{js|jsx|ts|tsx}` `src/index.{js|jsx|ts|tsx}`
The entry file.
### outputFilename
Type: `string`
Default:
- development `{orgName}-{projectName}.[contenthash:8].js`
- production `{orgName}-{projectName}.js`
### rootDirectoryLevel
Type: `number`
This is the rootDirectoryLevel that is passed to https://github.com/joeldenning/systemjs-webpack-interop.
### reactPackagesAsExternal
Type: `boolean`
This will `react` `react-dom` as webpack externals or not.
### orgPackagesAsExternal
Type: `boolean`
This changes whether package names that start with @your-org-name are treated as webpack externals or not.
### peerDepsAsExternal
Type: `boolean`
This will package.json `peerDependencies` as webpack externals or not.
## FQA
### FastRefresh invalid
- If `react` `react-dom` is external, `react-dev-tool` must be installed to refresh automatically.
For details, please see https://github.com/facebook/react/issues/17552
- Check whether the ws connection is normal, you can set in `.env` file
- `WDS_SOCKET_PORT` "2002"
- `WDS_SOCKET_HOST` "localhost"
- `WDS_SOCKET_PATH` "/projectName" **Please start with "/"**
> The default hotreload client uses the relative website protocol,
> which is the protocol of the main base. It can use the localhost
> protocol and the local development port.
### webpack < 5 used to include polyfills for node.js core modules by default
The following packages have been integrated by default, and the specified dependencies can be installed directly in the project.
```json
{
"url": "url",
"fs": "fs",
"assert": "assert",
"crypto": "crypto-browserify",
"http": "stream-http",
"https": "https-browserify",
"os": "os-browserify/browser",
"buffer": "buffer",
"stream": "stream-browserify"
}
```
### You attempted to import XXXXXXXX which falls outside of the project src/ directory
You can use `customize-cra` `removeModuleScopePlugin()`
### [email protected] postcss plugin error
You can use `customize-cra`
```js
adjustStyleLoaders(({ use: [, , postcss] }) => {
const postcssOptions = postcss.options;
postcss.options = { postcssOptions };
});
```
## License
MIT © [fupengl](https://github.com/fupengl)