Rendering amp story pages on mobile

This tutorial was contributed by Ramsharan Gorur Jayaraman

Malibu supports rendering amp pages as story pages only on mobile.

Steps to implement

• First Ensure that @quintype/framework is at the latest version

• In app/server/app.js, pass the lightPages prop to the isomorphicRoutes function. This ensures that a response header called X-QT-Light-Pages-Url is set.

isomorphicRoutes(app, {
  appVersion: require("../isomorphic/app-version"),
  ...
  lightPages: true,
  ...
  preloadJs: true,
  preloadRouteData: true
});

• Disable Ajax navigation in app/server/handler/render-layout.js

export function renderLayout(res, params) {
  const chunk = params.shell ? null : allChunks[getChunkName(params.pageType)];

  res.render(
    "pages/layout",
    Object.assign(
      {
        ...
        disableAjaxNavigation: false,
      },
      params
    )
  );
}

You should now see all the story pages rendering an amp page on mobile only.

Known Caveats

This feature is available only if you are using the Cloudflare CDN.