To PWA and beyond

This page will describe how to start from a bare Next.js application and turn it into a full PWA.

The goal is to use this document to eventually automate the process.

Starting point

We started from the Polymer 3 landing page.

Create a new branch from master

git checkout master
git pull
git checkout -b nextjs

Delete all Polymer 3 files

rm -fr images/ package* polymer.json src test/ index.html

You're left with the bare minimum:

.
├── .git
├── .gitignore
├── .mergify.yml
├── LICENSE
├── README.md
├── favicon.ico
└── manifest.json

Start the ReactJS app with Next.js

NPM init

Generate the package.json file using npm init:

{
  "name": "landing-page",
  "version": "2.0.0",
  "description": "Request Yo Racks",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/request-yo-racks/landing-page.git"
  },
  "keywords": [
    "bike",
    "racks",
    "parking",
    "ryr"
  ],
  "author": "The RYR team",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/request-yo-racks/landing-page/issues"
  },
  "homepage": "https://github.com/request-yo-racks/landing-page#readme"
}

Setup Next.js

Install Next.js and React

npm install --save next react react-dom

Update the scripts section of the package.json file with the Next.js commands:

"dev": "next",
"build": "next build",
"start": "next start"

Prepare the index page

Prepare the static content:

mkdir -p pages static/images/logos
cd static/images/logos
curl -sO https://raw.githubusercontent.com/request-yo-racks/landing-page/master/images/logos/ryr_logo_64x64.png

Create the ./pages/index.js file with the following content:

export default () =>
  <div>
    <div className="navbar">
      <img className="logo" src="/static/images/logos/ryr_logo_64x64.png" alt="RYR logo" />
      <h1>Request Yo Racks</h1>
    </div>
    <style jsx>{`
        h1 {
            color: #B35C22;
            display: inline-block;
            margin-left: 10px;

        }

        .navbar > * {
            vertical-align: middle;
        }
        `}
    </style>
  </div>

Test the setup

Run npm run dev, and go to http://localhost:3000.

Evaluate

• Open the index page in Google Chrome, open the DevTools, and go to the Audits tab.
• Check all the checkboxes in the Audits section
• Run the audits

We end up with the following scores:

Performance	Progressive Web App	Accessibility	Best Practices	SEO
10	12	76	93	56

We are going to improve each category to aim for a score greater than 90 in each category.

1. Best Practices 🚧 (93)
2. Accessibility 💯
3. SEO 💯
4. Progressive Web App 🚧 (77)
5. Performance 🚧 (97 after static export)