Setup Admin

With the repository and data storage set up, we can now proceed to create the admin 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-admin 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-admin Pages app.
  • Go to the Custom Domains tab and configure the custom domain as admin.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
✨ 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_UPLOADWSRV
PlaintextVITE_SITEEX
PlaintextVITE_SUPER_ADMINsuper admin email
SecretVITE_OPENAI_API_KEY*************
SecretVITE_OPENAI_IMAGE_API_KEY*************
SecretVITE_PEXELS_API_KEY*************
SecretVITE_UNSPLASH_ACCESS_KEY*************
✨ EX is the shortcode for the example.com site, which will be used to connect to the central site.

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 admin app is now ready.
Table of Contents