Cloudflare Pages Frontend

1. Click Compute (Workers) -> Workers & Pages -> Create

   

2. Select Pages, choose Use direct upload

   

3. Enter the deployed worker address. It must be the backend API root URL, start with https://, and must not include a trailing /. Click generate, and if successful, a download button will appear. You will get a zip package.

   • The worker domain here is the backend API domain. For example, if I deployed at https://temp-email-api.awsl.uk, then fill in https://temp-email-api.awsl.uk
   • If your domain is https://temp-email-api.xxx.workers.dev, then fill in https://temp-email-api.xxx.workers.dev
   • Do not enter your frontend Pages domain, and do not include paths like /admin or /api. Otherwise frontend requests will hit the wrong address and you may see Cannot read properties of undefined (reading 'map') or 405 Method Not Allowed
   • Before filling it in, open https://your-worker-domain/open_api/settings in the browser and confirm it returns JSON. If it returns HTML, 404, 405, or a Cloudflare challenge page, fix the Worker binding, variables, or security policy first

   Note

   The worker.dev domain is not accessible in China, please use a custom domain.

   Do not enable security policies such as Under Attack, Bot Fight, or Managed Challenge on the backend API domain. Frontend XHR requests cannot complete those browser challenges, and the common symptom is Network Error.

   Example: `https://temp-email-api.example.com`. Do not enter the frontend Pages domain and do not add a trailing `/`.

   NOTE

   You can also deploy manually. Download the zip from here: frontend.zip

   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.

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

   Important: SPA Mode

   This project is a Single-Page Application (SPA). You must expand the advanced options during deployment and set "Not Found handling" to Single-page application (SPA). Otherwise, refreshing the page or directly accessing sub-paths like /admin will return a 404 error.

   

   Then click Deploy

   

5. Open the Pages you just deployed, click Custom Domain. Here you can add your own domain, or you can use the automatically generated *.pages.dev domain. If you can open the domain, the deployment is successful.