Added Vite section to home page

Author: willwillis

src/App.jsx

@@ -192,6 +192,134 @@ function App() {
           <CodeBlock code={serverCode} language="javascript" />
         </Paragraph>
 
+        <Title level={3}>Subsequent Migration to Vite</Title>
+        <Paragraph>
+          After initially building this site with Create React App (CRA), I migrated it to <a href="https://vite.dev">Vite</a> for better performance, modern tooling, and to eliminate security vulnerabilities found in CRA's dependencies.
+        </Paragraph>
+
+        <Paragraph>
+          <strong>Why migrate from CRA to Vite?</strong>
+          <ul style={{ margin: "1.5em", lineHeight: "1.8" }}>
+            <li><strong>Security:</strong> CRA is no longer maintained and had 9 vulnerabilities in dependencies</li>
+            <li><strong>Performance:</strong> Vite dev server starts in ~100ms vs CRA's 2000ms+</li>
+            <li><strong>Modern tooling:</strong> ES modules, better tree-shaking, Hot Module Replacement</li>
+            <li><strong>Active development:</strong> Vite is actively maintained with regular updates</li>
+          </ul>
+        </Paragraph>
+
+        <Title level={4}>Migration Process</Title>
+        <Paragraph>
+          The migration involved several key steps to transition from CRA's webpack-based build system to Vite's modern ESBuild-powered toolchain:
+        </Paragraph>
+
+        <Paragraph>
+          <strong>1. Dependency Management:</strong><br/>
+          Removed all CRA-specific packages and installed Vite:
+          <CodeBlock code={`# Remove CRA dependencies
+npm uninstall react-scripts @testing-library/jest-dom @testing-library/react @testing-library/user-event web-vitals
+
+# Install Vite and React plugin
+npm install --save-dev vite @vitejs/plugin-react`} language="bash" />
+        </Paragraph>
+
+        <Paragraph>
+          <strong>2. Configuration Setup:</strong><br/>
+          Created a <code>vite.config.js</code> to handle JSX in .js files and maintain the same build output structure:
+          <CodeBlock code={`import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react({
+    include: "**/*.{jsx,js}"
+  })],
+  server: {
+    port: 3000,
+    open: true
+  },
+  build: {
+    outDir: 'build' // Keep same output directory for compatibility
+  },
+  esbuild: {
+    loader: 'jsx',
+    include: /src\/.*\.(jsx?|tsx?)$/,
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      loader: {
+        '.js': 'jsx'
+      }
+    }
+  }
+})`} language="javascript" />
+        </Paragraph>
+
+        <Paragraph>
+          <strong>3. HTML Template Migration:</strong><br/>
+          Moved <code>public/index.html</code> to the project root and updated it for Vite's module system:
+          <CodeBlock code={`<!-- Updated for Vite -->
+<script type="module" src="/src/index.jsx"></script>
+
+<!-- Replaced CRA's %PUBLIC_URL% tokens with direct paths -->
+<link rel="icon" href="/favicon.ico" />
+<link rel="manifest" href="/manifest.json" />`} language="html" />
+        </Paragraph>
+
+        <Paragraph>
+          <strong>4. File Extensions and Imports:</strong><br/>
+          Renamed JavaScript files containing JSX to use .jsx extensions for proper Vite handling:
+          <CodeBlock code={`# Renamed files for proper JSX recognition
+mv src/index.js src/index.jsx
+mv src/App.js src/App.jsx
+mv src/components/CodeBlock.js src/components/CodeBlock.jsx
+
+# Updated import statements to include .jsx extension
+import App from './App.jsx';
+import CodeBlock from './components/CodeBlock.jsx';`} language="bash" />
+        </Paragraph>
+
+        <Paragraph>
+          <strong>5. Package.json Scripts:</strong><br/>
+          Updated npm scripts to use Vite commands while maintaining compatibility:
+          <CodeBlock code={`{
+  "scripts": {
+    "dev": "vite",           // New: Fast development server
+    "build": "vite build",   // Same command, different tool
+    "preview": "vite preview", // New: Preview production build
+    "start": "vite"          // Alias for convenience
+  }
+}`} language="json" />
+        </Paragraph>
+
+        <Paragraph>
+          <strong>6. Cleanup and Testing:</strong><br/>
+          Removed unused CRA-specific files and ensured full compatibility:
+          <CodeBlock code={`# Removed unused files
+rm src/reportWebVitals.js
+
+# Removed web-vitals import from index.jsx
+# Updated antd CSS import path for Vite compatibility
+
+# Testing commands
+npm run dev    # Fast development server
+npm run build  # Production build (same output location)
+npm run preview # Test production build locally`} language="bash" />
+        </Paragraph>
+
+        <Paragraph>
+          <strong>Deployment Compatibility:</strong><br/>
+          The migration was designed to be completely transparent to the existing deployment pipeline. The GitHub Actions workflow, server.js file, and FTP deployment process required <em>zero changes</em> because:
+          <ul style={{ margin: "1.5em", lineHeight: "1.8" }}>
+            <li>Vite outputs to the same <code>./build/</code> directory</li>
+            <li><code>npm run build</code> command remains identical</li>
+            <li>Generated static files are served the same way by Express.js</li>
+            <li>React Router handling in server.js works unchanged</li>
+          </ul>
+        </Paragraph>
+
+        <Paragraph>
+          <strong>Results:</strong> Zero security vulnerabilities, 20x faster development builds, modern tooling, and a completely seamless deployment process. The migration eliminated all technical debt from the unmaintained CRA while maintaining 100% functionality and deployment compatibility.
+        </Paragraph>
+
         <Divider />
 
         {/* About Me Section */}