admin-console-template

My boilerplate for admin console

Set up

volta

• install volta
  • see: https://docs.volta.sh/guide/getting-started

# if your unix user
curl https://get.volta.sh | bash

pnpm

• install pnpm

volta install pnpm

direnv

• install direnv
  • see: https://github.com/direnv/direnv/blob/master/docs/installation.md

# if you use mac
brew install direnv

• allow direnv

cp .sample.env .env \
direnv allow .

playwright

npx playwright install

node_modules

pnpm install

optional: install vscode extensions

if you use vscode, you can install extensions below.

• ESlint
  • https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• Prettier
  • https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Run Server

• dev server

  • run pnpm dev
    • dev server is running by turbopack

• docker compose

  • run pnpm run
    • container is build and run by docker compose
      • WARNING: is not run hot reload
        • can check build available

GraphQL

generate by schema

• graphql-codegen create typescript code by graphql schema.
  • to generate, run pnpm codegen

Test

• run pnpm test:unit

  • use vitest for unit test
    • vitest read src/*.test.ts, and run unit test.

• run pnpm test:e2e

  • use playwright for e2e test
    • playwright read e2e/*.spec.ts, and run e2e test.

Styling

• Chakra UI
  • see: https://chakra-ui.com//
  • Chakra UI is not support RSC(Rect Server Component)
  • so, when render Chakra UI component, you need to RCC(React Client Component)
    • see: https://chakra-ui.com/getting-started/nextjs-guide#app-directory-setup
  • Chakra UI Template help you
    • see: https://chakra-templates.dev/