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.

This guide walks you through cloning TikTokSaver and running both the Express backend and the React frontend on your local machine. The entire setup takes under five minutes and requires no environment variables for basic usage — you only need Bun installed.

Prerequisites

ToolVersionNotes
Bunv1.0+Required. Used as both the package manager and the runtime for the API server.
Node.jsAny LTSOptional. The project is fully compatible with a standard Node.js environment, but all documented commands use Bun.
GitAnyRequired to clone the repository.
Running TikTokSaver locally requires two terminal windows open simultaneously — one for the backend API server and one for the frontend Vite dev server. Keep both running while you use the application.

Setup Steps

1

Clone the repository

Clone the project from GitHub and move into the project root:
git clone https://github.com/KevxxAlva/tiktok-bot-downloader.git
cd tiktok-bot-downloader
2

Install API dependencies

The api/ directory is an independent Node.js package. Install its dependencies with Bun:
cd api && bun install
This installs Express, CORS, dotenv, and @tobyg74/tiktok-api-dl as listed in api/package.json.
3

Install client dependencies

From the project root, move into the client/ directory and install the frontend dependencies:
cd ../client && bun install
This installs React 19, Vite 7, Tailwind CSS v4, Framer Motion, Axios, and the rest of the frontend dependencies declared in client/package.json.
4

Start the backend server

In your first terminal, start the Express API server:
cd api && bun start
The server starts on port 3000. You should see:
🚀 Server running on http://localhost:3000
Leave this terminal running.
5

Start the frontend dev server

In your second terminal, start the Vite development server:
cd client && bun dev
Vite starts on port 5173. You should see output similar to:
VITE v7.x.x  ready in Xms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
Leave this terminal running alongside the first.
6

Open the application

Navigate to http://localhost:5173 in your browser. You will see the TikTokSaver interface with a URL input field and the REVELAR CONTENIDO button.

Install Commands at a Glance

cd api && bun install

Root-Level Convenience Scripts

The root package.json provides shorthand scripts so you can manage both workspaces without cd-ing into subdirectories:
{
  "scripts": {
    "install-server": "cd api && bun install",
    "install-client": "cd client && bun install",
    "dev:server":     "cd api && bun index.js",
    "dev:client":     "cd client && bun run dev",
    "build-client":   "cd client && bun run build",
    "build":          "cd client && bun install && bun run build"
  }
}
Run them from the repository root with bun run <script-name>, for example:
bun run dev:server   # starts the API on port 3000
bun run dev:client   # starts Vite on port 5173
Open two terminal tabs or split your terminal pane before running the servers. Both processes must stay alive at the same time — shutting one down will break the other’s ability to fetch or serve content.

How the Frontend Proxies API Calls

During development, all requests the React app makes to /api/* are automatically forwarded to the backend by Vite’s built-in dev proxy. This is configured in client/vite.config.ts:
export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        secure: false,
      }
    }
  }
})
This means axios.get('/api/download?url=...') in the browser transparently hits http://localhost:3000/api/download?url=... without any CORS issues or hardcoded URLs. In production (Vercel), the same /api/* path pattern is handled by vercel.json rewrites that route requests to the serverless function at api/index.js.

Downloading Your First Video

Once both servers are running and you have the app open in your browser:
  1. Copy a TikTok URL — any of the following formats work:
    https://vm.tiktok.com/ZMe7...
    https://www.tiktok.com/@usuario/video/123456789...
    https://m.tiktok.com/v/123456789.html
    
  2. Paste it into the input field labelled PEGA EL ENLACE DE TIKTOK AQUÍ...
  3. Click “REVELAR CONTENIDO” — the button triggers a GET /api/download request with the URL encoded as a query parameter.
  4. Choose a download option — the result panel displays the available options based on the content type:
    • Sin Marca — watermark-free H.264 MP4 video
    • Con Marca (HD) — original watermarked version with HD quality
    • Audio MP3 — extracted audio track
    • Slideshow images — individual image files (for photo posts only)
  5. Click any option to trigger a proxied download through /api/proxy-download, which streams the file directly to your browser with a sanitized filename.
If a URL was just generated (e.g. a fresh share link from the TikTok app), the TikWM API may take a few seconds to index it. If you receive an error on the first attempt, wait a moment and try again.

Build docs developers (and LLMs) love