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

> Master everyone-can-use-english configuration with our comprehensive guide. Learn to edit .env, Vite, and JSON files for seamless setup. Get started now.

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

---

**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:

```bash
cp .env.example .env

```

Edit `.env` with your custom values:

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

```

In [`enjoy/src/renderer.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/vite.base.config.ts) | Shared base configuration |
| [`enjoy/vite.main.config.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/vite.main.config.ts) | Main process (Electron/desktop) |
| [`enjoy/vite.renderer.config.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/vite.renderer.config.ts) | Renderer process UI |
| [`enjoy/vite.preload.config.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/vite.preload.config.ts) | Preload scripts |

To change the development server port, modify [`enjoy/vite.main.config.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/vite.main.config.ts):

```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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/constants/languages.json).

To add French support:

1. Create [`enjoy/src/i18n/fr.json`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/i18n/fr.json):

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

```

2. Register the language in [`enjoy/src/constants/languages.json`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/constants/languages.json):

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

```

The [`utils.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/utils.ts) within the `DEFAULT_CONFIG` object:

```ts
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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/wrangler.toml) and [`entry/package.json`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/entry/package.json) control build-time constants:

```toml

# 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:

```bash
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:**

```bash
npm install

```

2. **Start development server:**

```bash
npm run dev

```

3. **For web deployment:**

```bash
cd entry
npm install
npm run deploy

```

4. **Verify in browser console:**

```javascript
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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/languages.json)
- **Feature toggles** — Modify `DEFAULT_CONFIG` in [`enjoy/src/utils.ts`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/enjoy/src/utils.ts)
- **Deployment** — Update [`entry/wrangler.toml`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/es.json) for Spanish), then add the language metadata to [`enjoy/src/constants/languages.json`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/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`](https://github.com/ZuodaoTech/everyone-can-use-english/blob/main/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