cloudflare_temp_email/vitepress-docs/docs/en/guide/ui/pages.md

Cloudflare Pages Frontend

<script setup> import { ref } from 'vue' import JSZip from 'jszip'; const domain = ref("") const downloadUrl = ref("") const tip = ref("Download") const generate = async () => { try { const response = await fetch("/ui_install/frontend.zip"); const arrayBuffer = await response.arrayBuffer(); var zip = new JSZip(); await zip.loadAsync(arrayBuffer); let target_content = "" 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.replace("https://temp-email-api.xxx.xxx", domain.value); target_path = relativePath; zip.file(relativePath, content); break; } } } if (!target_path) { tip.value = "Generation failed"; downloadUrl.value = ''; } const blob = await zip.generateAsync({ type: "blob" }); const url = window.URL.createObjectURL(blob); downloadUrl.value = url; } catch (error) { console.error("Error: ", error); } } </script>

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

   

2. Select Pages, choose Use direct upload

   

3. Enter the address of the deployed worker. The address should 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

   [!warning] Note The worker.dev domain is not accessible in China, please use a custom domain.

   Generate {{ tip }}

   Note

   You can also deploy manually. Download the zip from here: 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 domain, then deploy the new zip file

4. Select Pages, click Create Pages, modify the name, upload the downloaded zip package

   [!warning] 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.

   

<style module> .container { display: flex; justify-content: center; align-items: center; height: 100%; } .input { border: 2px solid deepskyblue; margin-right: 10px; width: 75%; border-radius: 5px; } .button { background-color: deepskyblue; padding: 5px 10px; border-radius: 5px; margin-right: 10px; } .button:hover { background-color: green; } </style>