Link

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.