Setup Frontend

With the repository and data storage set up, we can now proceed to create the frontend app using Cloudflare Pages.

  • Log in to your Cloudflare account.
  • Navigate to Compute (Workers) and select Workers & Pages.
  • Click on the Create button and select the Pages tab.
  • Choose Connect to Git, select the example repository, and click Begin Setup.
  • Leave the settings as default, except for setting the Framework Preset to Vue.
  • Click Save and then Deploy.

Configuration

Once the deployment is complete, follow these steps to set up the runtime configuration and custom domain:

  • Open the example Pages app.
  • Go to the Custom Domains tab and configure the custom domain as example.com and www.example.com.
  • Navigate to the Settings tab, and under the Runtime section, set Placements to Smart.

Storage Bindings

To connect the D1 database and R2 storage, follow these steps under the Bindings section by clicking on the + Add button:

TypeNameValue
D1 DatabaseD1example
R2 StorageR2example
R2 StorageR2Bauctusdigital
KV namespaceKVads.txt
✨ R2B serves as the primary data storage hub for centralized connectivity.

Variables and Secrets

To configure environment variables and secrets, follow these steps under the Variables and Secrets section by clicking on the + Add button:

TypeNameValue
PlaintextVITE_CDNhttps://cdn.example.com
PlaintextVITE_NAMEExample.com

Finalizing the Setup

After adding all the configurations, you'll need to redeploy the app. Follow these steps:

  • Navigate to the Deployments tab.
  • Select the most recent deployment item's option menu.
  • Click Retry Deployment and wait for the process to complete.

✨ Configuration! The frontend app is now ready.
Table of Contents