PWA Template

A template for Next.js with PWA support and i18n.

Try the Demo: https://pwa-template.vercel.app/
User: Alex
Password: secret

100% Lighthouse score

Libraries
Personalize this template
Set up Vercel
- App
- Storybook
Setup Sentry
Getting started
Atomic design
Behavior Driven Development
Test Driven Development
Commitlint
Commands
Skipping linters

Libraries

Additional libraries:

Personalize this template

Adjust the information in pwa.config.mjs.

Adjust these files:

LICENSE
package.json

Set up Vercel

This project uses multiple Vercel deployments to make design/code reviews easier:

App Production
App Preview
Storybook Production
Storybook Preview

Please follow this guide:
https://vercel.com/docs/concepts/git

App

Follow the default setup for Next.js.

Storybook

Adjust the "Build and Output Settings":

BUILD COMMAND: yarn run storybook:build
OUTPUT DIRECTORY: ./storybook-static

Setup Sentry

Please look at the guide,
specially the
configuration
section.

Everything is already set up. You only need to add the correct environmental variables (See
.env.local.example).

To test the integration you can visit the
Sentry sample error page.

Getting started

Run the development server:

yarn run dev

Run storybook:

yarn run storybook

Atomic design

We use atomic design. You can read more about our decision in the
documentation.

Behavior Driven Development

We use behavior tests. You can read more about our decision in the
documentation.

Test Driven Development

We use jest to write unit tests. Please look at the Documentation for Jest and
testing-library.

Commitlint

We use commitlint to ensure conventional commit messages. You can read more about our decision in
the documentation.

Commands

Run the development server:

yarn run dev

Build:

yarn run build

Run storybook:

yarn run storybook

Build storybook:

yarn run storybook:build

Run cypress tests:

yarn run cypress # local without server
# yarn cypress:run # headless
# yarn test:cypress # with server

Run unit tests:

yarn run jest
# yarn jest:watch # watch
# yarn test:jest # same as "yarn jest"

Run all tests:

yarn run test

Run eslint

yarn run eslint

Run all linters

yarn run lint

Skipping linters

If you need to skip a linter you can add the --no-verify flag.

⚠️ Warning

We strongly advise against skipping linters.

# Skipping pre-commit hooks
git commit README.md -m "this is a dirty commit" --no-verify

pixelass/pwa-template