ampreact with Storybook

⚡⚛ AMP HTML, Next.js, React, styled-components — Based on the most trendy website boilerplate possible - adopted from https://github.com/dfrankland/ampreact.

About

The core of ampreact is built on Next.js, used for all the routing and serving of pages. For styling, styled-components makes it easy — with just a small modification to the rendering of the <style /> tags generated, it works nicely with AMP HTML. Finally, react-amphtml is used for rendering all of the AMP HTML built-ins, extensions, and the <script /> tags needed to use them.

The pages generated should all be properly validated by AMP HTML 💯

Usage

The easiest way to get started for development on Windows is to install ConEmu (64 bit) and run the script start-dev.bat. ConEmu is a Windows console emulator that supports tabs and screen splits. The script will start a ConEmu window with 4 tabs for: Nextjs, TypeScript compilation, Storybook and an interactive console window.

All the usage and benefits of Next.js are available to ampreact.

• Installation:

  npm install

• Development:

  npm run dev

• Production:

  npm run build
  npm run start

Development

Ststic assets

For both Storybook and Next.js the folder ./static is the root of static files.

Example & Validation

An example of ampreact can be seen here: https://ampreact-bngtmyroix.now.sh/

For proof of validation, either:

1. Append #development=1 to the URL and check the console for errors

2. Paste the page HTML into https://validator.ampproject.org/#url=https%3A%2F%2Fampreact-bngtmyroix.now.sh%2F

Deployment

Because ampreact is built on top of Next.js it is simple to deploy to Now or any other cloud infrastructure providers.