defineRemixExtension

info

Extensions are registered in the application using the front-commerce.config.ts file. Read Register an extension to learn more.

defineRemixExtension

The defineRemixExtension allows you to define extensions settings for a Remix application, this extends the defineExtension configuration of Front-Commerce.

defineRemixExtension(configuration);

Arguments:

Name	Type	Description
configuration	RemixExtensionConfig	The extension configuration

Example:

import { defineRemixExtension } from "@front-commerce/remix";

defineRemixExtension({
  name: "acme",
  meta: import.meta,
  theme: "./extensions/acme/theme",
  routes: import.meta.url,
});

RemixExtensionConfig

info

RemixExtensionConfig is the definition interface of an extension, which extends the ExtensionConfig interface.

In addition to the ExtensionConfig, the RemixExtensionConfig has the following properties:

routes

Optional string | routes

This can either be a string which defined the base directory that contains the routes, or the routes configuration function from Remix.

File based routes:

File based roots use the flatRoutes from Remix, which means that the convention is the same as using the routes directory in a Remix application.

{
  name: "acme",
  theme: "./extensions/acme/theme",
  routes: import.meta.url,
}

Config based routes:

{
  name: "acme",
  theme: "./extensions/acme/theme",
  routes: async (defineRoutes) => {
    return defineRoutes((routes) => {
      routes.get("/acme", `../extensions/pages/acme.tsx`);
    });
  },
}

caution

Remix resolves the path to the a route file relative to the appDirectory, that's why in the above example we use ../ to go back to the root directory of the application.