[Discussion] AMP Pages with Gatsby

Opening this issue to discuss a functioning (and flexible) solution for generating valid AMP pages. I’m looking for feedback and improvements to the code, as I do believe it can be better. This solution is working on a project that’s using one template to generate thousands of pages.

The biggest hurdle to generating valid AMP pages with Gatsby is removing all the JS bundles that Gatsby automatically inlines in the head during the build process. My solution is to filter these out in componentWillMount in html.js.

  componentWillMount(props) {

  if (process.env.NODE_ENV === `production`) {
    function isJSFile(obj) {
      if ( (typeof obj.key === 'string' || obj.key instanceof String) ) {
        return path.isAbsolute(obj.key) === true
      }
    }

    const ampify = this.props.headComponents.filter((obj, index) => {
      return obj.key !== 'webpack-manifest' && obj.type !== 'script' && !(isJSFile(obj))
    })

    this.props.headComponents = ampify
  }
}

I feel like this solution is still a bit hacky. Given that AMP pages won’t use any JS, it seems like an unnecessary use of cycles to even generate the files in the first place. Personally, I think it would be much cleaner to pass a flag to a build process that instructs Gatsby not to output any JS files.

I’m curious what folks that more familiar with Gatsby internals think. Would a plugin be a more flexible solution? Are there any gotchas, or conerns, you have with this approach?

I’m working on a more indepth write-up to share the full project implementation. Feel free to ask questions in the meantime.

Big thanks in advance to @KyleAMathews for answering my questions on Twitter throughout the development process and for making such a fun, elegant framework.

[chiedo]

@misscs there are A LOT of different way you can treat AMP pages. In my solution, you can do whatever you want after this. https://github.com/chiedo/gatsby-amp-starter-blog/blob/master/ampify.js#L65

I currently use my solution on 5 websites and it works like a charm. 😃

But my way isn’t the only way. Just a way that is proven and works in production and can be customized. It’s definitely not plug and play… coding is required.

[KyleAMathews]

Due to the high volume of issues, we’re closing out older ones without recent activity. Please open a new issue if you need help!