diff --git a/src/content/docs/cloudflare-for-platforms/workers-for-platforms/configuration/static-assets.mdx b/src/content/docs/cloudflare-for-platforms/workers-for-platforms/configuration/static-assets.mdx
index 4412286ed8ff5e..8314f3b05fe515 100644
--- a/src/content/docs/cloudflare-for-platforms/workers-for-platforms/configuration/static-assets.mdx
+++ b/src/content/docs/cloudflare-for-platforms/workers-for-platforms/configuration/static-assets.mdx
@@ -3,25 +3,33 @@ pcx_content_type: concept
title: Static assets
description: Host static assets on Cloudflare's global network and deliver faster load times worldwide with Workers for Platforms.
---
+
+import { Aside } from "@astrojs/starlight/components";
+
Workers for Platforms lets you deploy front-end applications at scale. By hosting static assets on Cloudflare's global network, you can deliver faster load times worldwide and eliminate the need for external infrastructure. You can also combine these static assets with dynamic logic in Cloudflare Workers, providing a full-stack experience for your customers.
### What you can build
#### Static sites
+
Host and serve HTML, CSS, JavaScript, and media files directly from Cloudflare's network, ensuring fast loading times worldwide. This is ideal for blogs, landing pages, and documentation sites.
#### Full-stack applications
+
Combine asset hosting with Cloudflare Workers to power dynamic, interactive applications. Store and retrieve data using Cloudflare KV, D1, and R2 Storage, allowing you to serve both front-end assets and backend logic from a single Worker.
### Benefits
#### Global caching for faster performance
+
Cloudflare automatically caches static assets at data centers worldwide, reducing latency and improving load times by up to 2x for users everywhere.
#### Scalability without infrastructure management
+
Your applications scale automatically to handle high traffic without requiring you to provision or manage infrastructure. Cloudflare dynamically adjusts to demand in real time.
#### Unified deployment for static and dynamic content
+
Deploy front-end assets alongside server-side logic, all within Cloudflare Workers. This eliminates the need for a separate hosting provider and ensures a streamlined deployment process.
---
@@ -45,22 +53,29 @@ After these steps are completed, the User Worker's static assets will be live on
Before sending any file data, you need to tell Cloudflare which files you intend to upload. That list of files is called a manifest. Each item in the manifest includes:
-* A file path (for example, `"/index.html"` or `"/assets/logo.png"`)
-* A hash (32-hex characters) representing the file contents
-* The file size in bytes
+- A file path (for example, `"/index.html"` or `"/assets/logo.png"`)
+- A hash (32-hex characters) representing the file contents
+- The file size in bytes
+
+
#### Example manifest (JSON)
```json
{
- "/index.html": {
- "hash": "08f1dfda4574284ab3c21666d1ee8c7d4",
- "size": 1234
- },
- "/styles.css": {
- "hash": "36b8be012ee77df5f269b11b975611d3",
- "size": 5678
- }
+ "/index.html": {
+ "hash": "08f1dfda4574284ab3c21666d1ee8c7d4",
+ "size": 1234
+ },
+ "/styles.css": {
+ "hash": "36b8be012ee77df5f269b11b975611d3",
+ "size": 5678
+ }
}
```
@@ -71,8 +86,9 @@ POST /accounts/{account_id}/workers/dispatch/namespaces/{namespace}/scripts/{scr
```
Path Parameters:
-* `namespace`: Name of the Workers for Platforms dispatch namespace
-* `script_name`: Name of the User Worker
+
+- `namespace`: Name of the Workers for Platforms dispatch namespace
+- `script_name`: Name of the User Worker
In the request body, include a JSON object listing each file path along with its hash and size. This helps Cloudflare identify which files you intend to upload and allows Cloudflare to check if any of them are already stored.
@@ -105,8 +121,8 @@ You can compute a SHA-256 digest of the file contents, then truncate or otherwis
If all the files are already stored on Cloudflare, the response will only return the JWT token. If new or updated files are needed, the response will return:
-* `jwt`: An upload token (valid for 1 hour) which will be used in the API request to upload the file contents (Step 2).
-* `buckets`: An array of file-hash groups indicating which files to upload together. Files that have been recently uploaded won't appear in buckets, since Cloudflare already has them.
+- `jwt`: An upload token (valid for 1 hour) which will be used in the API request to upload the file contents (Step 2).
+- `buckets`: An array of file-hash groups indicating which files to upload together. Files that have been recently uploaded won't appear in buckets, since Cloudflare already has them.
:::note
This step alone does not store files on Cloudflare. You must upload the actual file data in the next step.
@@ -118,6 +134,10 @@ If the response to the Upload Session API returns `buckets`, that means you have
Use the [Workers Assets Upload API](https://developers.cloudflare.com/api/resources/workers/subresources/assets/subresources/upload/) to transmit the raw file bytes in base64-encoded format for any missing or changed files. Once uploaded, Cloudflare will store these files so they can then be attached to a User Worker.
+
+
#### API Request Authentication
Unlike most Cloudflare API calls that use an account-wide API token in the Authorization header, uploading file contents requires using the short-lived JWT token returned in the `jwt` field of the `assets-upload-session` response.
@@ -131,10 +151,11 @@ Authorization: Bearer
This token is valid for one hour and must be supplied for each upload request to the Workers Assets Upload API.
#### File fields (multipart/form-data)
+
You must send the files as multipart/form-data with base64-encoded content:
-* Field name: The file hash (for example, `36b8be012ee77df5f269b11b975611d3`)
-* Field value: A Base64-encoded string of the file's raw bytes
+- Field name: The file hash (for example, `36b8be012ee77df5f269b11b975611d3`)
+- Field value: A Base64-encoded string of the file's raw bytes
#### Example: Uploading multiple files within a single bucket
@@ -159,9 +180,9 @@ curl -X POST \
-F "36b8be012ee77df5f269b11b975611d3="
```
-* `` is the token from step 1's assets-upload-session response
-* `` is the Base64-encoded content of index.html
-* `` is the Base64-encoded content of styles.css
+- `` is the token from step 1's assets-upload-session response
+- `` is the Base64-encoded content of index.html
+- `` is the Base64-encoded content of styles.css
If you have multiple buckets (for example, `[["hashA"], ["hashB"], ["hashC"]]`), you might need to repeat this process for each bucket, making one request per bucket group.
@@ -169,12 +190,12 @@ Once every file in the manifest has been uploaded, a status code of `201` will b
```json
{
- "success": true,
- "errors": [],
- "messages": [],
- "result": {
- "jwt": ""
- }
+ "success": true,
+ "errors": [],
+ "messages": [],
+ "result": {
+ "jwt": ""
+ }
}
```
@@ -206,9 +227,9 @@ curl -X PUT \
-F 'index.js=@/path/to/index.js;type=application/javascript'
```
-* The `"jwt": ""` links the newly uploaded files to the Worker
-* Including "html_handling" (or other fields under "config") is optional and can customize how static files are served
-* If the user's Worker code has not changed, you can omit the code file or re-upload the same index.js
+- The `"jwt": ""` links the newly uploaded files to the Worker
+- Including "html_handling" (or other fields under "config") is optional and can customize how static files are served
+- If the user's Worker code has not changed, you can omit the code file or re-upload the same index.js
Once this PUT request succeeds, the files are served on the User Worker. Requests routed to that Worker will serve the new or updated static assets.
@@ -236,8 +257,8 @@ binding = "ASSETS"
-* `directory`: The local folder containing your static files (for example, `./public`).
-* `binding`: The binding name used to reference these assets within your Worker code.
+- `directory`: The local folder containing your static files (for example, `./public`).
+- `binding`: The binding name used to reference these assets within your Worker code.
### 1. Organize your files
@@ -247,11 +268,12 @@ If you need to reference these files in your Worker script to serve them dynamic
```js
export default {
- async fetch(request, env, ctx) {
- return env.ASSETS.fetch(request);
- },
+ async fetch(request, env, ctx) {
+ return env.ASSETS.fetch(request);
+ },
};
```
+
### 2. Deploy the User Worker with the static assets
Run Wrangler to publish both your Worker code and the static assets:
@@ -260,4 +282,4 @@ Run Wrangler to publish both your Worker code and the static assets:
npx wrangler deploy --name --dispatch-namespace
```
-Wrangler will automatically detect your static files, bundle them, and upload them to Cloudflare along with your Worker code.
\ No newline at end of file
+Wrangler will automatically detect your static files, bundle them, and upload them to Cloudflare along with your Worker code.