Customize routes programmatically

Front-Commerce allows you to customize routes programmatically through the Vite configuration. This guide explains how to filter and modify routes based on your specific needs.

Overview

When building a Front-Commerce application, you might need to customize routes for various reasons:

• Filter out unwanted routes from extensions
• Dynamically defining routes without creating files in app/routes
• Renaming routes to match your business requirements (e.g., translating URLs)
• Ensure only necessary API routes are available
• Customize the routing behavior for your specific use case

Basic configuration

Route customization happens in your vite.config.ts file by providing a defineAppRoutes function to the Front-Commerce plugin. This function receives three parameters:

• defineRoutes: The Remix route definition function
• extensionRoutes: Routes defined by Front-Commerce extensions
• fileRoutes: Routes defined in your app/routes directory

vite.config.ts

export default defineConfig((env) => {
  return {
    plugins: [
      remixDevTools({
        client: {
          defaultOpen: false,
        },
      }),

      frontCommerce({
        env,
        defineAppRoutes: async (defineRoutes, extensionRoutes, fileRoutes) => {
          // Your custom route logic here
        },
      }),
    ],
  };
});

Common use cases

Disable unused routes

You can prevent specific routes from being registered by filtering them out:

defineAppRoutes: async (defineRoutes, extensionRoutes, fileRoutes) => {
  // Remove unwanted routes from extensions
  const routesToDisable = ["routes/account", "routes/wishlist"];

  const filteredRoutes = Object.entries(extensionRoutes).reduce(
    (acc, [key, route]) => {
      if (!routesToDisable.includes(route.id)) {
        acc[key] = route;
      }
      return acc;
    },
    {}
  );

  return filteredRoutes;
},

Create additional routes

You can define new routes that don't exist in your app/routes directory:

defineAppRoutes: async (defineRoutes, extensionRoutes, fileRoutes) => {
  return {
    "routes/not-in-routes-dir": {
      id: "routes/not-in-routes-dir",
      path: "/not-in-routes-dir",
      file: "custom/not-in-routes-dir.tsx", // This file will be created in the app/custom directory
    },
  };
},

Rename routes

You can change the URL path of existing routes while keeping the original implementation:

defineAppRoutes: async (defineRoutes, extensionRoutes, fileRoutes) => {
  return {
    "routes/wishlist": {
    ...extensionRoutes["routes/wishlist"],
    path: "/your-custom-name", // Change URL path from /wishlist to /your-custom-name
    },
  };
},

warning

Renaming routes only changes the URL path. It does not automatically update links in your theme or components. You'll need to update those manually.

Route priority

When customizing routes, keep in mind the following priority order:

1. File-based routes (app/routes/*)
2. Programmatically defined routes (via defineAppRoutes)
3. Extension routes

This means that if you define a route that conflicts with a file-based route, the file-based route will take precedence.