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

> Master everyone-can-use-english deployment and configuration. Learn best practices for production and development with this comprehensive guide. Deploy with confidence today.

- Repository: [Zuodao/everyone-can-use-english](https://github.com/ZuodaoTech/everyone-can-use-english)
- Tags: best-practices
- Published: 2026-08-14

---

**Yes, follow the official https://enjoy.bot URL for production use, configure the Cloudflare Worker in [`entry/index.js`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/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:

```bash

# 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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/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:

```javascript
// 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:

```javascript
// 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](https://chromewebstore.google.com/detail/enjoy-echo/hiijpdndbjfnffibdhajdanjekbnalob) 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:

```javascript
// 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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/chapter3.md)) directly
2. **Update navigation**: Maintain the table of contents in [`book/README.md`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/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

```bash

# 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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/.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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/vite.main.config.ts) and deploy `dist/` to static hosting
- **Worker configuration**: Maintain `portal` and `vtp` bindings in [`entry/index.js`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/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.