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.
$ npm i -D amp-react-renderer-plugin
[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 =moduleexports =mode: ' development'entry:'home': 'index.js'output:path: __dirname + '/dist'filename: '[name].js'module:rules:test: /\.js$/use: 'babel-loader'test: /\.css$/use: ExtractTextPluginplugins:
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 =app
Setup for live reload development
- Step 1: Mount write-file-webpack-plugin plugin (you can create another config file
webpack.dev.configfor dev mode)
// webpack.dev.configconst WriteFilePlugin =plugins:...
- Step 2: Mount webpack-dev-middleware so that webpack will rebuild renderer once dependcies has changed.
const path =const webpackConfig =const webpackDevMiddleware =const webpack =const compiler =const server =// apply webpack dev middleware to enable Amp Html Renderer auto rebuildingserver
- 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
generate AMP HTML source with options you passed in
You need to pass a hash of options to AmpHtmlRenderer
|entryName||String||name of the entry point for the bundle which is used to generate renderer|
|AppComponent||React Element||application React element|
|headComponents||Array||collection of React elements which will be added inside of HTML head tag|
Why component-based AMP
Easy to share and reuse
Unsupported extension list
- amp-ad-exit: Currently renderer doesn't support AMP A4A document
- amp-google-vrview-image: still get validation error