dg-npm-templates/templates/dg-react-micro-frontend-latest/src/index.js

Npx generator for react app dependency creation by digite

/* istanbul ignore file */

import React from 'react';
import { Provider } from 'react-redux';
import { createRoot } from 'react-dom/client';
import App from './js/app/components/App';
import ErrorBoxView from './js/common/components/ErrorBoxView';
import store from './js/store/StoreConfigure';
import './assets/sass/styles.scss';
import AppHelper from 'js/app/AppHelper';
import properties, { setProperties } from 'properties';
import AppUtil, { setAppStore }  from 'js/utils/AppUtil';
import './i18n';
import { setAppUrls, GLOBAL_CONSTANTS } from 'js/common/constants/GlobalConstants';
import getSourceInterface from 'js/interface/InterfaceLoader';

setAppStore(store);

let contextPath = window.location.pathname.substring(1, window.location.pathname.lastIndexOf('/'));
let actionpath =  "";

const customAppPropsPath = '#CUSTOM_APP_PATH#';

let appPropsPath = properties.isIntegrated ? '/' + contextPath + actionpath : 'data/AppProps.json';

if ( !customAppPropsPath.includes('CUSTOM_APP_PATH') ) {
    appPropsPath = customAppPropsPath;
}

AppHelper.setParamMap();

if ( AppHelper.getParamData("appPropsURL") ) {
    contextPath = "";
    actionpath = AppHelper.getParamData("appPropsURL");
    appPropsPath = '/' + contextPath + actionpath;
}

AppUtil.ajax( appPropsPath, undefined, propertiesConfig => {
    
    setProperties(propertiesConfig);

    // NOTE: this function name needs to be changed according to your Microfrontend.
    // This work is done for MF to work in products without iframe
    // When loading without iframe css needs to be taken care and comment out icomoon files load from style.scss file
    window.loadMF = function(configuration) {
        let containerId = "root";

        if ( configuration ) {
            AppHelper.setParamMap(configuration.paramMap);
            containerId = configuration.containerId;
        }

        const source = getSourceInterface(properties.sourceType);

        if (GLOBAL_CONSTANTS.SWIFTENTERPRISE !== properties.sourceType) {
            contextPath = "";
        }

        const configUrl = properties.isIntegrated ? '/' + contextPath + properties.configURL : properties.configURL;

        AppUtil.ajax( configUrl, source.getConfigPostData(), responseConfig => {

            const container = document.getElementById(containerId);
            const root = createRoot(container); // createRoot(container!) if you use TypeScript

            if ( responseConfig.error ) {
                root.render(<ErrorBoxView dataHtml={ responseConfig.error }/>);
            } else {
                AppHelper.initConfig( responseConfig );

                setAppUrls( responseConfig.URLs );

                if ( responseConfig.customCSSFiles ) {
                    AppHelper.loadCustomCSSFiles( responseConfig.customCSSFiles );
                }
                
                root.render((
                    <Provider store={ store }>
                        <App store={ store } source={ source }/>
                    </Provider>));
            }
        }, undefined, false, properties.isIntegrated ? {
            method: 'POST'
        } : undefined );
    }

    if ( !properties.isIntegrated ) {
        window.loadMF()
    }
});