app

Web Application

Web application project built with TypeScript, React, and Relay.

Tech Stack

• TypeScript, Babel
• React, Relay, Emotion
• Cloudflare Workers for application routing/rendering at CDN edge locations

Directory Structure

├──common — common React components, UI building blocks
├──core — core application modules (Relay store, router, etc.)
├──dialogs — modal dialog components
├──icons — custom SVG icons in addition to @mui/icons-material
├──menus — pop-up menu components
├──public — static files such as robots.txt, favicon.ico, etc.
├──queries — generated GraphQL query fragments
├──routes — application routes / pages
├──theme — customized Material UI theme
├──index.tsx — application entry
├──tsconfig.json — TypeScript configuration
└──vite.config.ts — bundler configuration

Getting Started

$ yarn app:relay [--watch]      # Compile GraphQL fragments
$ yarn app:start                # Launch the app using Vite dev server

The app must become available on http://localhost:5173/.

How to Deploy

Ensure that all the environment variables found in ../env folder for the target deployment environment (test, prod) are up-to-date. Push the required secrets to Cloudflare Workers environment, for example:

$ yarn edge:cf secret put GOOGLE_CLOUD_CREDENTIALS

Finally, build and deploy the app by running:

$ yarn app:build
$ yarn app:deploy [--env #0] [--version #0]

Where --env is the target deployment environment, e.g. --env=test (default).

Once the app was deployed, you can access Cloudflare Workers logs via:

$ yarn edge:cf tail [--env #0] [--version #0]

For the full list of Cloudflare CLI options run yarn edge:cf --help.