Migrate Conduit (Angular) to React 18 + Vite in react-app/

.github/workflows/playwright.yml

@@ -22,6 +22,9 @@ jobs:
     - name: Install dependencies
       run: bun install
 
+    - name: Install React app dependencies
+      run: cd react-app && bun install
+
     - name: Install Playwright Browsers
       run: bunx playwright install --with-deps chromium
 

.github/workflows/react.yml

@@ -0,0 +1,35 @@
+name: React App
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  build-lint-test:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: react-app
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Lint
+        run: bun run lint
+
+      - name: Unit tests
+        run: bun run test
+
+      - name: Build
+        run: bun run build

.github/workflows/security-tests.yml

@@ -22,6 +22,9 @@ jobs:
     - name: Install dependencies
       run: bun install
 
+    - name: Install React app dependencies
+      run: cd react-app && bun install
+
     - name: Install Playwright Browsers
       run: bunx playwright install --with-deps chromium
 

README.md

@@ -27,6 +27,21 @@ Run `bun run setup` again after a `git pull` that updates the `realworld` submod
 
 Run `bun run build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
+## React migration (`react-app/`)
+
+This repository also contains a 1:1 port of the Conduit app to **React 18 + TypeScript + Vite**, located in [`react-app/`](./react-app). It preserves the exact same routes, the custom Conduit theme, and the external RealWorld API contract. The Angular source remains in place during the migration.
+
+```bash
+cd react-app
+bun install
+bun run dev          # Dev server at http://localhost:4200
+bun run build        # Type-check + production build to react-app/dist
+bun run lint         # ESLint (zero warnings)
+bun run test         # Unit tests (Vitest)
+```
+
+End-to-end Playwright tests (in the repo-root `e2e/` suite) run against the React app — the root `playwright.config.ts` boots `react-app` on port 4200.
+
 ## Functionality overview
 
 The example application is a social blogging site (i.e. a Medium.com clone) called "Conduit". It uses a custom API for all requests, including authentication. You can view a live demo over at [demo.realworld.show](https://demo.realworld.show)

playwright.config.ts

@@ -2,8 +2,8 @@ import { defineConfig } from '@playwright/test';
 import { baseConfig } from './e2e/playwright.base';
 
 /**
- * Angular-specific Playwright configuration.
- * Extends the shared RealWorld base config with the Angular dev server.
+ * Playwright configuration for the migrated React + Vite app.
+ * Extends the shared RealWorld base config with the React dev server.
  */
 export default defineConfig({
   ...baseConfig,
@@ -14,7 +14,8 @@ export default defineConfig({
   },
 
   webServer: {
-    command: 'npm run start',
+    command: 'bun run dev',
+    cwd: 'react-app',
     url: 'http://localhost:4200',
     reuseExistingServer: !process.env.CI,
     timeout: 120_000,

react-app/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+*.tsbuildinfo
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Vitest / coverage
+coverage

react-app/eslint.config.js

@@ -0,0 +1,25 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    },
+  },
+);

react-app/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Conduit</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link
+      href="//fonts.googleapis.com/css?family=Titillium+Web:700|Lora:400,400italic,700,700italic|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic"
+      rel="stylesheet"
+      type="text/css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

react-app/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "react-conduit",
+  "version": "0.0.0",
+  "license": "MIT",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "engines": {
+    "node": ">=20.11.1"
+  },
+  "dependencies": {
+    "dompurify": "^3.2.4",
+    "marked": "^17.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.18.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.18.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "jsdom": "^25.0.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.21.0",
+    "vite": "^6.0.7",
+    "vitest": "^2.1.8"
+  }
+}

react-app/public/_redirects

@@ -0,0 +1 @@
+/*  /index.html 200