mirror of
https://github.com/dreamhunter2333/cloudflare_temp_email.git
synced 2026-09-06 16:07:14 +08:00
feat: support runtime frontend configuration (#1135)
This commit is contained in:
Dream Hunter
@@ -44,7 +44,7 @@ Then go to the repository page `Settings` -> `Secrets and variables` -> `Actions
|
||||
|
||||
| Name | Description |
|
||||
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `FRONTEND_ENV` | Frontend configuration file used by the `Deploy Frontend` workflow. Copy the content from `frontend/.env.example`, [and modify it according to this guide](/en/guide/cli/pages.html). For separate frontend/backend deployment that talks to Worker directly, `VITE_API_BASE` should be the backend Worker API root URL, must start with `https://`, and must not include a trailing `/`. When this address is configured incorrectly, common symptoms are the `map` error or `405` API responses |
|
||||
| `FRONTEND_ENV` | Frontend configuration file used by the `Deploy Frontend` workflow. Copy the content from `frontend/.env.example` and modify it according to [Frontend Variables](/en/guide/frontend-vars) |
|
||||
| `FRONTEND_NAME` | The project name you created in Cloudflare Pages, can be created via [UI](https://temp-mail-docs.awsl.uk/en/guide/ui/pages.html) or [Command Line](https://temp-mail-docs.awsl.uk/en/guide/cli/pages.html) |
|
||||
| `FRONTEND_BRANCH` | (Optional) Branch for pages deployment, can be left unconfigured, defaults to `production` |
|
||||
| `PAGE_TOML` | (Optional) Used only by the `Deploy Frontend with page function` workflow. Required when using page functions to forward backend requests. Please copy the content from `pages/wrangler.toml` and modify the `service` field to your worker backend name according to actual situation. This workflow builds the frontend in Pages mode and uses same-origin requests, so it does not read `FRONTEND_ENV` |
|
||||
|
||||
@@ -29,6 +29,12 @@ Change `VITE_API_BASE` to the `worker` `url` created in the previous step. Do no
|
||||
|
||||
For example: `VITE_API_BASE=https://xxx.xxx.workers.dev`
|
||||
|
||||
Set the frontend default language with `VITE_DEFAULT_LANG`. Supported values are `zh`, `en`, `es`, `pt-BR`, `ja`, and `de`; an unset or invalid value falls back to `zh`.
|
||||
|
||||
For example: `VITE_DEFAULT_LANG=en`
|
||||
|
||||
See [Frontend Variables](/en/guide/frontend-vars) for other settings.
|
||||
|
||||
```bash
|
||||
pnpm build --emptyOutDir
|
||||
# The first deployment will prompt you to create a project, for production branch enter production
|
||||
@@ -47,6 +53,8 @@ The first deployment will prompt you to create a project. For the `production` b
|
||||
|
||||
If your worker backend name is not `cloudflare_temp_email`, please modify `pages/wrangler.toml`.
|
||||
|
||||
To set the default language, add `VITE_DEFAULT_LANG=en` to `frontend/.env.pages.local`. Same-origin requests do not require `VITE_API_BASE`; see [Frontend Variables](/en/guide/frontend-vars) for other settings.
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
pnpm install
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
# Adding Google Ads to Your Website
|
||||
|
||||
## Command Line Deployment
|
||||
Google Ads uses the following two variables. See [Google AdSense](https://www.google.com/adsense/start/) for the values:
|
||||
|
||||
Modify the `.env.prod` file
|
||||
|
||||
Add the following two variables, refer to [Google AdSense](https://www.google.com/adsense/start/) for specific values
|
||||
|
||||
```txt
|
||||
```ini
|
||||
VITE_GOOGLE_AD_CLIENT=ca-pub-123456
|
||||
VITE_GOOGLE_AD_SLOT=123456
|
||||
```
|
||||
|
||||
Then execute the following commands to redeploy pages.
|
||||
Ads are not loaded when either variable is empty. See [Frontend Variables](/en/guide/frontend-vars) for their types and defaults.
|
||||
|
||||
## CLI Deployment
|
||||
|
||||
Add both variables to `frontend/.env.prod`, then rebuild and deploy:
|
||||
|
||||
```bash
|
||||
pnpm build --emptyOutDir
|
||||
@@ -19,11 +19,25 @@ pnpm build --emptyOutDir
|
||||
pnpm run deploy
|
||||
```
|
||||
|
||||
## GitHub Action Deployment
|
||||
See [CLI Frontend Deployment](/en/guide/cli/pages) for the complete steps.
|
||||
|
||||
Modify `FRONTEND_ENV`, add the following two variables, refer to [Google AdSense](https://www.google.com/adsense/start/) for specific values, then redeploy pages.
|
||||
## GitHub Actions Deployment
|
||||
|
||||
```txt
|
||||
VITE_GOOGLE_AD_CLIENT=ca-pub-123456
|
||||
VITE_GOOGLE_AD_SLOT=123456
|
||||
Add both variables to the existing `FRONTEND_ENV` secret, then run the `Deploy Frontend` workflow again.
|
||||
|
||||
See [GitHub Actions Deployment](/en/guide/actions/github-action) for the complete steps.
|
||||
|
||||
## Manual ZIP Deployment
|
||||
|
||||
Edit `app-config` in the archive's `index.html` and use the field names without the `VITE_` prefix:
|
||||
|
||||
```html
|
||||
<script id="app-config" type="application/json">
|
||||
{
|
||||
"GOOGLE_AD_CLIENT": "ca-pub-123456",
|
||||
"GOOGLE_AD_SLOT": "123456"
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
See [Manual ZIP Deployment](/en/guide/ui/pages) for the complete steps.
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
# Frontend Variables
|
||||
|
||||
Frontend configuration is public in the browser. Do not put passwords, API keys, or other secrets in these values.
|
||||
|
||||
## Configuration Methods
|
||||
|
||||
### ENV
|
||||
|
||||
For CLI deployment, add the variables to `frontend/.env.prod`. For Worker Assets or Page Functions deployment, use `frontend/.env.pages.local`. For the GitHub Actions `Deploy Frontend` workflow, put the same content in the `FRONTEND_ENV` repository secret. The `Deploy Frontend with page function` workflow does not read this secret.
|
||||
|
||||
```ini
|
||||
VITE_API_BASE=https://temp-email-api.example.com
|
||||
VITE_DEFAULT_LANG=en
|
||||
```
|
||||
|
||||
See [CLI Deployment](/en/guide/cli/pages) and [GitHub Actions Deployment](/en/guide/actions/github-action) for complete steps.
|
||||
|
||||
### index.html
|
||||
|
||||
When using a prebuilt frontend ZIP, edit `app-config` in `index.html`. Field names do not use the `VITE_` prefix:
|
||||
|
||||
```html
|
||||
<script id="app-config" type="application/json">
|
||||
{
|
||||
"API_BASE": "https://temp-email-api.example.com",
|
||||
"DEFAULT_LANG": "en"
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Fields set in `app-config` override ENV build values. Omitted fields, or a missing `app-config` tag, continue to use ENV build values. See [Manual ZIP Deployment](/en/guide/ui/pages) for complete steps.
|
||||
|
||||
## Variable Reference
|
||||
|
||||
No frontend variable is required for every deployment method. `VITE_API_BASE` is required only when the frontend and backend are deployed separately and the browser must request the Worker domain directly. Leave it empty for same-origin deployments such as Worker Assets or Page Functions.
|
||||
|
||||
| ENV Variable | `app-config` Field | Required | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| `VITE_API_BASE` | `API_BASE` | Depends on deployment | Text | Empty | Backend API root URL beginning with `https://` and without a trailing `/`; an empty value uses the same-origin API |
|
||||
| `VITE_DEFAULT_LANG` | `DEFAULT_LANG` | No | Text | `zh` | Default language: `zh`, `en`, `es`, `pt-BR`, `ja`, or `de` |
|
||||
| `VITE_CF_WEB_ANALY_TOKEN` | `CF_WEB_ANALY_TOKEN` | No | Text | Empty | Cloudflare Web Analytics Token |
|
||||
| `VITE_IS_TELEGRAM` | `IS_TELEGRAM` | No | Boolean | `false` | Whether to enable Telegram Mini App; see [Telegram Configuration](/en/guide/feature/telegram) |
|
||||
| `VITE_GOOGLE_AD_CLIENT` | `GOOGLE_AD_CLIENT` | No | Text | Empty | Google AdSense Client ID; see [Google Ads Configuration](/en/guide/feature/google-ads) |
|
||||
| `VITE_GOOGLE_AD_SLOT` | `GOOGLE_AD_SLOT` | No | Text | Empty | Google AdSense Slot ID; see [Google Ads Configuration](/en/guide/feature/google-ads) |
|
||||
@@ -68,24 +68,34 @@ const generate = async () => {
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
var zip = new JSZip();
|
||||
await zip.loadAsync(arrayBuffer);
|
||||
let target_path = ""
|
||||
const directory = zip.folder("assets");
|
||||
if (directory) {
|
||||
for (const [relativePath, zipEntry] of Object.entries(directory.files)) {
|
||||
console.log(relativePath);
|
||||
if (relativePath.startsWith("assets/index-") && relativePath.endsWith(".js")){
|
||||
let content = await zipEntry.async("string");
|
||||
content = content.replaceAll("https://temp-email-api.xxx.xxx", normalizedDomain);
|
||||
target_path = relativePath;
|
||||
zip.file(relativePath, content);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!target_path) {
|
||||
errorMessage.value = "Could not find the frontend entry file. Generation failed"
|
||||
const indexEntry = zip.file("index.html");
|
||||
if (!indexEntry) {
|
||||
errorMessage.value = "Could not find index.html. Generation failed"
|
||||
return
|
||||
}
|
||||
const content = await indexEntry.async("string");
|
||||
const configPattern = /(<script id="app-config" type="application\/json">)([\s\S]*?)(<\/script>)/;
|
||||
const configMatch = content.match(configPattern);
|
||||
if (!configMatch) {
|
||||
errorMessage.value = "Could not find app-config. Generation failed"
|
||||
return
|
||||
}
|
||||
let appConfig = {};
|
||||
try {
|
||||
appConfig = JSON.parse(configMatch[2]);
|
||||
} catch {
|
||||
errorMessage.value = "Invalid app-config. Generation failed"
|
||||
return
|
||||
}
|
||||
if (!appConfig || typeof appConfig !== "object" || Array.isArray(appConfig)) {
|
||||
errorMessage.value = "Invalid app-config. Generation failed"
|
||||
return
|
||||
}
|
||||
appConfig.API_BASE = normalizedDomain;
|
||||
zip.file("index.html", content.replace(
|
||||
configPattern,
|
||||
(_, openTag, _config, closeTag) => `${openTag}${JSON.stringify(appConfig)}${closeTag}`
|
||||
));
|
||||
const blob = await zip.generateAsync({ type: "blob" });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
errorMessage.value = ""
|
||||
@@ -133,12 +143,21 @@ const generate = async () => {
|
||||
> [!NOTE]
|
||||
> You can also deploy manually. Download the zip from here: [frontend.zip](https://github.com/dreamhunter2333/cloudflare_temp_email/releases/latest/download/frontend.zip)
|
||||
>
|
||||
> Modify the index-xxx.js file in the archive, where xx is a random string
|
||||
>
|
||||
> Search for `https://temp-email-api.xxx.xxx` and replace it with your worker's backend API root URL, then deploy the new zip file. If you replace it with the frontend Pages domain, common symptoms are the `map` error or `405` responses from API requests
|
||||
> Extract the archive and edit `app-config` in `index.html`. When finished, compress all files again and upload the archive. Do not include the outer directory in the archive.
|
||||
>
|
||||
> If you entered the wrong address the first time and still see errors after redeploying, test in an incognito window or clear browser cache so the browser stops using the old frontend assets.
|
||||
|
||||
```html
|
||||
<script id="app-config" type="application/json">
|
||||
{
|
||||
"API_BASE": "https://temp-email-api.example.com",
|
||||
"DEFAULT_LANG": "en"
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
`API_BASE` is the backend API root URL without a trailing `/`; `DEFAULT_LANG` supports `zh`, `en`, `es`, `pt-BR`, `ja`, and `de`. You can also set `CF_WEB_ANALY_TOKEN`, `IS_TELEGRAM`, `GOOGLE_AD_CLIENT`, and `GOOGLE_AD_SLOT`; see [Frontend Variables](/en/guide/frontend-vars) for their purpose and values. Fields present in `app-config` override the corresponding settings built into JavaScript, while omitted fields keep their existing settings.
|
||||
|
||||
4. Select `Pages`, click `Create Pages`, modify the name, upload the downloaded zip package
|
||||
|
||||
> [!warning] Important: SPA Mode
|
||||
|
||||
Reference in New Issue
Block a user