Sample vite plugin for asset management

vite-plugin-content-assets.ts

import type { Plugin } from "vite";

import fs from "node:fs";
import path from "node:path";

export function contentAssetsPlugin(): Plugin {
  return {
    name: "content-assets",
    configureServer(server) {
      // Serve images from content directory
      server.middlewares.use("/content-assets", (req, res, next) => {
        if (!req.url)
          return next();

        const filePath = path.join(process.cwd(), "src/content", req.url);

        if (fs.existsSync(filePath)) {
          const ext = path.extname(filePath);
          const mimeTypes: Record<string, string> = {
            ".jpg": "image/jpeg",
            ".jpeg": "image/jpeg",
            ".png": "image/png",
            ".gif": "image/gif",
            ".webp": "image/webp",
          };

          res.setHeader("Content-Type", mimeTypes[ext] || "application/octet-stream");
          fs.createReadStream(filePath).pipe(res);
        }
        else {
          next();
        }
      });
    },
  };
}