feat: react/vite/tailwind web scaffold with jsdom tests

2026-08-29 19:26:10 +02:00
parent 26609d8b62
commit 63e8c5f054
11 changed files with 2395 additions and 7 deletions
--- a/web/index.html
+++ b/web/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#0a0a0a" />
+    <title>record-shop</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -0,0 +1,7 @@
+export default function App() {
+  return (
+    <div className="min-h-dvh bg-neutral-950 text-neutral-100 flex items-center justify-center">
+      <h1 className="text-2xl font-semibold">record-shop</h1>
+    </div>
+  )
+}
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './styles.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
--- a/web/test/setup.ts
+++ b/web/test/setup.ts
@@ -0,0 +1,6 @@
+import { afterEach } from 'vitest'
+import { cleanup } from '@testing-library/react'
+
+afterEach(() => {
+  cleanup()
+})
--- a/web/test/smoke.test.tsx
+++ b/web/test/smoke.test.tsx
@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import App from '../src/App'
+
+describe('App', () => {
+  it('renders the app title', () => {
+    render(<App />)
+    expect(screen.getByRole('heading', { name: 'record-shop' })).toBeTruthy()
+  })
+})
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "test", "vite.config.ts"]
+}
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  root: import.meta.dirname,
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3000',
+      '/artwork': 'http://localhost:3000',
+    },
+  },
+  build: {
+    outDir: 'dist',
+  },
+})