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

!screencast_1080

Installation

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

Usage

$3

[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.

`javascript
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.

$3

Here we use express route handler as example:

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

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

res.send(ampHtmlRenderer({
entryName: 'home',
AppComponent: ,
title: 'hello AMP x React',
canonical: 'https://github.com',
headComponents: []
}))
})
`

$3

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

`javascript
// 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.
`javascript
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

$3

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

$3

$3

$3

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