app-data-browser-next

Web-application for browsing data in 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:

• 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/)
• BACKEND_API_PREFIX: Backend api url prefix(default: /api/latest)

Next, run the development server:

npm run dev
# or
yarn dev

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

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 --ssh default --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

$ dc 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 for modern front end application aiming to provide a fast development experience.

• 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.