Deploying a web transcription app

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