How can we configure dotnet core react application to use mulltientry?

Question

We are using dotnet core 2.2 with react. We have two separate modules in the application (User and Admin) which should be loaded independently. How do we provide route on server to load Admin or User module?

We have this https://github.com/nickwesselman/SpaServicesMultiSpa example which works for Angular, how do we modify it to make it work in react?

Answer 1

Use a different root element for the User and Admin modules (eg App.js and AppAdmin.js ). Then in index.js choose which to render based on the URL:

import App from './App';
import AppAdmin from './AppAdmin';

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

if (window.location.pathname.indexOf(baseUrl + 'admin') === 0) {
    ReactDOM.render(<AppAdmin />, rootElement);
}
else {
    ReactDOM.render(<App />, rootElement);
}

This will render AppAdmin as the root component when the URL starts with the path /admin (eg /admin but also /admin/funds , /admin/settings , etc.)

If you want the admin and user JavaScript/CSS to be split into separate files (so that normal users don't download the admin JavaScript code and vice-versa), you can trigger code splitting by using dynamic imports:

// Ensure there is no "import App" or "import AppAdmin" statements
// in the import statements section at the top of the file.

const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');

if (window.location.pathname.indexOf(baseUrl + 'admin') === 0) {
    import('./AppAdmin').then(({ default: AppAdmin }) => {
        ReactDOM.render(<AppAdmin />, rootElement);
    });
}
else {
    import('./App').then(({ default: App }) => {
        ReactDOM.render(<App />, rootElement);
    });
}