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 basePath in package.json and rewrites.destination in serve.json to your application name
  • This property is used for root path of application in default.

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:

• DATAWARE_TOOLS_AUTH_CONFIG_DOMAIN: Domain of Auth0 (default: dataware-tools.us.auth0.com)
• DATAWARE_TOOLS_AUTH_CONFIG_CLIENT_ID: Client ID of Auth0 (default: the one for the demo page)
• DATAWARE_TOOLS_AUTH_CONFIG_API_URL: Audience of Auth0 (default: https://demo.dataware-tools.com/)
• DATAWARE_TOOLS_BACKEND_API_PREFIX: Backend api url (default: /api/latest)

Next, run the development server:

npm run dev
# or
yarn dev

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

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

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 .

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

• Vite

  Build tool that aims to provide a faster and leaner development experience for modern web projects.

• 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