Startup API Cloudflare App

This application uses the Cloudflare Developer Platform, including Workers and DurableObjects, to implement foundational web application functionality. It acts as a transparent proxy for your application, allowing you to inject custom UI elements and intercept specific paths.

Features

• Transparent Proxying: Forwards requests to your origin application
• HTML Injection: Uses HTMLRewriter to inject scripts and custom elements (like <power-strip>) into your HTML pages
• Path Interception: Intercepts requests to a configurable path to serve internal assets

Installation

Option 1: Cloudflare Workers GitHub Integration (Recommended)

This is the easiest way to deploy and keep your worker up to date.

1. Fork this repository to your account
2. Go to your Cloudflare Dashboard's Workers & pages > Create Application
3. Click Continue with GitHub
4. Select your forked startup-api-cloudflare repository
5. Pick the name for your site's worker (e.g. you might have multiple)
6. Deploy the Worker
7. In the Settings tab of your Worker, go to Variables and add the required ORIGIN_URL (see Configuration below)

Option 2: Manual Installation (CLI)

Use this option if you want to deploy from your local machine.

1. Clone and Install

   git clone https://github.com/StartupAPI/startup-api-cloudflare.git
   cd startup-api-cloudflare
   npm install

2. Configure Environment Variables

   Update wrangler.jsonc or use dashboard Settings tab of your Worker, go to Variables and add the required ORIGIN_URL (see Configuration below)

3. Deploy

   npm run deploy

Configuration Details

How to set environment variables

• Using Cloudflare Dashboard (Recommended):

  1. Go to Workers & Pages
  2. Select your worker
  3. Navigate to Settings > Variables
  4. Click Add variable under Environment Variables
  5. Add ORIGIN_URL and any optional variables
  6. Click Save and deploy

• Using wrangler.jsonc: Add the variables to the "vars" object in your configuration file. See Cloudflare documentation for more details.

Variable	Required	Default	Description
ORIGIN_URL	Yes	N/A	The base URL of your origin application (e.g., https://your-app-origin.com)
USERS_PATH	No	/users/	The path used to serve internal assets like power-strip.js
AUTH_ORIGIN	No	N/A	Optional base URL for OAuth redirects (overrides request origin)
GOOGLE_CLIENT_ID	No	N/A	Google OAuth2 Client ID
GOOGLE_CLIENT_SECRET	No	N/A	Google OAuth2 Client Secret
TWITCH_CLIENT_ID	No	N/A	Twitch OAuth2 Client ID
TWITCH_CLIENT_SECRET	No	N/A	Twitch OAuth2 Client Secret

Setting up OAuth

Google

1. Go to the Google Cloud Console
2. Create a new project or select an existing one
3. Navigate to APIs & Services > Credentials
4. Click Create Credentials > OAuth client ID
5. Select Web application as the application type
6. Add your authorized redirect URI: https://<your-worker-url>/users/auth/google/callback
7. Copy the Client ID and Client Secret and add them to your Worker's environment variables

Twitch

1. Go to the Twitch Developer Console
2. Register a new application
3. Add your authorized redirect URI: https://<your-worker-url>/users/auth/twitch/callback
4. Select Website as the category
5. Copy the Client ID and generate a Client Secret to add them to your Worker's environment variables

Example wrangler.jsonc snippet:

{
  "vars": {
    "ORIGIN_URL": "https://your-app-origin.com"
  }
}

How It Works

1. Request Interception: The worker receives all incoming requests
2. Path Mapping: If the request path starts with USERS_PATH, the worker serves assets directly from the public/users/ directory
3. Proxying: All other requests are proxied to the configured ORIGIN_URL
4. Injection: For text/html responses, the worker injects a <script> tag and a <power-strip> custom element before serving the content to the user

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

Licensed under the Apache License, Version 2.0. See LICENSE for details.