Build Your Own Highly Scalable Vercel . (Part-3/3)

In the last part, we constructed our main server responsible for triggering the builder server. Now, we’ll establish a reverse proxy that directs our S3 object to the end-user. For optimal performance, we’ll utilize a reverse proxy with the http-proxy package.

In simpler terms, a reverse proxy acts as an intermediary between the client and the server. It receives requests from clients and forwards them to the appropriate backend servers. This helps improve performance by caching frequently accessed content, balancing server loads, and providing an additional layer of security.

In very simplified terms

npm i http-proxy

import axios from "axios";
import express from "express";
import { Request, Response } from "express";
import cors from "cors";

import httpProxy from "http-proxy";
// import express and other libraries

// create express app
const app = express();

// set the port to listen on
const port = 3001;

// base path of the s3 bucket where the build outputs are stored
const BASE_PATH =
  "https://<your-bucket-url>/__output";

// create a proxy server
const proxy = httpProxy.createProxy();

// intercept the request to the proxy server and modify the path if required
proxy.on("proxyReq", (proxyReq: any, req: any, res: any) => {
  const url = req.url; // get the url from the request
  console.log(url); // log the url

  // if the url is "/" ( home page ) , modify the path to "index.html"
  if (url === "/") {
    proxyReq.path += "index.html"; // add index.html to the path
  }
  console.log(proxyReq.path); // log the modified path
});

// allow cors
app.use(cors());

// handle all requests and proxy to the s3 bucket
app.use(async (req: Request, res: Response) => {
  const hostname = req.hostname; // get the subdomain from the request hostname
  const subdomain = hostname.split(".")[0]; // extract the subdomain from the hostname

  try {
    // fetch the project id of the subdomain from the backend
    const { data } = await axios.get(
      `http://localhost:3001/project/${subdomain}`
    );

    // build the object url from the project id and base path
    const projectId = data?.project?.id;
    const objectUrl = `${BASE_PATH}/${projectId}`;

    // proxy the request to the object url
    proxy.web(req, res, {
      target: objectUrl,
      changeOrigin: true, // necessary to make the request work from a different host
    });
  } catch (error) {
    console.log(error); // log any errors
    res.send("Project not found"); // send a response if project not found
  }
});

// start the server
app.listen(port, () => {
  console.log(`Server started on port ${port}`);
});

And with that, you’ve successfully built yourself a scalable and fast Vercel clone! Congratulations on completing the project and creating a robust deployment platform for React projects. With the combination of efficient build servers, API servers, and reverse proxy configurations, you’re now equipped to host and deploy React applications with ease and speed. Cheers to your accomplishment! 🚀🎉

Special thanks to Piyush Garg Tutorial .

( Actively looking for Full-stack Developer Roles hit me up . )

ME | LinkedIn | Github | Contact Me