# Implementing App Locations Introduction

### About this export

| Field | Value |
| --- | --- |
| **content_type** | lesson |
| **platform** | contentstack-academy |
| **source_url** | https://www.contentstack.com/academy/courses/marketplace-apps/implementing-app-locations-introduction |
| **course_slug** | marketplace-apps |
| **lesson_slug** | implementing-app-locations-introduction |
| **markdown_file_url** | /academy/md/courses/marketplace-apps/implementing-app-locations-introduction.md |
| **generated_at** | 2026-05-27T10:19:09.697Z |

> Part of **[Building Marketplace Apps](https://www.contentstack.com/academy/courses/marketplace-apps)** on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys.

<!-- ai_metadata: {"lesson_id":"05","type":"text","duration_minutes":1,"topics":["Implementing","App","Locations","Introduction"]} -->

#### Lesson text

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.

#### Key takeaways

- Connect **Implementing App Locations Introduction** back to your stack configuration before moving to the next module.
- Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment.
- Re-read the delivery versus management boundary for anything you changed in the entry model.

## Supplement for indexing

### Content summary

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/Ap

### Retrieval tags

- Implementing
- App
- Locations
- Introduction
- marketplace-apps
- lesson 05
- Implementing App Locations Introduction
- marketplace-apps lesson

### Indexing notes

Index this lesson as a primary chunk tagged with lesson_id "05" and topics: [Implementing, App, Locations, Introduction].
Parent course slug: marketplace-apps. Use asset_references URLs as thumbnail hints in search results when present.
Never surface LMS quiz content or assessment answers from this file.

### Asset references

_No image or video thumbnail URLs were extracted._

### External links

| Label | URL |
| --- | --- |
| Contentstack Academy home | `https://www.contentstack.com/academy/` |
| Training instance setup | `https://www.contentstack.com/academy/training-instance` |
| Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` |
| Contentstack documentation | `https://www.contentstack.com/docs/` |