How toUse AMP with Remix

If for any reason, you want to add AMP to your Remix app, there are a few things you need to do.

First, go to your app/root file and change the component with this:

export default function App() {
  return (
    <html amp lang="en">
      <head>
        <Meta />
        <script async src="https://cdn.ampproject.org/v0.js" />
        <Links />
        <style
          amp-boilerplate
          dangerouslySetInnerHTML={{
            __html:
              "body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}",
          }}
        />
        <noscript>
          <style
            amp-boilerplate
            dangerouslySetInnerHTML={{
              __html:
                "body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}",
            }}
          />
        </noscript>
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <LiveReload />
      </body>
    </html>
  );
}

The important changes are

  • Add amp non-standard attribute to the <html> tag.
  • Add a script to load https://cdn.ampproject.org/v0.js (you may want to preload it).
  • Add a <style> tag with the non-standard amp-boilerplate attribute and some CSS inside.
  • Add a <noscript> tag with a <style> tag inside with again the same amp-boilerplate attribute and other styles.
  • Remove the <Scripts /> component from Remix so your app doesn't hydrate.

Then, you can start using any AMP custom element. For example, go to your app/routes/index file and render an amp-img:

export default function Index() {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Welcome to Remix with AMP</h1>

      <amp-img
        src="https://source.unsplash.com/random/600x400"
        width="600"
        height="400"
      />
    </div>
  );
}

That's it. You can now use any other AMP custom element in your HTML.