Set up video streaming website with Bunny.net CDN integration
Initialize project structure with UI components, CDN video display, and configurations. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 50814a1e-92e4-4968-856f-7bc7eedf5e8f Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/50814a1e-92e4-4968-856f-7bc7eedf5e8f/uoltFyL
This commit is contained in:
sebastjanartic
@@ -0,0 +1,71 @@
|
||||
import express, { type Request, Response, NextFunction } from "express";
|
||||
import { registerRoutes } from "./routes";
|
||||
import { setupVite, serveStatic, log } from "./vite";
|
||||
|
||||
const app = express();
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: false }));
|
||||
|
||||
app.use((req, res, next) => {
|
||||
const start = Date.now();
|
||||
const path = req.path;
|
||||
let capturedJsonResponse: Record<string, any> | undefined = undefined;
|
||||
|
||||
const originalResJson = res.json;
|
||||
res.json = function (bodyJson, ...args) {
|
||||
capturedJsonResponse = bodyJson;
|
||||
return originalResJson.apply(res, [bodyJson, ...args]);
|
||||
};
|
||||
|
||||
res.on("finish", () => {
|
||||
const duration = Date.now() - start;
|
||||
if (path.startsWith("/api")) {
|
||||
let logLine = `${req.method} ${path} ${res.statusCode} in ${duration}ms`;
|
||||
if (capturedJsonResponse) {
|
||||
logLine += ` :: ${JSON.stringify(capturedJsonResponse)}`;
|
||||
}
|
||||
|
||||
if (logLine.length > 80) {
|
||||
logLine = logLine.slice(0, 79) + "…";
|
||||
}
|
||||
|
||||
log(logLine);
|
||||
}
|
||||
});
|
||||
|
||||
next();
|
||||
});
|
||||
|
||||
(async () => {
|
||||
const server = await registerRoutes(app);
|
||||
|
||||
app.use((err: any, _req: Request, res: Response, _next: NextFunction) => {
|
||||
const status = err.status || err.statusCode || 500;
|
||||
const message = err.message || "Internal Server Error";
|
||||
|
||||
res.status(status).json({ message });
|
||||
throw err;
|
||||
});
|
||||
|
||||
// importantly only setup vite in development and after
|
||||
// setting up all the other routes so the catch-all route
|
||||
// doesn't interfere with the other routes
|
||||
if (app.get("env") === "development") {
|
||||
await setupVite(app, server);
|
||||
} else {
|
||||
serveStatic(app);
|
||||
}
|
||||
|
||||
// ALWAYS serve the app on the port specified in the environment variable PORT
|
||||
// Other ports are firewalled. Default to 5000 if not specified.
|
||||
// this serves both the API and the client.
|
||||
// It is the only port that is not firewalled.
|
||||
const port = parseInt(process.env.PORT || '5000', 10);
|
||||
server.listen({
|
||||
port,
|
||||
host: "0.0.0.0",
|
||||
reusePort: true,
|
||||
}, () => {
|
||||
log(`serving on port ${port}`);
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,64 @@
|
||||
import type { Express } from "express";
|
||||
import { createServer, type Server } from "http";
|
||||
import { storage } from "./storage";
|
||||
import { z } from "zod";
|
||||
|
||||
export async function registerRoutes(app: Express): Promise<Server> {
|
||||
// Get videos with pagination and filtering
|
||||
app.get("/api/videos", async (req, res) => {
|
||||
try {
|
||||
const limit = parseInt(req.query.limit as string) || 20;
|
||||
const offset = parseInt(req.query.offset as string) || 0;
|
||||
const search = req.query.search as string;
|
||||
const category = req.query.category as string;
|
||||
|
||||
const videos = await storage.getVideos(limit, offset, search, category);
|
||||
const total = await storage.getVideoCount(search, category);
|
||||
|
||||
res.json({
|
||||
videos,
|
||||
total,
|
||||
hasMore: offset + limit < total
|
||||
});
|
||||
} catch (error) {
|
||||
res.status(500).json({ message: "Failed to fetch videos" });
|
||||
}
|
||||
});
|
||||
|
||||
// Get single video by ID
|
||||
app.get("/api/videos/:id", async (req, res) => {
|
||||
try {
|
||||
const video = await storage.getVideo(req.params.id);
|
||||
if (!video) {
|
||||
return res.status(404).json({ message: "Video not found" });
|
||||
}
|
||||
res.json(video);
|
||||
} catch (error) {
|
||||
res.status(500).json({ message: "Failed to fetch video" });
|
||||
}
|
||||
});
|
||||
|
||||
// Update video views
|
||||
app.post("/api/videos/:id/view", async (req, res) => {
|
||||
try {
|
||||
await storage.updateVideoViews(req.params.id);
|
||||
res.json({ success: true });
|
||||
} catch (error) {
|
||||
res.status(500).json({ message: "Failed to update views" });
|
||||
}
|
||||
});
|
||||
|
||||
// Get video categories
|
||||
app.get("/api/categories", async (req, res) => {
|
||||
try {
|
||||
const videos = await storage.getVideos(1000);
|
||||
const categories = Array.from(new Set(videos.map(v => v.category).filter(Boolean)));
|
||||
res.json(categories);
|
||||
} catch (error) {
|
||||
res.status(500).json({ message: "Failed to fetch categories" });
|
||||
}
|
||||
});
|
||||
|
||||
const httpServer = createServer(app);
|
||||
return httpServer;
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
import { type Video, type InsertVideo } from "@shared/schema";
|
||||
import { randomUUID } from "crypto";
|
||||
|
||||
export interface IStorage {
|
||||
getVideos(limit?: number, offset?: number, search?: string, category?: string): Promise<Video[]>;
|
||||
getVideo(id: string): Promise<Video | undefined>;
|
||||
createVideo(video: InsertVideo): Promise<Video>;
|
||||
updateVideoViews(id: string): Promise<void>;
|
||||
getVideoCount(search?: string, category?: string): Promise<number>;
|
||||
}
|
||||
|
||||
export class MemStorage implements IStorage {
|
||||
private videos: Map<string, Video>;
|
||||
|
||||
constructor() {
|
||||
this.videos = new Map();
|
||||
// Initialize with some sample videos for demonstration
|
||||
// In production, these would be fetched from bunny.net API
|
||||
this.initializeSampleVideos();
|
||||
}
|
||||
|
||||
private initializeSampleVideos() {
|
||||
const sampleVideos: InsertVideo[] = [
|
||||
{
|
||||
title: "Advanced Web Development Techniques and Best Practices",
|
||||
description: "Learn modern web development techniques including React, TypeScript, and performance optimization strategies.",
|
||||
thumbnailUrl: "https://images.unsplash.com/photo-1560472355-536de3962603?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=450",
|
||||
videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
|
||||
duration: 754, // 12:34
|
||||
views: 2100,
|
||||
category: "Tutorial"
|
||||
},
|
||||
{
|
||||
title: "Team Collaboration Strategies for Remote Work",
|
||||
description: "Effective strategies for managing remote teams and improving collaboration in distributed environments.",
|
||||
thumbnailUrl: "https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=450",
|
||||
videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
|
||||
duration: 495, // 8:15
|
||||
views: 856,
|
||||
category: "Business"
|
||||
},
|
||||
{
|
||||
title: "Modern UI/UX Design Principles and Workflows",
|
||||
description: "Comprehensive guide to modern design principles, user experience optimization, and design system creation.",
|
||||
thumbnailUrl: "https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=450",
|
||||
videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
|
||||
duration: 942, // 15:42
|
||||
views: 3700,
|
||||
category: "Design"
|
||||
},
|
||||
{
|
||||
title: "Data Analytics and Business Intelligence Tutorial",
|
||||
description: "Learn how to analyze data effectively using modern tools and create meaningful business insights.",
|
||||
thumbnailUrl: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=450",
|
||||
videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
|
||||
duration: 1328, // 22:08
|
||||
views: 1400,
|
||||
category: "Analytics"
|
||||
},
|
||||
{
|
||||
title: "Mobile App Development: From Concept to Launch",
|
||||
description: "Complete guide to mobile app development covering design, development, testing, and deployment strategies.",
|
||||
thumbnailUrl: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=450",
|
||||
videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
|
||||
duration: 1113, // 18:33
|
||||
views: 4200,
|
||||
category: "Mobile"
|
||||
},
|
||||
{
|
||||
title: "Cloud Infrastructure and DevOps Fundamentals",
|
||||
description: "Understanding cloud computing, infrastructure as code, and DevOps practices for modern applications.",
|
||||
thumbnailUrl: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=450",
|
||||
videoUrl: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4",
|
||||
duration: 1517, // 25:17
|
||||
views: 987,
|
||||
category: "DevOps"
|
||||
}
|
||||
];
|
||||
|
||||
sampleVideos.forEach(video => {
|
||||
const id = randomUUID();
|
||||
const fullVideo: Video = {
|
||||
...video,
|
||||
id,
|
||||
views: video.views || 0,
|
||||
description: video.description || null,
|
||||
category: video.category || null,
|
||||
createdAt: new Date()
|
||||
};
|
||||
this.videos.set(id, fullVideo);
|
||||
});
|
||||
}
|
||||
|
||||
async getVideos(limit = 20, offset = 0, search?: string, category?: string): Promise<Video[]> {
|
||||
let videos = Array.from(this.videos.values());
|
||||
|
||||
// Filter by search
|
||||
if (search) {
|
||||
const searchLower = search.toLowerCase();
|
||||
videos = videos.filter(video =>
|
||||
video.title.toLowerCase().includes(searchLower) ||
|
||||
video.description?.toLowerCase().includes(searchLower)
|
||||
);
|
||||
}
|
||||
|
||||
// Filter by category
|
||||
if (category && category !== "All Categories") {
|
||||
videos = videos.filter(video => video.category === category);
|
||||
}
|
||||
|
||||
// Sort by created date (newest first)
|
||||
videos.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
|
||||
|
||||
return videos.slice(offset, offset + limit);
|
||||
}
|
||||
|
||||
async getVideo(id: string): Promise<Video | undefined> {
|
||||
return this.videos.get(id);
|
||||
}
|
||||
|
||||
async createVideo(video: InsertVideo): Promise<Video> {
|
||||
const id = randomUUID();
|
||||
const fullVideo: Video = {
|
||||
...video,
|
||||
id,
|
||||
views: video.views || 0,
|
||||
description: video.description || null,
|
||||
category: video.category || null,
|
||||
createdAt: new Date()
|
||||
};
|
||||
this.videos.set(id, fullVideo);
|
||||
return fullVideo;
|
||||
}
|
||||
|
||||
async updateVideoViews(id: string): Promise<void> {
|
||||
const video = this.videos.get(id);
|
||||
if (video) {
|
||||
video.views += 1;
|
||||
this.videos.set(id, video);
|
||||
}
|
||||
}
|
||||
|
||||
async getVideoCount(search?: string, category?: string): Promise<number> {
|
||||
const videos = await this.getVideos(1000, 0, search, category);
|
||||
return videos.length;
|
||||
}
|
||||
}
|
||||
|
||||
export const storage = new MemStorage();
|
||||
@@ -0,0 +1,85 @@
|
||||
import express, { type Express } from "express";
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
import { createServer as createViteServer, createLogger } from "vite";
|
||||
import { type Server } from "http";
|
||||
import viteConfig from "../vite.config";
|
||||
import { nanoid } from "nanoid";
|
||||
|
||||
const viteLogger = createLogger();
|
||||
|
||||
export function log(message: string, source = "express") {
|
||||
const formattedTime = new Date().toLocaleTimeString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
hour12: true,
|
||||
});
|
||||
|
||||
console.log(`${formattedTime} [${source}] ${message}`);
|
||||
}
|
||||
|
||||
export async function setupVite(app: Express, server: Server) {
|
||||
const serverOptions = {
|
||||
middlewareMode: true,
|
||||
hmr: { server },
|
||||
allowedHosts: true as const,
|
||||
};
|
||||
|
||||
const vite = await createViteServer({
|
||||
...viteConfig,
|
||||
configFile: false,
|
||||
customLogger: {
|
||||
...viteLogger,
|
||||
error: (msg, options) => {
|
||||
viteLogger.error(msg, options);
|
||||
process.exit(1);
|
||||
},
|
||||
},
|
||||
server: serverOptions,
|
||||
appType: "custom",
|
||||
});
|
||||
|
||||
app.use(vite.middlewares);
|
||||
app.use("*", async (req, res, next) => {
|
||||
const url = req.originalUrl;
|
||||
|
||||
try {
|
||||
const clientTemplate = path.resolve(
|
||||
import.meta.dirname,
|
||||
"..",
|
||||
"client",
|
||||
"index.html",
|
||||
);
|
||||
|
||||
// always reload the index.html file from disk incase it changes
|
||||
let template = await fs.promises.readFile(clientTemplate, "utf-8");
|
||||
template = template.replace(
|
||||
`src="/src/main.tsx"`,
|
||||
`src="/src/main.tsx?v=${nanoid()}"`,
|
||||
);
|
||||
const page = await vite.transformIndexHtml(url, template);
|
||||
res.status(200).set({ "Content-Type": "text/html" }).end(page);
|
||||
} catch (e) {
|
||||
vite.ssrFixStacktrace(e as Error);
|
||||
next(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function serveStatic(app: Express) {
|
||||
const distPath = path.resolve(import.meta.dirname, "public");
|
||||
|
||||
if (!fs.existsSync(distPath)) {
|
||||
throw new Error(
|
||||
`Could not find the build directory: ${distPath}, make sure to build the client first`,
|
||||
);
|
||||
}
|
||||
|
||||
app.use(express.static(distPath));
|
||||
|
||||
// fall through to index.html if the file doesn't exist
|
||||
app.use("*", (_req, res) => {
|
||||
res.sendFile(path.resolve(distPath, "index.html"));
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user