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 = ? null : allChunks[getChunkName(params.pageType)];

        disableAjaxNavigation: false,

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.