WeWeb Documentation

How to self-host on Cloudflare ​

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

Prerequisites ​

  • A Cloudflare account (free)
  • A Starter or Scale annual WeWeb project subscription Self-hosting for the first time

Let’s start with Cloudflare first. ​

Cloudflare ​

  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. Next, go to your project dashboard in WeWeb. Go to the Deployments tab.

WeWeb editor

TIP

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

  1. Here, you will see Staging and Production environments:

WeWev's production and staging environments

TIP

In this guide, we will export code from the production environment, but you can also export the staging version of your app if you are on the Scale plan. If you recently made changes on staging and you want to export the app with those changes, promote the staging version to production first.

  1. Click on the three dots on the right (⫶) and select Download project 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.

Project files download

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.