First thing to do

The things you have to do after creating a repository based on this template are as follows:

• Change name in package.json to the name of your application
• Change repository in package.json to the newly created repository
  • This property is used for link in footer in default.
• Change homepage in package.json to your application name
  • This property is used for root path of application in default.
  • This should be the same as urlPrefix in App Catalog if you want to register your application to dataware-tools

Getting started

First, install all dependencies.

npm install
# or
yarn install

If you want to change Auth0's configurations (i.e., client-id, domain, etc.), you need to set the following environment variables:

• NEXT_PUBLIC_DATAWARE_TOOLS_AUTH_CONFIG_DOMAIN: Domain (default: dataware-tools.us.auth0.com)
• NEXT_PUBLIC_DATAWARE_TOOLS_AUTH_CONFIG_CLIENT_ID: Client ID (default: the one for the demo page)
• NEXT_PUBLIC_DATAWARE_TOOLS_AUTH_CONFIG_API_URL: API URL (default: https://demo.dataware-tools.com/)

Next, run the development server:

npm run dev
# or
yarn dev

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

(If you configured homepage property of package.json to app-template-nextjs , you should open http://localhost:3000/app-template-nextjs)

You can start editing the page by modifying pages/*.tsx, components/*.tsx. The page auto-updates as you edit the file.

Run in docker container

How to build docker-image

$ export DOCKER_BUILDKIT=1
$ docker build -t app:latest --secret id=npmrc,src=${HOME}/.npmrc .

On MacOS or Linux, you may have to run the following commands before building the image.

$ ssh-add

How to run docker-container

After success of building image

$ docker-compose up

Npm scripts

• dev: Start development server.

• test: Run all test process, including linting source code.

• lint: Lint all source code.

• format: Format all source code.

Major library introduction

Production

• Next.js

  React Framework. No complex config needed, but extendable.

• Material-UI

  React components library. Simple and customizable, and make site accessible.

• SWR

  React data fetching library. Easy to caching data.

• React Router

  Navigation components library for React.

• Recoil

  State management library for React.

• immer

  Library for working with immutable state in a more convenient way.

• auth0-react

  Auth0 React SDK.

Development

• Storybook

  Dev tool for documenting, visual testing UI.

  (* japanese introduction available)

• Loki

  Visual regression test tool for Storybook

• Jest

  JavaScript Testing Framework with a focus on simplicity.

• Testing Library

  Library for testing UI components in a user-centric way.

• MSW

  API mocking library intercepting actual requests, by using Service Worker.

• prettier

  Opinionated code formatter for JS, JSX, TS, JSON, etc.

• eslint

  High customizable linter for JS/altJS.

• stylelint

  High customizable linter for CSS/Sass/CSSinJS.

Recommended CLI tools

• volta

  JavaScript tool manager like nvm, n

Note

• This template is intend to use for Single Page Application. So if you want create SSR, or SSG application, you should change some config of this template

TODOs

• Add container for development
• Add .devcontainer.json example for supporting vscode remote container