AMP React Renderer Plugin

This ia a webpack plugin that make it painless to create a React component based AMP (Google Accelerated Mobile Pages) application easily. It can handle these jobs for you:

• Collect custom CSS: Move all application required CSS assets into an AMP boilerplate HTML renderer. Renderer will add these styles inside the amp custom style tag of head tag.

• Load used extension library automatically: Extract the application used AMP extension component from bundle and generate cooresponding library script tags which will be added to the head tag of AMP HTML renderer.

• Generate a React based AMP HTML renderer: Plugin will generate a AMP HTML renderer for each application entry. It's a function that can be invoked with page meta and React application component at server runtime. Be able to render with React component means that plugin produced renderer works well with React ecosystem libraries which can be used on the server side like Redux and React Router. You can refer to the examples for more details and give it a try.

Demo

Installation

$ npm i -D amp-react-renderer-plugin

Usage

webpack.config.js

[Note] This plugin need to use together with plugins which can extract all required css modules in chunk into single or mutiple .css files such as ExtractTextPlugin for webpack 3 or mini-css-extract-plugin for webpack 4.

const AmpReactRendererPlugin = require('amp-react-renderer-plugin')

module.exports = {
  mode: ' development',
  entry: {
    'home': 'index.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              query: {
                minimize: true
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new AmpReactRendererPlugin()
  ]
}

This will generate a file dist/AmpHtmlRenderer.js which will be used to render AMP page with React application component at server runtime.

AMP page rendering

Here we use express route handler as example:

const ampHtmlRenderer = require('./dist/AmpHtmlRenderer.js')

app.get('/home', function (req ,res) {
  const Application = require('./components/Application')

  res.send(ampHtmlRenderer({
    entryName: 'home',
    AppComponent: <Application />,
    title: 'hello AMP x React',
    canonical: 'https://github.com',
    headComponents: [<meta property="fb:app_id" content="1401488693436528"/>]
  }))
})

Setup for live reload development

• Step 1: Mount write-file-webpack-plugin plugin (you can create another config file webpack.dev.config for dev mode)

// webpack.dev.config
const WriteFilePlugin = require('write-file-webpack-plugin')

plugins: [
  ...,
  new WriteFilePlugin()
]

• Step 2: Mount webpack-dev-middleware so that webpack will rebuild renderer once dependcies has changed.

const path = require('path')
const webpackConfig = require('../webpack.config.dev.js')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpack = require('webpack')
const compiler = webpack(webpackConfig)
const server = require('./server.js')

// apply webpack dev middleware to enable Amp Html Renderer auto rebuilding
server.use(webpackDevMiddleware(compiler))

• Step3: use nodemon to monitor source changes in application and restart server automatically

$ nodemon --watch src/ server.js

[Note] Examples demonstrate how to setup it, check it out

AmpHtmlRenderer

generate AMP HTML source with options you passed in

Options

You need to pass a hash of options to AmpHtmlRenderer

name	type	description
entryName	String	name of the entry point for the bundle which is used to generate renderer
AppComponent	React Element	application React element
title	String	page title
canonical	String	canonical link
headComponents	Array	collection of React elements which will be added inside of HTML head tag
runtimeCss	String	javascript generated inline style source. For example: Styled Components collectStyles()

Why component-based AMP

More Maintainable

Composable

Easy to share and reuse

Examples

• global scoped CSS
• CSS Modules
• styled components
• external-amp-component
• redux

Unsupported extension list

• amp-ad-exit: Currently renderer doesn't support AMP A4A document
• amp-google-vrview-image: still get validation error
• amp-dynamic-css-classes
• amp-viz-vega

Related Repositories

• amp-react-square-img
• react-ampify

License

MIT Licensed