/amp-react-renderer-plugin

:zap:Plugin makes it painless to create React component based AMP page:zap:

Primary LanguageJavaScriptMIT LicenseMIT

AMP React Renderer Plugin

Component Build Npm Publish

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

screencast_1080

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

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

plugins: [
  ...,
  new WriteFilePlugin()
]
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

2018-05-10 10 09 16

Composable

2018-05-10 10 09 28

Easy to share and reuse

2018-05-10 10 09 46

Examples

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

License

MIT Licensed