-
-
- )
+
+ )
}
-export default Page
\ No newline at end of file
+export default Page
diff --git a/MyApp.Client/src/lib/auth.tsx b/MyApp.Client/src/lib/auth.tsx
index 234f95c..e02ee06 100644
--- a/MyApp.Client/src/lib/auth.tsx
+++ b/MyApp.Client/src/lib/auth.tsx
@@ -1,25 +1,37 @@
-import React, { useEffect } from "react"
-import { useNavigate, useLocation } from "react-router-dom"
-import { useAuth, Loading } from "@servicestack/react"
-import { client, Routes, isServerRoute } from "./gateway"
-import { Authenticate } from "@/lib/dtos"
+import React, { useEffect } from 'react'
+import { useNavigate, useLocation } from 'react-router-dom'
+import { useAuth, Loading } from '@servicestack/react'
+import { client, Routes, isServerRoute } from './gateway'
+import { Authenticate } from '@/lib/dtos'
export const Redirecting = () => {
- return
-
-
- {title}
- {children} + return ( + <> +
+
+
-
+
+
+
+ {title}
+ {children} +
- 
-
{user.displayName}
- {user.userName}
-
- {(user.roles || []).map(role =>
- {role})}
+ return (
+
+ Sign Out
-
- Identity Auth Account
-
-
- 🏠 Home
-
-
- )
+
+ )
}
-export default ValidateAuth(Profile)
\ No newline at end of file
+export default ValidateAuth(Profile)
diff --git a/MyApp.Client/src/styles/index.css b/MyApp.Client/src/styles/index.css
index f4796a8..d3f4317 100644
--- a/MyApp.Client/src/styles/index.css
+++ b/MyApp.Client/src/styles/index.css
@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
@source "../../node_modules/@servicestack/react/dist/servicestack-react.mjs";
@source "../../node_modules/react-net-templates/dist/index.js";
@@ -8,19 +8,19 @@
@layer base {
:root {
- --background: 0 0% 100%;
- --foreground: 222.2 84% 4.9%;
- --border: 214.3 31.8% 91.4%;
- --input: 214.3 31.8% 91.4%;
- --ring: 221.2 83.2% 53.3%;
- --radius: 0.5rem;
+ --background: 0 0% 100%;
+ --foreground: 222.2 84% 4.9%;
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+ --ring: 221.2 83.2% 53.3%;
+ --radius: 0.5rem;
}
:root.dark {
- --background: 222.2 84% 4.9%;
- --foreground: 210 40% 98%;
- --border: 217.2 32.6% 17.5%;
- --input: 217.2 32.6% 17.5%;
- --ring: 212.7 26.8% 83.9%;
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+ --border: 217.2 32.6% 17.5%;
+ --input: 217.2 32.6% 17.5%;
+ --ring: 212.7 26.8% 83.9%;
}
*,
@@ -28,22 +28,22 @@
::before,
::backdrop,
::file-selector-button {
- border-color: hsl(var(--border));
+ border-color: hsl(var(--border));
}
html {
- background-color: white;
- color: rgb(17 24 39); /* gray-900 */
+ background-color: white;
+ color: rgb(17 24 39); /* gray-900 */
}
html.dark {
- background-color: rgb(17 24 39); /* gray-900 */
- color: rgb(243 244 246); /* gray-100 */
+ background-color: rgb(17 24 39); /* gray-900 */
+ color: rgb(243 244 246); /* gray-100 */
}
body {
- background-color: inherit;
- color: inherit;
+ background-color: inherit;
+ color: inherit;
}
}
@@ -54,23 +54,33 @@
/* Write your own custom base styles here */
/* override element defaults */
-b, strong { font-weight:600; }
-[type='button'],button[type='submit'],button[href]{cursor:pointer}
+b,
+strong {
+ font-weight: 600;
+}
+[type='button'],
+button[type='submit'],
+button[href] {
+ cursor: pointer;
+}
/*typography*/
-.prose pre::-webkit-scrollbar, .prose code::-webkit-scrollbar {
+.prose pre::-webkit-scrollbar,
+.prose code::-webkit-scrollbar {
width: 8px;
height: 8px;
background: #2d3748;
}
-.prose pre::-webkit-scrollbar-thumb, .prose code::-webkit-scrollbar-thumb {
+.prose pre::-webkit-scrollbar-thumb,
+.prose code::-webkit-scrollbar-thumb {
background-color: rgb(100 116 139);
}
-code[class*=language-], pre[class*=language-] {
- background-color:#1f2937;
+code[class*='language-'],
+pre[class*='language-'] {
+ background-color: #1f2937;
min-width: fit-content;
}
-.dark .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *,pre code)) {
+.dark .prose :where(code):not(:where([class~='not-prose'], [class~='not-prose'] *, pre code)) {
background-color: #172554; /* blue-950 */
color: #e5e7eb; /* gray-200 */
}
@@ -78,8 +88,10 @@ code[class*=language-], pre[class*=language-] {
/* dark mode autocomplete fields */
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:focus {
- transition: background-color 600000s 0s, color 600000s 0s;
+ transition:
+ background-color 600000s 0s,
+ color 600000s 0s;
}
.dark input[data-autocompleted] {
background-color: transparent !important;
-}
\ No newline at end of file
+}
diff --git a/MyApp.Client/tsconfig.app.json b/MyApp.Client/tsconfig.app.json
index 522d3a7..6dffedc 100644
--- a/MyApp.Client/tsconfig.app.json
+++ b/MyApp.Client/tsconfig.app.json
@@ -15,9 +15,6 @@
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
-
- /* Path mapping */
- "baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
diff --git a/MyApp.Client/tsconfig.json b/MyApp.Client/tsconfig.json
index 1ffef60..d32ff68 100644
--- a/MyApp.Client/tsconfig.json
+++ b/MyApp.Client/tsconfig.json
@@ -1,7 +1,4 @@
{
"files": [],
- "references": [
- { "path": "./tsconfig.app.json" },
- { "path": "./tsconfig.node.json" }
- ]
+ "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
}
diff --git a/MyApp.Client/vite.config.ts b/MyApp.Client/vite.config.ts
index 572949d..44f1321 100644
--- a/MyApp.Client/vite.config.ts
+++ b/MyApp.Client/vite.config.ts
@@ -1,32 +1,34 @@
-import { defineConfig } from 'vite'
+import { defineConfig, lazyPlugins } from 'vite-plus'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import { fileURLToPath } from 'url'
-const target = process.env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${process.env.ASPNETCORE_HTTPS_PORT}` :
- process.env.ASPNETCORE_URLS ? process.env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:5001';
+const target = process.env.ASPNETCORE_HTTPS_PORT
+ ? `https://localhost:${process.env.ASPNETCORE_HTTPS_PORT}`
+ : process.env.ASPNETCORE_URLS
+ ? process.env.ASPNETCORE_URLS.split(';')[0]
+ : 'https://localhost:5001'
const isProd = process.env.NODE_ENV === 'production'
const buildLocal = process.env.MODE === 'local'
// Define DEPLOY_API first
-const DEPLOY_API = process.env.KAMAL_DEPLOY_HOST
- ? `https://${process.env.KAMAL_DEPLOY_HOST}`
- : target
+const DEPLOY_API = process.env.KAMAL_DEPLOY_HOST ? `https://${process.env.KAMAL_DEPLOY_HOST}` : target
// Now use it for API_URL
-const API_URL = isProd ? DEPLOY_API : (buildLocal ? '' : target)
+const API_URL = isProd ? DEPLOY_API : buildLocal ? '' : target
+
+// Generated by `npm run dtos`, never lint or format
+const generated = ['src/lib/dtos.ts']
export default defineConfig({
define: { apiBaseUrl: `"${API_URL}"` },
- plugins: [
- react(),
- tailwindcss(),
- ],
+ // lazyPlugins skips loading plugins for `vp check/lint/fmt`
+ plugins: lazyPlugins(() => [react(), tailwindcss()]),
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
- }
+ },
},
build: {
target: 'baseline-widely-available',
@@ -34,5 +36,59 @@ export default defineConfig({
server: {
host: true, // Listen on all interfaces (both IPv4 and IPv6)
open: false,
- }
+ },
+ test: {
+ environment: 'happy-dom',
+ include: ['src/**/*.test.{ts,tsx}'],
+ },
+ lint: {
+ ignorePatterns: ['dist/**', 'public/**', ...generated],
+ plugins: ['oxc', 'typescript', 'unicorn', 'react'],
+ categories: {
+ correctness: 'error', // ~ eslint:recommended
+ },
+ env: { browser: true, builtin: true },
+ rules: {
+ // typescript-eslint recommended
+ 'typescript/ban-ts-comment': 'error',
+ 'typescript/no-duplicate-enum-values': 'error',
+ 'typescript/no-empty-object-type': 'error',
+ 'typescript/no-explicit-any': 'error',
+ 'typescript/no-extra-non-null-assertion': 'error',
+ 'typescript/no-misused-new': 'error',
+ 'typescript/no-namespace': 'error',
+ 'typescript/no-non-null-asserted-optional-chain': 'error',
+ 'typescript/no-require-imports': 'error',
+ 'typescript/no-this-alias': 'error',
+ 'typescript/no-unnecessary-type-constraint': 'error',
+ 'typescript/no-unsafe-declaration-merging': 'error',
+ 'typescript/no-unsafe-function-type': 'error',
+ 'typescript/no-wrapper-object-types': 'error',
+ 'typescript/prefer-as-const': 'error',
+ 'typescript/prefer-namespace-keyword': 'error',
+ 'typescript/triple-slash-reference': 'error',
+ // eslint-plugin-react-hooks recommended
+ 'react/rules-of-hooks': 'error',
+ 'react/exhaustive-deps': 'warn',
+ // eslint-plugin-react-refresh
+ 'react/only-export-components': ['warn', { allowConstantExport: true }],
+ // new in Oxlint's correctness category, not in the previous ESLint config
+ 'typescript/no-floating-promises': 'warn',
+ 'react/purity': 'warn',
+ },
+ options: {
+ typeAware: true,
+ typeCheck: true, // replaces `tsc -b`
+ },
+ },
+ fmt: {
+ semi: false,
+ singleQuote: true,
+ tabWidth: 4,
+ printWidth: 160,
+ ignorePatterns: ['dist/**', 'public/**', ...generated],
+ overrides: [
+ { files: ['**/*.json'], options: { tabWidth: 2 } }, // match npm's package.json indent
+ ],
+ },
})
diff --git a/MyApp.code-workspace b/MyApp.code-workspace
new file mode 100644
index 0000000..d02512b
--- /dev/null
+++ b/MyApp.code-workspace
@@ -0,0 +1,32 @@
+{
+ // Open with: File > Open Workspace from File... (or `code MyApp.code-workspace`)
+ // MyApp.Client is its own root so the Oxc extension can resolve its local vite-plus
+ "folders": [
+ { "name": "MyApp", "path": "." },
+ { "name": "MyApp.Client", "path": "MyApp.Client" }
+ ],
+ "settings": {
+ // Shown as its own root, so hide the duplicate under MyApp
+ "files.exclude": { "MyApp.Client": true },
+
+ // Oxfmt + Oxlint via `vp fmt --lsp` / `vp lint --lsp`, using vite.config.ts
+ // Scoped to JS/TS so C# and Razor files keep their own formatters
+ "[javascript][javascriptreact][typescript][typescriptreact]": {
+ "editor.defaultFormatter": "oxc.oxc-vscode",
+ "editor.formatOnSave": true,
+ "editor.formatOnSaveMode": "file", // Oxfmt doesn't support partial formatting
+ "editor.codeActionsOnSave": { "source.fixAll.oxc": "explicit" }
+ },
+
+ // TypeScript 7 language server (TypeScriptTeam.native-preview)
+ "js/ts.experimental.useTsgo": true,
+ "js/ts.tsdk.path": "MyApp.Client/node_modules/typescript"
+ },
+ "extensions": {
+ "recommendations": [
+ "VoidZero.vite-plus-extension-pack", // Oxc + Vitest
+ "TypeScriptTeam.native-preview",
+ "ms-dotnettools.csdevkit"
+ ]
+ }
+}
diff --git a/README.md b/README.md
index d11ebbf..eed8974 100644
--- a/README.md
+++ b/README.md
@@ -54,9 +54,9 @@ dotnet watch
### Frontend
- **React 19** - A JavaScript library for building user interfaces
-- **Vite 7** - Next Generation Frontend Tooling
+- **Vite+** - Unified toolchain: Vite 8 (Rolldown), Vitest, Oxlint and Oxfmt via the `vp` CLI
- **Tailwind CSS v4** - CSS-first configuration with `@tailwindcss/vite` plugin
-- **TypeScript 5** - JavaScript with syntax for types
+- **TypeScript 5** - JavaScript with syntax for types, type checked by Oxlint (TypeScript Go)
- **Vitest** - Modern testing framework
- **ServiceStack React Components** - Pre-built UI components
@@ -123,14 +123,14 @@ dotnet watch
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── lib/
-│ │ │ ├── dtos.ts # Auto-generated TypeScript DTOs
+│ │ │ ├── dtos.ts # TypeScript DTOs, auto-generated on .NET App startup
│ │ │ ├── gateway.ts # ServiceStack API client
│ │ │ └── utils.ts # Utility functions
│ │ ├── styles/
│ │ │ └── index.css # Tailwind CSS styles
│ │ ├── App.tsx # Main App component
│ │ └── main.tsx # Application entry point
-│ ├── vite.config.ts # Vite configuration
+│ ├── vite.config.ts # Vite+ config (build, lint, fmt, test)
│ └── package.json # NPM dependencies
│
├── MyApp.ServiceInterface/ # Service implementations
@@ -156,13 +156,13 @@ dotnet watch
This automatically starts both .NET and Vite dev servers.
-### 2. Generate TypeScript DTOs
+### 2. TypeScript DTOs
-After modifying C# service models, regenerate TypeScript dtos.ts in `MyApp` or `MyApp.Client` with:
+TypeScript DTOs in `MyApp.Client/src/lib/dtos.ts` are generated automatically from your C# service models every time the .NET App starts.
+This is done by the `dtos` StartupTask in [Configure.StartupTasks.GenerateDtos.cs](MyApp/Configure.StartupTasks.GenerateDtos.cs).
+After modifying C# service models, restart the .NET App and the updated DTOs are ready to use.
-```bash
-npm run dtos
-```
+It's typically never needed, but DTOs can also be regenerated manually against a running .NET App with `npm run dtos` in `MyApp` or `MyApp.Client`.
### 3. Database Migrations
@@ -186,6 +186,16 @@ npm run test:ui # Run tests with UI
npm run test:run # Run tests once
```
+**Format, lint & type check:**
+```bash
+cd MyApp.Client
+npm run check # Format + lint + type check
+npm run fmt # Format files
+```
+
+The [Vite+](https://viteplus.dev) `vp` CLI is installed locally, so the npm scripts work without a global install.
+Install the optional global CLI (`curl -fsSL https://vite.plus | bash`) to run `vp` commands directly.
+
## Configuration
+
+
+ Sign Out
+
+
+ Identity Auth Account
+
+
+ 🏠 Home
+
- {user.displayName}
+ {user.userName}
+
+ {(user.roles || []).map((role) => (
+
+ {role}
+
+ ))}
+
+