React + Viteの初期設定

Vite

mkdir example/app
cd example/app
yarn create vite

• Project name: … front
• Select a framework: › React
• Select a variant: › TypeScript + SWC

EditorConfig

.editorconfig

# https://editorconfig.org

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

Rome

yarn add rome --save-dev
yarn rome init

app/front/rome.json

{
  "$schema": "./node_modules/rome/configuration_schema.json",
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "indentStyle": "space"
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "asNeeded"
    }
  }
}

app/front/package.json

"scripts": {
  "ci": "rome ci ."
}

VSCode

app/front/.vscode/settings.json

{
    "typescript.enablePromptUseWorkspaceTsdk": true,
    "typescript.tsdk": "./node_modules/typescript/lib",
    "editor.minimap.autohide": true,
    "editor.defaultFormatter": "rome.rome",
    "editor.formatOnSave": true
}

app/front/.vscode/extensions.json

{
    "recommendations": [
        "rome.rome",
        "ms-ceintl.vscode-language-pack-ja",
        "editorconfig.editorconfig"
    ]
}

GitHub Actions

.github/workflows/front-ci.yaml

name: front-ci
on: push
defaults:
  run:
    working-directory: ./app/front
jobs:
  front_build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: yarn install
      - run: yarn build
  front_lint_format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: yarn install
      - run: yarn ci

GitHub

app/front/.gitignore

!.vscode/settings.json

• GitHubにpush

Branch protection rules

• Branch name pattern
  • main
• Protect matching branches
  • Require a pull request before merging：ON
  • Require status checks to pass before merging：ON
    • Require branches to be up to date before merging：ON
    • Status checks that are required.
      • front_build
      • front_lint_format
  • Do not allow bypassing the above settings：ON

Vercel

• Import Git Repository
• Root Directory
  • app/front
• Deploy

Mantine

yarn add @mantine/core @mantine/hooks @emotion/react

React Router

yarn add react-router-dom

SWR

yarn add swr