Best Practices for Using Everyone-Can-Use-English: Deployment, Configuration & Development Guide

Yes, follow the official https://enjoy.bot URL for production use, configure the Cloudflare Worker in entry/index.js with correct portal and vtp bindings, and use Node 18+ with Yarn 3 for development.

The everyone-can-use-english repository by ZuodaoTech is a multi-platform English learning suite combining a web application, Chrome extension, desktop client, educational book content, and Cloudflare-based infrastructure. These best practices ensure stable deployments, secure configurations, and smooth development workflows across all components.

Deploy and Run the Web Application

Use the Official Hosted Version

For production use, always access the latest stable build at https://enjoy.bot. This deployment is continuously integrated and tested via GitHub Actions workflows visible in the repository's CI badges.

Before relying on a self-hosted instance, verify the build health by checking the README badges—specifically the Deploy 1000h website and Test Enjoy App indicators. Green badges confirm passing tests and successful deployments.

Self-Hosting Configuration

When hosting your own instance, clone the repository and build from source:

# Clone the repository

git clone https://github.com/ZuodaoTech/everyone-can-use-english.git
cd everyone-can-use-english

# Install dependencies with Yarn 3

yarn install

# Build production bundles using the main Vite configuration

yarn run build --config enjoy/vite.main.config.ts

Deploy the generated dist/ folder to any static host supporting Vite-built assets, such as Cloudflare Pages or Vercel.

Configure Cloudflare Worker Routing

The Cloudflare Worker in entry/index.js serves as the critical traffic dispatcher, separating static asset requests from AI inference calls. Proper configuration is essential for everyone-can-use-english to function correctly.

Understanding the Routing Logic

The worker inspects URL paths to determine the appropriate backend service:

// entry/index.js
async function handleRequest(request, env) {
  const { pathname } = new URL(request.url);
  
  // Portal assets (root, portal-assets, portal-static) → portal
  if (pathname === '/' || pathname.startsWith('/portal-assets') ||
      pathname.startsWith('/portal-static')) {
    return forwardToPortal(request, env);
  }
  
  // All other paths → VTP (AI inference service)
  return forwardToVtp(request, env);
}

Environment Binding Best Practices

• Keep env binding names (portal, vtp) synchronized with your Cloudflare dashboard configuration
• The portal binding points to your static asset host
• The vtp binding routes to your AI inference endpoint (Voice-to-Text Processing)

Error Handling and Debugging

The worker includes a renderInternalError function that returns HTTP 500 responses with descriptive messages. Extend this with structured logging for production diagnostics:

// Simplified proxy configuration for customization
export default {
  async fetch(request, env) {
    const { pathname } = new URL(request.url);
    const target = (pathname === '/' || pathname.startsWith('/portal-'))
      ? env.portal
      : env.vtp;
    return await target.fetch(request);
  },
};

Install and Verify the Chrome Extension

The Chrome extension injects AI assistants directly into YouTube and Netflix pages for immersive learning.

Installation Steps

1. Install from the official Chrome Web Store link provided in the repository README
2. Verify the extension icon appears in your browser toolbar
3. Confirm the tooltip displays "Enjoy – AI English assistant"

Manual Installation for Testing

For development or testing unpublished versions:

// Chrome extensions page: chrome://extensions/
// 1. Enable "Developer mode"
// 2. Click "Load unpacked"
// 3. Select: path/to/everyone-can-use-english/enjoy/extension

The extension activates automatically on supported streaming platforms.

Prepare for Desktop Client Releases

The desktop client is built on the same Vite pipeline as the web application. According to enjoy/vite.main.config.ts, the build system supports Electron packaging for future offline-capable releases.

For custom builds when the binary becomes available:

• Run the standard Vite build process (yarn run build --config enjoy/vite.main.config.ts)
• Package with Electron following the project's CONTRIBUTING guidelines (in progress)

Contribute to Educational Content

The educational book resides in book/ as Markdown files, rendered to static HTML through the Vite build pipeline.

Content Contribution Workflow

1. Modify chapters: Edit .md files (e.g., chapter3.md) directly
2. Update navigation: Maintain the table of contents in book/README.md
3. Verify rendering: Run yarn dev --config enjoy/vite.main.config.ts and check at http://localhost:3000

Maintain Development Environment Standards

Tool	Required Version	Purpose
Node.js	>=18 (LTS)	Vite 3 dependency; modern JavaScript features
Yarn	>=3	Workspace management and lockfile consistency
Cloudflare Wrangler	>=3	Worker deployment (wrangler publish)

Recommended Development Commands

# Development server with hot-reload

yarn dev --config enjoy/vite.main.config.ts

# Dependency updates

yarn upgrade

# Pre-commit verification

yarn test

CI automatically validates changes via .github/workflows/test-enjoy-app.yml on GitHub Actions.

Secure Secrets and Configuration

The everyone-can-use-english repository follows security-first practices:

• Never commit real URLs or API keys; use Cloudflare's secret storage for portal and vtp bindings
• No .env files are tracked in the repository
• Create .env.example as a template if local environment variables are needed, and add .env to .gitignore

Summary

• Production deployments: Use https://enjoy.bot or build with enjoy/vite.main.config.ts and deploy dist/ to static hosting
• Worker configuration: Maintain portal and vtp bindings in entry/index.js for proper request routing
• Extension installation: Verify Chrome Web Store origin and tooltip confirmation
• Development stack: Node 18+, Yarn 3, Wrangler 3+ with yarn test before commits
• Content updates: Edit book/*.md files and synchronize book/README.md navigation
• Security: Store secrets in Cloudflare dashboard, never in repository files

Frequently Asked Questions

How do I run everyone-can-use-english locally for development?

Clone the repository, run yarn install, then execute yarn dev --config enjoy/vite.main.config.ts. The development server starts at http://localhost:3000 with hot-reload enabled. Ensure you have Node.js 18 or later and Yarn 3 installed.

What do the portal and vtp environment bindings control?

The portal binding routes requests for static assets (root path, /portal-assets, /portal-static) to your web application host. The vtp binding directs all other traffic to your AI inference service for voice-to-text processing and tutoring functions. Both are defined in your Cloudflare dashboard and accessed via env in entry/index.js.

Can I use the Chrome extension with self-hosted instances?

Yes, but you must modify the extension's configuration to point to your custom endpoints. Install the extension manually via chrome://extensions/ in developer mode, selecting the enjoy/extension directory, then update the API base URL in the extension settings to match your deployment.

Where is the desktop client build configuration located?

The desktop client uses enjoy/vite.main.config.ts for its build pipeline, shared with the web application. Electron-specific packaging is configured in the same file and referenced in the project's in-progress CONTRIBUTING documentation.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}