How to Build a Video Streaming Backend with Replit

1// First, add to Replit Secrets (lock icon in sidebar):
2// MUX_TOKEN_ID = your_mux_token_id
3// MUX_TOKEN_SECRET = your_mux_token_secret
4// MUX_WEBHOOK_SECRET = your_mux_webhook_signing_secret
5
6// Then paste this into Replit Agent:
7// Build a video streaming backend with Express and PostgreSQL (Drizzle ORM).
8// Schema:
9// videos (id serial PK, creator_id text, title text, description text,
10// provider text enum mux/cloudflare/bunny, provider_asset_id text,
11// playback_url text, thumbnail_url text, duration_seconds integer,
12// status text default processing enum processing/ready/error,
13// visibility text default public enum public/unlisted/private,
14// view_count integer default 0, created_at),
15// playlists (id serial PK, creator_id text, name text, description text,
16// is_public bool default true, created_at),
17// playlist_videos (id serial PK, playlist_id int references playlists,
18// video_id int references videos, position int, UNIQUE playlist_id+video_id),
19// watch_history (id serial PK, user_id text, video_id int references videos,
20// progress_seconds int default 0, last_watched_at, UNIQUE user_id+video_id),
21// comments (id serial PK, video_id int references videos,
22// user_id text, content text, created_at).
23// Routes: POST /api/videos/upload (get pre-signed upload URL from Mux, create video row),
24// POST /api/webhooks/mux (verify Mux signature, update video status on completion),
25// GET /api/videos (list ready public videos), GET /api/videos/:id (detail, increment view_count),
26// PATCH /api/videos/:id (update title, description, visibility),
27// DELETE /api/videos/:id (delete from Mux + DB),
28// POST /api/playlists, POST /api/playlists/:id/videos,
29// GET /api/playlists/:id (ordered videos),
30// PATCH /api/videos/:id/progress (save watch position),
31// GET /api/videos/:id/comments, POST /api/videos/:id/comments.
32// Store MUX_TOKEN_ID, MUX_TOKEN_SECRET, MUX_WEBHOOK_SECRET in process.env.
33// React: video gallery grid, video player with Mux Player embed, creator dashboard.
34// Bind server to 0.0.0.0.

1// server/routes/upload.js
2const express = require('express');
3const Mux = require('@mux/mux-node');
4const { db } = require('../db');
5const { videos } = require('../schema');
6
7const mux = new Mux({
8  tokenId: process.env.MUX_TOKEN_ID,
9  tokenSecret: process.env.MUX_TOKEN_SECRET,
10});
11
12const router = express.Router();
13
14// Step 1: Client requests a pre-signed upload URL
15router.post('/api/videos/upload', express.json(), async (req, res) => {
16  const { title, description, visibility = 'public' } = req.body;
17  const creatorId = req.user.id;
18
19  try {
20    // Create a direct upload URL at Mux
21    const upload = await mux.video.uploads.create({
22      cors_origin: '*',  // restrict to your domain in production
23      new_asset_settings: {
24        playback_policy: [visibility === 'public' ? 'public' : 'signed'],
25        video_quality: 'basic',  // 'plus' for 1080p
26      },
27    });
28
29    // Create the video row in our DB with processing status
30    const [video] = await db.insert(videos).values({
31      creatorId,
32      title,
33      description,
34      provider: 'mux',
35      providerAssetId: upload.id,  // will be updated when asset is ready
36      status: 'processing',
37      visibility,
38    }).returning();
39
40    // Return both the Mux upload URL and our DB video ID
41    res.json({
42      videoId: video.id,
43      uploadUrl: upload.url,  // client uploads directly to this URL
44      uploadId: upload.id,
45    });
46  } catch (err) {
47    console.error('[upload] Mux error:', err.message);
48    res.status(500).json({ error: 'Failed to create upload URL' });
49  }
50});
51
52module.exports = router;

1// server/routes/webhook-mux.js
2const express = require('express');
3const Mux = require('@mux/mux-node');
4const { db } = require('../db');
5const { videos } = require('../schema');
6const { eq } = require('drizzle-orm');
7
8const mux = new Mux({
9  tokenId: process.env.MUX_TOKEN_ID,
10  tokenSecret: process.env.MUX_TOKEN_SECRET,
11});
12
13const router = express.Router();
14
15// IMPORTANT: mounted with express.raw() in server/index.js BEFORE express.json()
16router.post('/', async (req, res) => {
17  // Verify Mux webhook signature
18  const muxSignature = req.headers['mux-signature'];
19
20  try {
21    // Mux uses its own signature verification — NOT Stripe's constructEvent
22    mux.webhooks.verify(req.body, req.headers, process.env.MUX_WEBHOOK_SECRET);
23  } catch (err) {
24    console.error('[mux-webhook] signature failed:', err.message);
25    return res.status(401).send('Invalid signature');
26  }
27
28  const event = JSON.parse(req.body.toString());
29  console.log('[mux-webhook] event type:', event.type);
30
31  try {
32    switch (event.type) {
33      case 'video.asset.ready': {
34        const asset = event.data;
35        const playbackId = asset.playback_ids?.[0]?.id;
36        const playbackUrl = playbackId
37          ? `https://stream.mux.com/${playbackId}.m3u8`
38          : null;
39        const thumbnailUrl = playbackId
40          ? `https://image.mux.com/${playbackId}/thumbnail.jpg`
41          : null;
42
43        // Find video row by the Mux upload ID stored in provider_asset_id
44        await db.update(videos)
45          .set({
46            status: 'ready',
47            providerAssetId: asset.id,  // now the real asset ID
48            playbackUrl,
49            thumbnailUrl,
50            durationSeconds: Math.round(asset.duration ?? 0),
51          })
52          .where(eq(videos.providerAssetId, event.object?.id ?? asset.id));
53        break;
54      }
55      case 'video.asset.errored':
56        await db.update(videos)
57          .set({ status: 'error' })
58          .where(eq(videos.providerAssetId, event.data.id));
59        break;
60      case 'video.asset.deleted':
61        await db.update(videos)
62          .set({ status: 'error' })
63          .where(eq(videos.providerAssetId, event.data.id));
64        break;
65    }
66
67    res.json({ received: true });
68  } catch (err) {
69    console.error('[mux-webhook] handler error:', err);
70    res.status(500).send('handler error');
71  }
72});
73
74module.exports = router;

1// server/routes/watch.js
2const express = require('express');
3const { db } = require('../db');
4const { watchHistory, videos } = require('../schema');
5const { eq, and } = require('drizzle-orm');
6
7const router = express.Router();
8
9// PATCH /api/videos/:id/progress — save watch position
10router.patch('/api/videos/:id/progress', express.json(), async (req, res) => {
11  const videoId = parseInt(req.params.id);
12  const userId = req.user.id;
13  const { progressSeconds } = req.body;
14
15  await db.insert(watchHistory)
16    .values({
17      userId,
18      videoId,
19      progressSeconds,
20      lastWatchedAt: new Date(),
21    })
22    .onConflictDoUpdate({
23      target: [watchHistory.userId, watchHistory.videoId],
24      set: {
25        progressSeconds,
26        lastWatchedAt: new Date(),
27      },
28    });
29
30  res.json({ saved: true });
31});
32
33// GET /api/videos/:id — detail with view count increment
34router.get('/api/videos/:id', async (req, res) => {
35  const videoId = parseInt(req.params.id);
36  const userId = req.user?.id;
37
38  const [video] = await db.select().from(videos)
39    .where(eq(videos.id, videoId)).limit(1);
40
41  if (!video) return res.status(404).json({ error: 'Video not found' });
42  if (video.status !== 'ready') return res.status(404).json({ error: 'Video not available' });
43
44  // Increment view count asynchronously (don't await)
45  db.update(videos)
46    .set({ viewCount: db.sql`view_count + 1` })
47    .where(eq(videos.id, videoId))
48    .catch(() => {});
49
50  // Load user's watch progress if logged in
51  let progress = null;
52  if (userId) {
53    const [hist] = await db.select()
54      .from(watchHistory)
55      .where(and(eq(watchHistory.userId, userId), eq(watchHistory.videoId, videoId)))
56      .limit(1);
57    progress = hist?.progressSeconds ?? 0;
58  }
59
60  res.json({ ...video, resumeAt: progress });
61});
62
63module.exports = router;

1// Deployment checklist:
2// 1. In Replit's Publish pane, set deployment type to Reserved VM
3// 2. Add Deployment Secrets: MUX_TOKEN_ID, MUX_TOKEN_SECRET, MUX_WEBHOOK_SECRET
4//    (Workspace Secrets are NOT used in deployments)
5// 3. Deploy and copy your *.replit.app URL
6// 4. In Mux Dashboard → Settings → Webhooks → Add endpoint:
7//    URL: https://your-app.replit.app/api/webhooks/mux
8//    Events: video.asset.ready, video.asset.errored, video.asset.deleted
9// 5. Copy the signing secret and update MUX_WEBHOOK_SECRET in Deployment Secrets
10// 6. Redeploy to pick up the new secret
11
12// server/index.js — middleware ordering for webhooks
13const express = require('express');
14const app = express();
15
16// Webhook route FIRST with raw body parser
17const muxWebhook = require('./routes/webhook-mux');
18app.use('/api/webhooks/mux',
19  express.raw({ type: 'application/json' }),
20  muxWebhook
21);
22
23// JSON parser for all other routes
24app.use(express.json());
25
26const PORT = process.env.PORT || 3000;
27app.listen(PORT, '0.0.0.0', () => {
28  console.log(`Video streaming backend running on port ${PORT}`);
29});