Skip to main content
Version: v5.1

Index entry point

index.html​

The index.html file in app/public provides the basic HTML container to mount the React application and references external scripts and style sheets. The following <div/> element is the ReferenceApp placeholder:


<body>
  ...
  <div id="app"></div>
</body>

index.jsx​

index.jsx is the entry point and top-level file for the ReferenceApp React app. As well as rendering the root component, index.jsx renders the IpaMainLayout ipa-core component.

IpaMainLayout ipa-core component​

IpaMainLayout.jsx is a component called from the ipa-core library that wraps the following ipa-core components:

  • Layout.jsx component: Renders a template main layout for your app and handles transitions
  • AppProvider.jsx component: A custom provider component that wraps your app to make data and functionality available throughout the entire component tree, such as your app's session, configuration, authorization, and error handling

Use of IpaMainLayout in index.jsx​

Within a Provider wrapper, index.jsx renders the IpaMainLayout ipa-core component and passes the following props:

  • ipaConfig: Passes the ipaConfig exported from ipaConfig.js.

    import ipaConfig from "../ipaCore/ipaConfig";

    ...

    render(
      <Provider>
        <IpaMainLayout
          ipaConfig={ipaConfig}
          onConfigLoad={onConfigLoad}
        />
      </Provider>,
      ...
    );

  • onConfigLoad: A callback function that triggers when the config loads. The passed function sets the endPointConfig endpoint configration from app/public/config.js in the session, gets the current project and current models, and sets the style properties.

    import ipaConfig from "../ipaCore/ipaConfig";

    const onConfigLoad = async (store, userConfig, AppContext) => {
      ...
      //sets styles
      setStyleProperties(ipaConfig);
      //sets config endPointConfig from app/public/config.js as the session config
      IafSession.setConfig(endPointConfig);
      //checks if model is valid
      const isValidModel = (model) => {
        ...
      };

      let selectedModel = {};
      //gets current project
      let selectedProj = IafProj.getCurrent();
      //loads the model
      let models = null;
      models = await IafProj.getModels(selectedProj).catch((error) => {
        console.log(error), (models = null);
      });
      ...
    }

    ...

    render(
      <Provider>
        <IpaMainLayout
          ipaConfig={ipaConfig}
          onConfigLoad={onConfigLoad}
        />
      </Provider>,
      ...
    );

ipaConfig​

The ipaConfig is exported from app/ipaCore/ipaConfig.js and contains configurations for the following:

  • App name
  • App id
  • Config user type, in this case a digital twin platform application: ipa-dt
  • Reference app config details such as the branding and logo
  • Components