Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/KevxxAlva/tiktok-bot-downloader/llms.txt

Use this file to discover all available pages before exploring further.

TikTokSaver is structured as a monorepo with an Express API in api/ and a Vite-powered React frontend in client/. Vercel handles both layers seamlessly: the api/index.js file is exposed as a serverless function, while client/dist/ is served as static output. A single vercel.json at the repo root wires everything together with two rewrite rules, so no additional configuration is needed after the initial import.

​
How TikTokSaver maps to Vercel

Vercel’s Node.js serverless runtime expects a file that exports an Express (or compatible) app object. api/index.js satisfies this requirement with the final line: 
// Export for Vercel
module.exports = app;
The require.main === module guard above it ensures the built-in app.listen() call only fires when the file is run directly with Bun (local development), and is silently skipped when Vercel imports the module: 
// For local development
if (require.main === module) {
  app.listen(PORT, () => {
    console.log(`🚀 Server running on http://localhost:${PORT}`);
  });
}

// Export for Vercel
module.exports = app;
The compiled frontend assets in client/dist/ are served as Vercel’s static output, and the rewrite rules in vercel.json ensure that API requests reach the function while all other paths fall back to index.html for client-side routing.

​
The vercel.json configuration

The vercel.json at the repository root contains the complete routing and build configuration. No extra files or plugins are required. 
{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api/index.js" },
    { "source": "/(.*)", "destination": "/index.html" }
  ],
  "outputDirectory": "client/dist",
  "framework": "vite"
}
FieldValuePurpose
outputDirectoryclient/distTells Vercel where to find the compiled frontend assets
frameworkviteActivates Vercel’s Vite preset for build optimizations
First rewrite/api/(.*) → /api/index.jsForwards every /api/* request to the Express serverless function
Second rewrite/(.*) → /index.htmlReturns the SPA shell for all other routes, enabling React Router

​
Deploy to Vercel

The free Vercel Hobby tier is fully sufficient for personal use. TikTokSaver makes no persistent database connections and has no long-running processes, so it fits comfortably within the serverless execution limits.
1

Fork or clone the repository on GitHub

Push the project to your own GitHub account (or a GitLab / Bitbucket repository). Vercel requires a hosted Git remote to trigger deployments on every push.
git clone https://github.com/KevxxAlva/tiktok-bot-downloader.git
cd tiktok-bot-downloader
git remote set-url origin https://github.com/<your-username>/tiktok-bot-downloader.git
git push -u origin main
2

Import the project in Vercel

Open the Vercel dashboard, click Add New → Project, then select your repository from the list and click Import.
3

Set the Framework Preset to Vite

In the Configure Project screen, open the Framework Preset dropdown and select Vite. This matches the "framework": "vite" value in vercel.json and activates the correct build pipeline.
4

Set the Output Directory to client/dist

Under Build & Output Settings, set the Output Directory field to client/dist. This corresponds to the outputDirectory value in vercel.json and is where Vite writes compiled assets.
5

Set the Build Command

Set the Build Command to the root-level build script:
cd client && bun install && bun run build
This is the exact command defined in the root package.json:
{
  "scripts": {
    "build": "cd client && bun install && bun run build"
  }
}
The root package.json also exposes a bun run build convenience script that runs cd client && bun install && bun run build in one step. If you run builds locally before pushing, this is the fastest way to verify the production output before deployment.
6

Deploy

Click Deploy. Vercel will run the build command, collect the output from client/dist/, and apply the rewrite rules from vercel.json automatically. After the build completes, your project will be live at a *.vercel.app URL.Subsequent pushes to the default branch trigger automatic redeployments with zero additional configuration.

​
Environment variables

api/index.js loads environment variables via dotenv at startup: 
const dotenv = require('dotenv');
dotenv.config();

const PORT = process.env.PORT || 3000;
When running on Vercel, process.env.PORT is set automatically by the runtime — you do not need to configure it. For any other custom variables (for example, third-party API keys or feature flags), add them through the Vercel dashboard:
  1. Navigate to your project → Settings → Environment Variables.
  2. Add the key-value pair and select the target environments (Production, Preview, Development).
  3. Redeploy for the changes to take effect.

Vercel Environment Variables docs

Full reference for managing secrets and env vars across deployment environments.

Vercel Serverless Functions

Learn how Vercel’s Node.js runtime executes exported Express apps as serverless functions.

Build docs developers (and LLMs) love

Get started for freeTalk to us