Package Exports

react-amp-template

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-amp-template) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-amp-template

Server side rendering with React + ModularCSS/JSCSS + AMP-custom-elements.

_{Another fun library to generate AMP documents.}

Install

react-amp-template is distributed via npm:

yarn add react-amp-template or $npm install --save react-amp-template

Server Side Rendering

Basic sample

import http from 'http';
import React from 'react';
import App from './app';
import { renderToStaticMarkup } from '../../lib';
const debug = require('debug')('example:server');
const error = require('debug')('example:server:error');

const startServer = (html) => {
  http.createServer((request, response) => {
    response.writeHeader(200, { 'Content-Type': 'text/html' });
    response.write(html);
    response.end();
  })
  .listen(8000)
  .on('clientError', (err, socket) => {
    socket.end('HTTP/1.1 400 Bad Request\r\n\r\n');
    error(err);
  });
  debug('Listening on port 8000');
};

/**
* react-amp-template returns a promise which will be fulfilled
* with a string that holds the whole HTML document ready to serve.
* The promise will reject for any internal error.
*/
renderToStaticMarkup(<App bannerText="React-AMP-Template" />, App.config)
  .catch(error)
  .then(startServer);

PREVIEW:

See more examples

Features

⚡ AMP custom elements: Ready to render AMP components see more https://ampbyexample.com/#components
💅 Modular CSS: Style with the power of (Aphrodite)[https://github.com/Khan/aphrodite]
:suspect: Built-in AMP validation: By default, all content generated will be verified through (AMP validator)[https://github.com/ampproject/amphtml/tree/master/validator] to ensure safety.

API

💤

Data flow

💤

🐧 Contributing

$git clone git@github.com:Ariel-Rodriguez/react-amp-template.git
$yarn
create an issue, create a branch with issue initials
hack and ensure tests pass. Add unit tests if needed.
npm run build
npm run test
add descriptive commit & push

run examples

Build examples and github demo npm run dist
npm run demo or npm run examples