WEB TOOLS

NATIVE MODULE FEDERATION SERVICES

Dependencies

• vite
• react (Currently built around the assumption apps will be built with React)

Deployments

Deployments of sub apps are hosted in a Cloudflare R2 bucket

src/r2-deploy.js: Sub Applications github workflow run npm run deploy, which references src/r2-deploy.js This script is responsible for moving build assets into their respective Cloudflare R2 buckets.

@ferry/rsvp/web-tools/.github/workflows/deploy.yml@main Standardized deployment yaml file for sub applications. This script is referenced in each sub applications .github/workflow/deploy.yml

Implements Vite Build

• Production Builds

  • isExternal: Provide List of External Dependencies (To be handled by importmap) so Vite ignores them during the build step

• Local Development

  • isExternal: Provide List of External Dependencies (To be handled by importmap) so Vite ignores them during the local development

  • importMapPlugin: Manages loading the importmap before all other scripts. Spcifically move it before Vite's Hot Module Reloading script

Reusable Components

• Local and Production components

  • Dynamic Module Loader : Component that manages fetching JS modules at runtime.

Reusable Templates

• Local Development

  • INDEX.HTML: Provides an HTML template file that can be used each Sub Application. The HTML template is copied into the Sub App using an npm script defined in each Sub App.

  • SSL: SSL certs to allow for proper HTTPS in local development. The SSL certs are copied into the Sub App using an npm script defined in each Sub App.

  • GITHUB WORKFLOWS: Standardized github workflow used to deploy each Sub Application to the R2 CDN.The .github/workflows are copied into the Sub App using an npm script defined in each Sub App.

  • TYPESCRIPT Configs: Standardized TS configuration files.

    • tsconfig.dev.json
      • Requires JSX RUNTIME DEV
    • tsconfig.prod.json
      • Requires JSX RUNTIME
    • tsconfig.json
      • Base configurations