Skip to content

Commit 941312e

Browse files
committed
Add changelog entry
1 parent ec8acd3 commit 941312e

File tree

2 files changed

+35
-5
lines changed

2 files changed

+35
-5
lines changed
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: Enhanced support for static assets with the Cloudflare Vite plugin
3+
description: The Cloudflare Vite plugin now supports using all of Vite's static assets features in your Worker
4+
products:
5+
- workers
6+
date: 2025-06-27T12:00:00Z
7+
---
8+
9+
All of Vite's [static asset handling](https://vite.dev/guide/assets) features are now supported in your Worker as well as in your frontend.
10+
These include importing assets as URLs, importing as strings and importing from the `public` directory as well as inlining assets.
11+
12+
Additionally, assets imported as URLs in your Worker are now automatically moved to the client build output.
13+
14+
Here's an example that fetches an imported asset using the [assets binding](/workers/static-assets/binding/#binding) and modifies the response.
15+
16+
```ts
17+
import myImage from "./my-image.png";
18+
19+
export default {
20+
async fetch(request, env) {
21+
const response = await env.ASSETS.fetch(new URL(myImage, request.url));
22+
const modifiedResponse = new Response(response.body, response);
23+
modifiedResponse.headers.append("my-header", "imported-asset");
24+
25+
return modifiedResponse;
26+
},
27+
};
28+
```
29+
30+
See [Static Assets](/workers/vite-plugin/reference/static-assets/) in the Vite plugin docs for more info.

src/content/docs/workers/vite-plugin/reference/static-assets.mdx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,23 +38,23 @@ assets = { not_found_handling = "single-page-application" }
3838
## Features
3939

4040
The Vite plugin ensures that all of Vite's [static asset handling](https://vite.dev/guide/assets) features are supported in your Worker as well as in your frontend.
41-
This includes importing assets as URLs, inlining assets, importing assets as strings and importing assets from the `public` directory.
41+
These include importing assets as URLs, importing as strings and importing from the `public` directory as well as inlining assets.
4242

4343
Assets [imported as URLs](https://vite.dev/guide/assets#importing-asset-as-url) can be fetched via the [assets binding](/workers/static-assets/binding/#binding).
4444
As the binding's `fetch` method requires a full URL, we recommend using the request URL as the `base`.
4545
This is demonstrated in the following example:
4646

4747
```ts
48-
import assetPath from "./my-image.svg";
48+
import myImage from "./my-image.png";
4949

5050
export default {
51-
async fetch(request, env) {
52-
return env.ASSETS.fetch(new URL(assetPath, request.url));
51+
fetch(request, env) {
52+
return env.ASSETS.fetch(new URL(myImage, request.url));
5353
},
5454
};
5555
```
5656

57-
Assets imported as URLs in your Worker will automatically be moved from the Worker to the client build output.
57+
Assets imported as URLs in your Worker will automatically be moved to the client build output.
5858
When running `vite build` the paths of any moved assets will be displayed in the console.
5959

6060
:::note

0 commit comments

Comments
 (0)