Category: Code

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/.

1. Update package.json

{
  "name": "yourdirectory-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"
  }
}

2. Install Dependencies

cd C:\Coding\yourdirectory
npm install

3. Create / Update vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  base: '/yourdirectory/',
  plugins: [react()],
})

4. Verify in Development

npm run dev

Open http://localhost:5173 in your browser. Your app should load and hot-reload.

5. Build for Production

npm run build

You’ll get a dist/ folder:

dist/
├── index.html
└── assets/

6. Upload to Your Server under /yourdirectory

Your server’s web root is live/. Inside it, create/open the yourdirectory folder:

live/
└── yourdirectory/
    ├── index.html
    └── assets/

A. Using File Manager

1. Log in → File Manager → navigate to live/yourdirectory (create it if needed).
2. Delete any old files in live/yourdirectory.
3. Upload all files from your local dist/ into live/yourdirectory.

B. Using FTP/SFTP

1. Connect and cd live/yourdirectory.
2. Remove or overwrite existing contents.
3. Upload the contents of your local dist/ folder there.

7. Add SPA Fallback with .htaccess

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

  # If request matches a real file/dir, serve it
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]

  # Otherwise, serve index.html
  RewriteRule . index.html [L]
</IfModule>

8. Final Smoke Test

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