---
title: "Organizing your app"
slug: "organizing-your-app"
abstract: "Considerations for organizing a Marketplace app into logical routes."
---
# Organizing your app

As the app developer, you can organize your app into routes and associate each route with an extension point[^UUID-cddb7f26-63be-0002-f1bd-1044187df5fe_N68500fc148251]. This lets you control which part of your app appears in which area of the SitecoreAI user interface.

A route is a URL path in your app, such as `/home` or `/fullscreen-analytics`, and it corresponds to one part of your app, such as a component or an entire page. [By associating a route with an extension point](https://doc.sitecore.com/mp/en/developers/marketplace/organizing-your-app.html#configuring-routing), you ensure that the extension point displays that specific part of your app to the Sitecore product user.

For example, you could associate your app's `/fullscreen-analytics` route with the *SitecoreAI full screen* extension point. This way, when the Sitecore product user opens your app in the *SitecoreAI full screen* extension point, they see the contents of your app's `/fullscreen-analytics` route.

Note the following about routes and extension points:

- You can enable one or more extension points for your app. Each enabled extension point is associated with an app route.
- Typically, a single extension point is associated with a single route.

    The *dashboard widget* extension point is an exception because a single app can have multiple widgets. If you set up multiple widgets, you map each widget to a unique route.

> [!tip]
> Routing also lets you implement separation of concerns and code splitting. This helps keep your app organized and results in smaller app bundle sizes.

## Configuring routing

When you enable an extension point for your [custom](https://doc.sitecore.com/mp/en/developers/marketplace/configure-and-activate-a-custom-app.html) or [public](https://doc.sitecore.com/mp/en/developers/marketplace/configure-a-public-app.html) app, a route URL is automatically assigned to it. You can customize the URLs to your needs. Then, in your app, you must associate the same route URLs with components of your app using React Router or any other routing tool of your choice.

> [!important]
> If you need to change a route URL, make sure to update it both on the app configuration page and in your app's source code.

Consider the example of a web analytics app configured with the following extension points and route URLs:

| Extension point | Route URL |
| --- | --- |
| *Standalone* | `/home` |
| *SitecoreAI full screen* | `/fullscreen-analytics` |
| *SitecoreAI dashboard widget* | `/dashboard-analytics` |
| *SitecoreAI dashboard widget* | `/dashboard-reports` |

::::tabs
:::tab{title="React"}

In your React app, you could use React Router to associate each route URL (specified in `path`) with a component (specified in `element`):

```typescript
function App() {
  return (
    <Routes>
      <Route path="/home" element={<HomePage />} />
      <Route path="/fullscreen-analytics" element={<AnalyticsPage />} />
      <Route path="/dashboard-analytics" element={<AnalyticsWidget />} />
      <Route path="/dashboard-reports" element={<ReportsWidget />} />
    </Routes>
  );
}
```

:::
:::tab{title="Next.js (Pages Router)"}

Next.js automatically handles routing based on the file structure.

To set up file-based routing in your Next.js (Pages Router) app, you could create the following file structure:

```plaintext
pages/
  ├── home.tsx
  ├── fullscreen-analytics.tsx
  ├── dashboard-analytics.tsx
  └── dashboard-reports.tsx
```

Then, export a default component from each file:

```typescript
// pages/dashboard-analytics.tsx
export default function AnalyticsWidget() {
  return <div>Marketplace analytics widget content</div>;
}
```

:::
:::tab{title="Next.js (App Router)"}

Next.js automatically handles routing based on the file structure.

To set up file-based routing in your Next.js (App Router) app, you could create the following file structure:

```plaintext
app/
  ├── layout.tsx
  ├── page.tsx
  ├── home/
  │   └── page.tsx
  ├── fullscreen-analytics/
  │   └── page.tsx
  ├── dashboard-analytics/
  │   └── page.tsx
  └── dashboard-reports/
      └── page.tsx
```

Then, export a default component from each file:

```typescript
// app/dashboard-analytics/page.tsx
export default function AnalyticsWidget() {
  return <div>Marketplace analytics widget content</div>;
}
```

:::::::

[^UUID-cddb7f26-63be-0002-f1bd-1044187df5fe_N68500fc148251]: An area of the SitecoreAI user interface where a Marketplace application can appear.