Skip to main content

Assemble Routing

Description​

Assemble includes a mixed route model with:

  • Some dynamic routes. Either defined via Menu or using the config routesWithDynamicPages field.
  • Some static routes. Assemble Web includes some static routes that don't include any dynamic content.
    • /account: Account Settings page
    • /mylist: My List Page. It includes dynamic content via CMS Route.
    • /search: Search Page. It includes dynamic content via CMS Route.
    • /payment: Payment Page (Final Step of the Signup/Subscription Flow)
    • /player: Player page.
    • /profile: Profile Management page.
    • /signup: Signup Page (First Step of the Signup/Subscription Flow)
    • /subscription: Subscription Page (First Step of the Signup/Subscription Flow)

Dynamic Route details​

Dynamic routes are handled via a single Next.js route [[...routeSegments]] which is basically a catch-all for all the possible routes without an existing manual page (a dir inside src/app with a page.ts(x) file) and then we have created a src/views dir where the per route type View Component is defined and routeToViewMapper.ts inside the same src/views dir.

With that every dynamic route handled via Assemble CMS can be mapped into a single View per route with the following requirements:

  • Exported named View/Page Component for the render part
  • Exported named generateMetadata function to handle async metadata
  • Non-exported getPageData async function to handle async data fetch for the page (used in both Component and generateMetadata)

With this, the dynamic route in [[...routeSegments]]/page.tsx will use both the Component and the metadata fn to generate the proper things to be used by Next.js to render content and metadata accordingly.

Default Route definition​

Assemble uses a Config-based default route (by default on Control under config > application > navigation > defaultRoute) to be able to redirect users on the first access to a certain url.

On the implementation side, this is done the src/middleware.ts. It will rewrite the url when a user access the default HTTP route '/' if the defaultRoute is not the same.
It handles future redirection by:

Customization​

You can customize the Assemble routes in many different ways:

  • You can remove any of the existing static routes
  • You can add new static routes
  • You can update existing routes to map your existing application paths
  • You can update an existing route to use a different template
  • You can add new routes and map it to existing templates
  • You can add new routes with new templates (this will require new View creation)

As indicated before, Assemble uses a semi-CMS-based route definition so the first you need is to identify where the route is defined/going to be defined. Currently the Assemble CMS routes are defined in two places:

  • Menu: each Menu Item has its corresponding route
  • Route Mappings: besides the menu, all the other application routes are defined in the CMS routesMapping, specifically in the RouteMapping route field.

Remove a static route​

You can remove a static route by removing the associated folder inside the /src/app folder.

Please, take into account that some routes shared layouts so some of them (like /account or /mylist) are included in a Next.js layout groups (between parentheses).

Add a new static route​

You can add a static route by adding a new folder inside the /src/app folder.

Please, take into account that some routes shared layouts so you may need to include yours inside any of the existing Next.js layout groups (between parentheses).

Update existing route path​

If you are update an existing route, first you need to identify where to look (Menu Item vs Route Mappings), then you can update the string there to your matching path. (ie: /epg → /programguide)

Update mapping from existing route​

If you need to update an existing route to match a different existing template, you should go to your CMS definition, and update the Page item template field.

info

If you use Accedo Control, the list of valid template are mapped into the Page Entry type, so you should have a list with the existing template values.

Add new route​

Adding a new route shouldn't be that different than previous cases, unless you want to create a new template as well.

Using existing template​

If you need to add a new route, first identify where it is going to be located (Menu Item vs Route Mappings) and then add an entire new Item in the corresponding list with the new route path into the proper route field and the existing template in the Page field.

With new template​

For this case, together with the things defined in the previous item, you will need to:

  • Map the new template into your CMS system (If using Accedo Control: add new validation rule under the Page entry type template field)
  • Create a new View under src/views and add the specific case in the src/views/routeToViewMapper.ts file for pageLayoutMapViews and PageTemplates in pageLayout.ts.

Routes Error handling​

Wrongly defined routes​

Not Yet implemented

warning

https://accedobroadband.jira.com/wiki/spaces/Elevate/pages/3056041998/Elevate+Nested+Routes+CMS+definition

Duplicated routes​

A duplicated route error handled is introduce into [[...routeSegments]]/page.tsx routeErrorHandling method. If a duplicated route is found an Error is logged so the app can still work (will use first found route), but the App Developers can see that an error is happening

Not Mapped route​

This case covers a route in the CMS-based route list that is mapped into a template that is not mapped in the application (src/views/routeToViewMapper.ts file pageLayoutMapViews object).

In this case, an error is thrown and it's handled in the global Application Error within the src/app/error.tsx Error file.