How to Configure everyone-can-use-english Settings: Complete Configuration Guide

Configure everyone-can-use-english by editing environment variables in .env, Vite config files, and JSON translation files, then rebuild the application.

The everyone-can-use-english repository by ZuodaoTech is a multi-platform language learning application with a flexible configuration system. Settings are distributed across build-time configs, environment variables, and runtime JSON files. This guide walks through each configuration layer with exact file paths and working code examples from the source.

Environment Variables Configuration

Client-side environment variables drive API endpoints, versioning, and default language settings. The project uses Vite's loadEnv helper to inject variables prefixed with VITE_ into the frontend bundle.

Create your local environment file:

cp .env.example .env

Edit .env with your custom values:

VITE_API_URL=https://enjoy.bot/api
VITE_APP_VERSION=1.2.3
VITE_DEFAULT_LANGUAGE=en

In enjoy/src/renderer.ts (approximately line 150), the application fetches an additional remote configuration from https://enjoy.bot/api/config and merges it with local defaults.

Vite Build Configuration

The project uses multiple Vite configuration files for different build targets:

Config File	Purpose
enjoy/vite.base.config.ts	Shared base configuration
enjoy/vite.main.config.ts	Main process (Electron/desktop)
enjoy/vite.renderer.config.ts	Renderer process UI
enjoy/vite.preload.config.ts	Preload scripts

To change the development server port, modify enjoy/vite.main.config.ts:

export default defineConfig({
  server: { port: 4000 },
  // ... other options
});

These files are read automatically when running npm run dev or npm run build.

Internationalization and Language Settings

Translation strings live in enjoy/src/i18n/*.json with language metadata in enjoy/src/constants/languages.json.

To add French support:

1. Create enjoy/src/i18n/fr.json:

{
  "welcome": "Bienvenue",
  "settings": "Paramètres",
  "save": "Enregistrer"
}

2. Register the language in enjoy/src/constants/languages.json:

{
  "code": "fr",
  "label": "Français",
  "direction": "ltr"
}

The utils.ts file loads these at runtime to provide translation strings throughout the UI.

Runtime Feature Configuration

Default feature toggles are defined in enjoy/src/utils.ts within the DEFAULT_CONFIG object:

export const DEFAULT_CONFIG = {
  showFlashcards: true,
  enableRecording: true,
  maxPlaybackSpeed: 2.0,
  // ... additional flags
};

Modify these values to enable or disable features by default. Remote configuration from https://enjoy.bot/api/config can override these settings at runtime.

Cloudflare Workers Deployment Settings

For the web deployment, entry/wrangler.toml and entry/package.json control build-time constants:

# entry/wrangler.toml

name = "everyone-can-use-english"
compatibility_date = "2024-01-01"

[vars]
API_BASE_URL = "https://enjoy.bot/api"

These values are embedded in the JavaScript bundle during Wrangler deployment.

Browser Extension Configuration

The browser extension manifest is generated during build. To modify supported sites, adjust the build scripts that control the permissions array. After changes:

npm run build:extension

Load the resulting dist/extension folder via Chrome's Extensions → Load unpacked.

Applying and Verifying Configuration

Follow this sequence to apply your changes:

1. Install dependencies:

npm install

2. Start development server:

npm run dev

3. For web deployment:

cd entry
npm install
npm run deploy

4. Verify in browser console:

console.log(import.meta.env.VITE_API_URL);
// Should output your configured value

Summary

• Environment variables — Create .env with VITE_ prefixed values for runtime configuration
• Vite configs — Edit enjoy/vite.*.config.ts files to control build behavior and dev server
• Translations — Add JSON files to enjoy/src/i18n/ and register in languages.json
• Feature toggles — Modify DEFAULT_CONFIG in enjoy/src/utils.ts
• Deployment — Update entry/wrangler.toml for Cloudflare Workers settings

Frequently Asked Questions

Where do I set the API endpoint for everyone-can-use-english?

Set VITE_API_URL in your .env file. The application reads this at build time and injects it into the client bundle. The default remote configuration endpoint (https://enjoy.bot/api/config) can override certain settings at runtime.

How do I add a new language to everyone-can-use-english?

Create a new JSON file in enjoy/src/i18n/ (e.g., es.json for Spanish), then add the language metadata to enjoy/src/constants/languages.json with code, label, and direction fields. The UI will automatically include it in language selection.

Can I disable specific features like flashcards or recording?

Yes. Open enjoy/src/utils.ts and change the boolean values in DEFAULT_CONFIG — set showFlashcards: false or enableRecording: false. These defaults can also be overridden by the remote configuration fetched from the API.

Which file controls the development server port?

The

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