Appearance

Updating visuals

If you see any images containing outdated UI, please bear with us.

We are updating all content as quickly as possible to mirror our new UI.

How to self-host on Cloudflare ​

This guide will walk you through the steps required to self-host your WeWeb application on Cloudflare.

INTERFACE HOSTING

This guide covers hosting the interface of your WeWeb app on Cloudflare Pages.

If your project also depends on backend services, database hosting, file storage, or authentication hosting, you need to host those parts separately as well.

Learn how to self-host a fullstack app on AWS →

Prerequisites ​

  • A Cloudflare account (free)
  • An Essential or higher WeWeb workspace plan subscription

Let's start with Cloudflare first: ​

  1. On Cloudflare's dashboard, click on the Workers & Pages section.

Cloudflare's dashboard on Workers and Pages section

  1. Make sure you are on the Overview tab. If you already have another Worker in this section, click on the Create button and then go to the Pages tab.
  2. Go to the second section on the page and click on "Upload assets".

Cloudflare's overview tab

  1. Give your project a name and then click on Create project.

Cloudflare's Create project section

WeWeb ​

  1. In the WeWeb editor, generate a code export of your app. Click Publish at the top right, choose Export, then click Generate code export.

TIP

Your project must have been published at least once before you can export the project files.

Learn more about exporting your code →

  1. Next, go to your WeWeb dashboard and click on your project's card. The project opens on its Deployments tab, where your export appears with the Exported status.

  2. Click on the three dots at the end of the exported version's row and select Download built Interface files. This will download a zip directory of the project files to your device. This zip archive includes the compiled project (a Vue.js application) with all the files necessary for hosting it on Cloudflare.

Downloading the built interface files of an export

Cloudflare ​

  1. Upload the zip archive you just downloaded from WeWeb into the Upload your project assets section. Make sure you select Upload zip before you upload.

Zip archive upload on Cloudflare

  1. Click the "Deploy site" button after all files are successfully uploaded.

Deploy site button

Upon deploying, Cloudflare will provide you with some additional information and options:

  • Cloudflare site URL
  • Option to add a custom domain

You can ignore the other options for now.

Additional Cloudflare information

10, If you click on "Continue to project", you will be redirected to the Deployments tab of your applications's Worker:

Cloudflare's deployment tab

Your application is now live and fully self-hosted on Cloudflare!

Application open on Safari with its visible URL at the top

Making changes to the self-hosted application ​

  1. Make changes in your app in WeWeb.
  2. Publish the application again.
  3. Export the code following the steps described earlier.
  4. Download new zip file for latest version.
  5. In the Overview of Workers & Pages, go to the Deployments tab and click on Create a new deployment.

New deployment in the Overview tab being created

  1. Select your deployment environment
  2. Upload the new zip archive.
  3. Click on Save and deploy.

Save and deploy button

After a successful deployment, your changes will be reflected in the self-hosted application.

Another success message with the link to the application underneath it

TIP

Always test your updated application thoroughly after deployment to ensure all changes are correctly reflected and functioning as expected.

By following these steps, you can easily export your WeWeb project and self-host it on Cloudflare, as well as keep it updated with any changes you make in WeWeb.