Skip to content

Frontend Webapp

Overview

Saut's frontend web application is built using SvelteKit, a powerful full-stack framework that enables server-side rendering and advanced routing capabilities. The application is primarily deployed on Cloudflare Pages, though alternative deployment options are available for self-hosting scenarios.

Cloudflare Pages Deployment

Architecture

The application uses SvelteKit's Cloudflare adapter (@sveltejs/adapter-cloudflare), which optimizes the build output specifically for Cloudflare Pages' environment. This adapter ensures:

  • Seamless integration with Cloudflare's edge network
  • Optimal performance through edge computing capabilities
  • Automatic handling of server-side rendering at the edge

Key Benefits

  1. Global Edge Network

    • Automatic deployment to 250+ data centers worldwide
    • Reduced latency through edge caching
    • Built-in DDoS protection and security features

  2. Continuous Integration/Deployment

    • Direct integration with Github
    • Automatic builds on push events
    • Production branch deployment with configurable branch selection
    • Preview deployments for pull requests and feature branches
    • Instant rollbacks if needed

  3. SvelteKit Compatibility

    • Native support for server-side rendering
    • Handles dynamic imports efficiently
    • Optimized asset serving through Cloudflare's CDN
    • Environment variable management through the Cloudflare dashboard

Error Monitoring with New Relic

New Relic has been implemented as the primary error monitoring solution for the following reasons:

Advantages

  • Real-time error tracking and alerting
  • Detailed performance metrics and transaction traces
  • Browser monitoring capabilities
  • Custom event tracking and analytics
  • Comprehensive debugging tools with stack traces
  • Integration with CI/CD pipelines for deployment tracking

Key Features

  • Automatic capture of frontend exceptions
  • User session tracking and impact analysis
  • Performance bottleneck identification
  • Custom dashboards and alerting rules
  • Integration with popular notification systems

Self-Hosting Guide

For scenarios requiring self-hosting, follow sveltekit documentation to deploy the application using the Node.js adapter