Routing

Discover how routing works in Front-Commerce application.

tip

Since your Front-Commerce application is based upon Remix, we recommend you to read the official Remix routing documentation to understand how routing works in your Front-Commerce application.

Which routes are loaded?

In your Front-Commerce application, files in the app/routes folder are loaded by the Remix router.

In extensions, routes files are detected from the extension's definition in the index.ts file of the extension. The routes property of the extension definition must be defined to load the route from the routes folder of the extension.

tip

You can see an example of an extension with routes in the faq-demo extension.

How routes are overridden?

Routes defined in extensions can be overriden by routes defined in your application or extensions.

Example with the product route:

• _main.product.$id.tsx: Defined in the theme-chocolatine extension
• _main.product.$id.tsx: Defined in an extension extension/my-extension will override the one from the theme-chocolatine extension.
• _main.product.$id.tsx: Defined in your application in the app/routes folder will override the one from the theme-chocolatine extension and the one from the extension/my-extension extension.

warning

An override must be self-contained: copy the route's implementation rather than re-exporting the original route module (export { default, loader } from "…"). Remix strips server-only exports (loader, meta…) from matched route modules only — a re-exported module is compiled as a client dependency, so its top-level server imports (e.g. FrontCommerceApp) fail every request with "Server-only module referenced by client". Components and helpers (theme/…) stay importable as usual.