New deployment

How to Deploy Your Vite/React App to /live9/

Follow these steps to build and upload your app so that all URLs resolve under /live9/ on your server.

1. Update vite.config.ts

Set the base option to '/live9/' so asset URLs are prefixed correctly:

import path from 'path';
import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, '.', '');

  return {
    base: '/live9/',                // ← here
    define: {
      'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
      'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, '.'),
      }
    }
  };
});

2. Check Your package.json

No changes are required here for the deploy path—just ensure your dependencies and devDependencies are correct. A typical React 18 setup looks like:

{
  "name": "live-transcribe-ai",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "@types/node": "^22.14.0",
    "typescript": "~5.7.2",
    "vite": "^6.2.0"
  }
}

3. Install & Build

1. cd C:\Coding\live9
2. npm install – installs dependencies (including Vite).
3. npm run build – generates your dist/ folder, with all URLs prefixed by /live9/.

4. Upload to Your Server

Move the contents of your dist/ into the server folder live/live9:

1. File Manager:
   • Navigate to live/live9 (create it if missing).
   • Delete old files.
   • Upload everything from your local dist/.
2. FTP/SFTP:

   # on your local machine
   cd dist
   # in your FTP/SFTP session
   cd /path/to/live/live9
   rm -rf *
   put *

5. Configure .htaccess for SPA Fallback

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /live9/

  # Serve real files or directories directly
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]

  # Otherwise, redirect all to index.html
  RewriteRule . index.html [L]
</IfModule>

6. Final Smoke Test

1. Visit https://yourdomain.com/live9/ → your app’s homepage should load.
2. Visit https://yourdomain.com/live9/any-route → React router should handle it (no 404).

That’s it! Your Vite/React SPA is now live under /live9/.