Skip to content

pixelass/pwa-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

93 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PWA Template

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

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

next logopwa logo

100% Lighthouse score

next logo

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

Vercel Storybook settings

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