NET8 ReactApp 範本

NET8 + React.v18 with TypeScript 範本, React and ASP.NET Core, useFormHook,

引言

NET8 + React.v18 with TypeScript Web API + Swagger + Rin + healthz + Cookie Authentication + Reinforced.Typings React + vite + Jotai + ~~Redux~~ + React Router + Material UI + SweetAlert2 + date-fns + React Hook Form

起始專案：React and ASP.NET Core IDE: Visual Studio 2022 Lang: C# 12, TypeScript

後台規格

ASP.NET Core 8.0 Web API
加掛 Swashbuckle/Swagger: 生成 Swagger UI。開發期間有效。
加掛 Rin: Request/response Inspector。檢驗封包內容與預期是否相同。開發期間有效。
加掛 healthz: 自主健康檢查。
加掛 Reinforced.Typings/DTO Transformer: C# DTO to TypeScript。
認證方法：Cookie 為預設，JwtBearer 為選項。
啟用 GDPR 政策檢查(GDPR Consent)
登入程序中加入客製 XSRF Token 驗證。

前台規格

各主要模組職責:

React: 前端核心。
vite: 建構工具(build tool)與開發伺服器(dev server)。
Redux Toolkit: 前端 data store。
React Router: page routing。
Material UI: CSS framework。
SweetAlert2: message box，雖然 @MUI 也有不過就是不好用。
date-fns: 日期運算(無言啊)。
React Hook Form: 表單輸入檢驗(form input validation)，有 required、min、max、regex 等等。
Fetch API: 不管用那套通訊指令都要再包裝二、三層來做成高階通訊指令，綜合評估後原生的 fetch 指令分數最高。

vite 組態

主要組態檔vite.config.ts。大體上用起始專案 React and ASP.NET Core 給的組態就行了。此設定啟用了 proxy 另建開發伺服器(dev server) port:5173，好處是熱重載與後端無關會很順。其中 api 預設只開通'^/weatherforecast' 將它改成 '^/api/(\w+)' (RegEx 語法)這樣其他 web api 才會通。

vite.config.ts

// [...略...]
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [plugin()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      //'^/weatherforecast': {  //------ 預設只開通 weatherforecast API。
      '^/api/(\\w+)': {         //------ 改成 api 開頭的API都能通過proxy。
        target: 'https://localhost:7144/',
        secure: false
      }
    },
    port: 5173,
    https: {
      key: fs.readFileSync(keyFilePath),
      cert: fs.readFileSync(certFilePath),
    }
  }
})