single-spa-react-app
This is a React application example used as NPM package in single-spa-login-example-with-npm-packages in order to register an application. See the installation instructions there.
✍🏻 Motivation
This is a React application which contains two routed pages for embbed the app inside a root single-spa application.
How it works ❓
There are several files for the right working of this application and they are:
- src/index.js
- src/singleSpaEntry.js
- package.json
- webpack.config.js
src/index.js
;;; ;; Component { return <BrowserRouter basename="/react"> <App /> </BrowserRouter> ; } // If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker;
As this application will be mounted when browser url starts with /react, we need to set basename attribute with /react value in our router component. In this case the used router compononent is BrowserRouter.
src/singleSpaEntry.js
;;; ; const reactLifecycles = ;const bootstrap = reactLifecycles;const mount = reactLifecycles;const unmount = reactLifecycles;
The reactLifecycles object contains all single-spa-react methods for the single-spa lifecycle of this app. All used config is default one but the custom config of the domElementGetter option. It's assumed that an element with react-app id is defined in the index.html where this application will be mounted.
package.json
There are only two scripts in this project:
- build: for compile the application and build it as a libray in umd format
- lint: for run eslint in all project
webpack.config.js
const path = ;const webpack = ;const CleanWebpackPlugin = ; moduleexports = entry: 'src/singleSpaEntry.js' output: library: 'single-spa-react-app' libraryTarget: 'umd' filename: 'single-spa-react-app.js' path: path module: rules: test: /\.js?$/ exclude: path loader: 'babel-loader' 'eslint-loader' test: /\.html$/i loader: 'html-loader' test: /\.css|\.scss$/ use: 'style-loader' 'css-loader' 'sass-loader' node: fs: 'empty' resolve: modules: __dirname 'node_modules' plugins: cleanAfterEveryBuildPatterns: 'dist' maxChunks: 1 devtool: 'source-map' externals: devServer: historyApiFallback: true writeToDisk: true ;
The needed options for the right build of the application as library are defined in the output field.
The LimitChunkCountPlugin is used for disable chunks for build process. It's not necessary but I prefer keep whole application in one chunk as it will be embedded in another one.