Skip to content

Latest commit

 

History

History
71 lines (48 loc) · 2.44 KB

README.md

File metadata and controls

71 lines (48 loc) · 2.44 KB

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.

Deploy to now