Narr's Next.js starter

Getting Started

Install

# Install npm modules
yarn
# Install docker image for visual test
# Prerequisite - Docker
yarn test:visual:install

Run

First, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/pages/test/index.tsx. The page auto-updates as you edit the file.

Second, run tests:

yarn storybook
yarn test

It will open Cypress for Unit tests and E2E tests.

Third, run visual regression tests:

# https://loki.js.org/command-line-arguments.html#loki-test

# to test all stories
yarn storybook
# Make sure that Docker is running before executing test
yarn test:visual

# to use regular expression for stories to test
# Below will only test stories whose name has the string, 'card'
yarn test:visual:filter card

Build

Run the development server with build files:

yarn build
yarn start

Open http://localhost:3001 with your browser to see the result.

Webpack Bundle Analyzer

Analyze build bundle:

yarn build:analyze

Static HTML Export

yarn build allows you to export your app to static HTML, which can be run standalone without the need of a Node.js server. By default, it will be exported to PROJECT ROOT FOLDER/out

Demo

root
test