Menu Links

The main navigation is positioned on the left side of each Merchant Center screen. It contains links to the different applications within a project.

The Merchant Center is composed of multiple independent applications, where each application defines its own set of links. However, the main navigation must contain links from all the available applications for a project. The links are rendered dynamically on runtime, where the main navigation pulls the data from a common source.

Additionally, links to Custom Applications are also fetched dynamically, based on the registered applications within a project.

Links for local development

However, when developing a Custom Application locally, we can't fetch any configuration dynamically. This is because only one application is running locally and therefore links to other applications are pretty much useless. Therefore, in development only the application links should be rendered. To do so, you need to configure the links in the menu.json. The file is then loaded through a special prop that is only available in development mode.

// entry-point.js
const EntryPoint = () => (
  <ApplicationShell
    DEV_ONLY__loadNavbarMenuConfig={() =>
      import('../../../menu.json').then(data => data.default || data)
    }
    // other props...
  />
);

The menu.json is only used for development. For production usage, the configuration of the links needs to be registered in the Merchant Center.

Furthermore, when you visit the URL http://localhost:3001/ in development, you get redirected to the default route /:projectKey, but your application can't handle this route and shows a 404 page. To fix that, you can provide an extra redirect to your main application route path, which is only used in development mode.

// entry-point.js
const ApplicationStarter = () => (
  <Switch>
    {
      process.env.NODE_ENV === 'production' ? null : (
        <Redirect
          from="/:projectKey"
          to="/:projectKey/examples-starter"
        />
      );
    }
    <Route
      path="/:projectKey/examples-starter"
      component={AsyncApplicationRoutes}
    />
    {/* Catch-all route */}
    <RouteCatchAll />
  </Switch>
)