Direct Upload
Direct Upload enables you to upload your prebuilt assets to Pages and deploy them to the Cloudflare global network. This guide will instruct you how to upload your assets using Wrangler or the drag and drop method.
Before you deploy your project with Direct Upload, run the appropriate build command to build your project.
After you have your prebuilt assets ready, there are two ways to begin uploading:
Below is the supported file types for each Direct Upload options:
- Wrangler: A single folder of assets. (Zip files are not supported.)
- Drag and drop: A zip file or single folder of assets.
To begin, install npm
↗. Then install Wrangler, the Developer Platform CLI.
Log in to Wrangler with the wrangler login
command. Then run the pages project create
command:
npx wrangler pages project create
You will then be prompted to specify the project name. Your project will be served at <PROJECT_NAME>.pages.dev
(or your project name plus a few random characters if your project name is already taken). You will also be prompted to specify your production branch.
Subsequent deployments will reuse both of these values (saved in your node_modules/.cache/wrangler
folder).
From here, you have created an empty project and can now deploy your assets for your first deployment and for all subsequent deployments in your production environment. To do this, run the wrangler pages deploy
command:
npx wrangler pages deploy <BUILD_OUTPUT_DIRECTORY>
Find the appropriate build output directory for your project in Build directory under Framework presets.
Your production deployment will be available at <PROJECT_NAME>.pages.dev
.
To deploy assets to a preview environment, run:
npx wrangler pages deploy <OUTPUT_DIRECTORY> --branch=<BRANCH_NAME>
For every branch you create, a branch alias will be available to you at <BRANCH_NAME>.<PROJECT_NAME>.pages.dev
.
If you would like to streamline the project creation and asset deployment steps, you can also use the deploy command to both create and deploy assets at the same time. If you execute this command first, you will still be prompted to specify your project name and production branch. These values will still be cached for subsequent deployments as stated above. If the cache already exists and you would like to create a new project, you will need to run the create
command.
If you would like to use Wrangler to obtain a list of all available projects for Direct Upload, use pages project list
:
npx wrangler pages project list
If you would like to use Wrangler to obtain a list of all unique preview URLs for a particular project, use pages deployment list
:
npx wrangler pages deployment list
For step-by-step directions on how to use Wrangler and continuous integration tools like GitHub Actions, Circle CI, and Travis CI together for continuous deployment, refer to Use Direct Upload with continuous integration.
To deploy with drag and drop:
- Log in to the Cloudflare dashboard ↗.
- In Account Home, select your account > Workers & Pages.
- Select Create application > Pages > Upload assets.
- Enter your project name in the provided field and drag and drop your assets.
- Select Deploy.
Your project will be served from <PROJECT_NAME>.pages.dev
. Next drag and drop your build output directory into the uploading frame. Once your files have been successfully uploaded, select Save and Deploy and continue to your newly deployed project.
After you have your project created, select Create a new deployment to begin a new version of your site. Next, choose whether your new deployment will be made to your production or preview environment. If choosing preview, you can create a new deployment branch or enter an existing one.
Upload method | File limit | File size |
---|---|---|
Wrangler | 20,000 files | 25 MiB |
Drag and drop | 1,000 files | 25 MiB |
If using the drag and drop method, a red warning symbol will appear next to an asset if too large and thus unsuccessfully uploaded. In this case, you may choose to delete that asset but you cannot replace it. In order to do so, you must reupload the entire project.
If your project is a Direct Upload project, you will not have the option to configure production branch controls. To update your production branch, you will need to manually call the Update Project endpoint in the API.
curl --request PATCH \"https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}" \--header "Authorization: Bearer <API_TOKEN>" \--header "Content-Type: application/json" \--data "{\"production_branch\": \"main\"}"
Drag and drop deployments made from the Cloudflare dashboard do not currently support compiling a functions
folder of Pages Functions. To deploy a functions
folder, you must use Wrangler. When deploying a project using Wrangler, if a functions
folder exists where the command is run, that functions
folder will be uploaded with the project.
However, note that a _worker.js
file is supported by both Wrangler and drag-and-drop deployments made from the dashboard.