Building a Lightweight reverse proxy with Typescript.

This presentation explores the development of Cyst, a lightweight, high-performance reverse proxy server built with TypeScript and powered by Bun runtime. Cyst provides enterprise-grade features including HTTP/HTTPS request forwarding, flexible path and host-based routing, advanced load balancing with round-robin and least-connections algorithms, comprehensive security features with HTTPS termination, basic authentication, and IP whitelisting. The presentation demonstrates how Cyst addresses modern web infrastructure challenges through features like health monitoring with automatic failover, WebSocket support, response compression, intelligent caching, rate limiting, and real-time monitoring. With simple JSON/YAML configuration, hot reload capabilities, and Docker-ready deployment, Cyst offers a developer-friendly alternative to heavyweight proxy solutions while maintaining production-ready performance and scalability for microservices architectures, multi-tenant applications, and API gateway scenarios.

Transcript

1. 1 Building a Lightweight reverse proxy with Typescript. By AbdulHafeez AbdulRaheem
2. Who am I? • 8+ years experience in production • Software Engineer at Ernest • CTO at Beeva.ai • Avid supporter of Real Madrid and Newcastle. • Enjoys math, chess and football. • I will most likely beat you in FIFA. • I like to read - mostly about philosophy, medicine, psychology and history.
3. The Grand Agenda • Understand Reverse Proxies • Go to RFC7230 and RFC7239 • Understand the Problems Reverse Proxies Solve. • We write some Typescript Code. • We test the code • If the code works on my system and not yours, we call it a day and expect rice from kruse.
4. What is a Reverse Proxy? • Reverse proxy is a server that sits in front of web servers and forwards client (e.g., browser) requests to those web servers. • It hides internal application structure, adds load balancing, security, and caching.
5. RC7230 - Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing Link: https://datatracker.ietf.org/doc/html/rfc7230 “A "gateway" (a.k.a. "reverse proxy") is an intermediary that acts as an origin server for the outbound connection but translates received requests and forwards them inbound to another server or servers. Gateways are often used to encapsulate legacy or untrusted information services, to improve server performance through "accelerator" caching, and to enable partitioning or load balancing of HTTP services across multiple machines.”
6. RC7239 - Forwarded HTTP Extension Link: https://www.rfc-editor.org/rfc/rfc7239.txt Problem: When a request is proxied, the original client IP, protocol, and port are lost or overwritten. Proxies often add custom headers (like X-Forwarded-For) but they are inconsistent, non-standardized, and prone to spoofing. How RFC 7239 Solves this: RFC 7239 standardizes how forwarding information is added to HTTP requests, allowing multiple proxy hops to append their metadata consistently, while eliminating vendor-specific hacks by unifying all such data under the standardized Forwarded header. “Forwarded: for=192.0.2.60; proto=http; by=203.0.113.43”
7. The OSI Model A conceptual framework on how we categorize, intercommunications between systems also explains where each protocol operate in between the layers. • Physical Layer (Layer 1): Bare Metal transfer of bitstreams over a physical medium (RS-232, DSL, USB - SerialPort). • Data Link Layer (Layer 2): Node-to-node data transfer, data framing management and manages Mac Addresses (Ethernet, Frame Relay). • Network Layer (Layer 3): Handles how data is sent to a receiving device (IP, ICMP ETC). • Transport Layer (Layer 4): Stability in data transfer, and data recovery. (TCP, UDP, SCTP). • Session Layer (Layer 5): Manages Sessions between apps (RPC). • Presentation Layer (Layer 6): Handles data translation, encryption and compression (SSL/TLS, JPEG, MPEG). • Application Layer (Layer 7): Provides services over a network (HTTP, FTP, SMTP, DNS).
8. Popular Reverse Proxies • Nginx • HAProxy • Traefik • Caddy
9. Sample Scenarios • Your app serves a lot of images and JavaScript files. You want to reduce load on your app servers? • You’re building a chat app using WebSockets. You want to balance users across multiple servers? • Your front-end JavaScript loads slowly due to large bundle sizes? • You want to monitor and log all incoming HTTP requests without modifying backend services? • You need to restrict admin access to specific IP addresses?
10. Sample Scenarios • Your app serves a lot of images and JavaScript files. You want to reduce load on your app servers? • You’re building a chat app using WebSockets. You want to balance users across multiple servers? • Your front-end JavaScript loads slowly due to large bundle sizes? • You want to monitor and log all incoming HTTP requests without modifying backend services? • You need to restrict admin access to specific IP addresses?
11. Let’s Dive Into Code We would be building a reverse proxy server that does the following 1. Config File 2. Serves static files 3. Has a Auth Gateway 4. Can serve multiple backend of the same instance and mimics round-robin.
12. Config File A simple json file - Port: The port the server proxy server runs on - StaticDir: Directory to server static files - Routes: - Path: captures the route - Targets the appropriate upstream server to forward request too. - AuthGateway: Authenticate each request with an upstream.
13. Serving Static File
14. Round Robin
15. Proxy handler
16. Authentication
17. Run the code!
18. Live Code, Let’s Improve the Proxy.
19. Questions?
20. Thank You!