Skip to content
This repository has been archived by the owner on Jun 9, 2022. It is now read-only.

Latest commit

 

History

History
159 lines (93 loc) · 4.43 KB

README.md

File metadata and controls

159 lines (93 loc) · 4.43 KB
Raw

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