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

• Storybook
• Cypress
• Sentry
• Jest
• Commitlint
• Eslint
• Prettier

Additional libraries:

• MUI
• i18next (via next-i18next)
• Next Auth
• React Hook Form
• Zustand

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