Implementing App Locations Introduction

In this module you will take a look at the source code and do some modifications and you will see those changes taking effect in the UI as you make them.

The marketplace boilerplate app is based on React, more specifically a Client-Side-Rendered app. You can learn more about React’s standard setup by looking at the create-react-app template in which this boilerplate is based.

The React app rendering starts from the file “/src/index.tsx”. In that file, the App component is imported and wrapped with Browser Router which handles routing for the application, and allows you to navigate through the different locations registered before.

Next, the App component is defined at “/src/containers/App/App.tsx”. Here all the registered routes that are needed for the app are defined. Notice how the urls here match the ones used while registering them in Developer Hub.

Best Practice: Instead of directly importing the components of each route, you can import inside React.lazy() and wrap it inside the component of react for better performance of the app. This will improve the initial loading time of the application in the browser making the components load lazily for routes as needed and only when requested.

The following code snippet illustrates this concept:

const AppConfigurationExtension = React.lazy(() => import("../ConfigScreen/AppConfiguration")); ... <Routepath="/uri-endpoint-for-your-route"element={<Suspense><NewProviderOfTheRoute><NewComponentOfTheRoute /></NewProviderOfTheRoute></Suspense>}/>;

In the following modules, you will browse through the available UI locations along with their corresponding routes and code.