Skip to content

remove beta tags for static assets #21500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 8, 2025
Merged

remove beta tags for static assets #21500

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
87321fd
update beta tags
emily-shen Apr 8, 2025
d77de8f
remove qwik from beta list
emily-shen Apr 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/content/docs/workers/frameworks/framework-guides/angular.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import {
PackageManagers,
} from "~/components";

In this guide, you will create a new [Angular](https://angular.dev/) application and deploy to Cloudflare Workers (with the new [<InlineBadge preset="beta" /> Workers Assets](/workers/static-assets/)).
In this guide, you will create a new [Angular](https://angular.dev/) application and deploy to Cloudflare Workers (with the new [Workers Assets](/workers/static-assets/)).
Copy link
Contributor

@vicb vicb Apr 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: "with the new" do we want to keep the "new" ?


## 1. Set up a new project

Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, initiate Angular's official setup tool, and provide the option to deploy instantly.

To use `create-cloudflare` to create a new Angular project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
To use `create-cloudflare` to create a new Angular project with Workers Assets, run the following command:

<PackageManagers
type="create"
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/workers/frameworks/framework-guides/astro.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import {
PackageManagers,
} from "~/components";

In this guide, you will create a new [Astro](https://astro.build/) application and deploy to Cloudflare Workers (with the new [<InlineBadge preset="beta" /> Workers Assets](/workers/static-assets/)).
In this guide, you will create a new [Astro](https://astro.build/) application and deploy to Cloudflare Workers (with the new [Workers Assets](/workers/static-assets/)).

## 1. Set up a new project

Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, initiate Astro's official setup tool, and provide the option to deploy instantly.

To use `create-cloudflare` to create a new Astro project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
To use `create-cloudflare` to create a new Astro project with Workers Assets, run the following command:

<PackageManagers
type="create"
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/workers/frameworks/framework-guides/docusaurus.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import {
PackageManagers,
} from "~/components";

In this guide, you will create a new [Docusaurus](https://docusaurus.io/) application and deploy to Cloudflare Workers (with the new [<InlineBadge preset="beta" /> Workers Assets](/workers/static-assets/)).
In this guide, you will create a new [Docusaurus](https://docusaurus.io/) application and deploy to Cloudflare Workers (with the new [Workers Assets](/workers/static-assets/)).

## 1. Set up a new project

Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, initiate Docusaurus' official setup tool, and provide the option to deploy instantly.

To use `create-cloudflare` to create a new Docusaurus project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
To use `create-cloudflare` to create a new Docusaurus project with Workers Assets, run the following command:

<PackageManagers
type="create"
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/workers/frameworks/framework-guides/gatsby.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import {
PackageManagers,
} from "~/components";

In this guide, you will create a new [Gatsby](https://www.gatsbyjs.com/) application and deploy to Cloudflare Workers (with the new [<InlineBadge preset="beta" /> Workers Assets](/workers/static-assets/)).
In this guide, you will create a new [Gatsby](https://www.gatsbyjs.com/) application and deploy to Cloudflare Workers (with the new [Workers Assets](/workers/static-assets/)).

## 1. Set up a new project

Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, initiate Gatsby's official setup tool, and provide the option to deploy instantly.

To use `create-cloudflare` to create a new Gatsby project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
To use `create-cloudflare` to create a new Gatsby project with Workers Assets, run the following command:

<PackageManagers
type="create"
Expand Down
155 changes: 85 additions & 70 deletions src/content/docs/workers/frameworks/framework-guides/nextjs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ pcx_content_type: how-to
title: Next.js
head: []
description: Create an Next.js application and deploy it to Cloudflare Workers with Workers Assets.
sidebar:
badge: Beta
---

import {
Expand All @@ -11,9 +13,13 @@ import {
Render,
PackageManagers,
Steps,
WranglerConfig
WranglerConfig,
} from "~/components";

:::note
The OpenNext adapter is in currently in beta.
:::

**Start from CLI** - scaffold a Next.js project on Workers.

<PackageManagers
Expand All @@ -22,9 +28,7 @@ import {
args={"--framework=next --platform=workers"}
/>

:::note
This is a simple getting started guide. For detailed documentation on how the to use the Cloudflare OpenNext adapter, visit the [OpenNext website](https://opennext.js.org/cloudflare).
:::

## What is Next.js?

Expand All @@ -40,38 +44,45 @@ You can deploy your Next.js app to Cloudflare Workers using the OpenNext adaptor

1. **Create a new project with the create-cloudflare CLI (C3).**

<PackageManagers
type="create"
pkg="cloudflare@latest my-next-app"
args={"--framework=next --platform=workers"}
/>

<Details header="What's happening behind the scenes?">
When you run this command, C3 creates a new project directory, initiates [Next.js's official setup tool](https://nextjs.org/docs/app/api-reference/cli/create-next-app), and configures the project for Cloudflare. It then offers the option to instantly deploy your application to Cloudflare.
</Details>
<PackageManagers
type="create"
pkg="cloudflare@latest my-next-app"
args={"--framework=next --platform=workers"}
/>

2. **Develop locally.**
<Details header="What's happening behind the scenes?">
When you run this command, C3 creates a new project directory, initiates
[Next.js's official setup
tool](https://nextjs.org/docs/app/api-reference/cli/create-next-app), and
configures the project for Cloudflare. It then offers the option to
instantly deploy your application to Cloudflare.
</Details>

After creating your project, run the following command in your project directory to start a local development server.
The command uses the Next.js development server. It offers the best developer experience by quickly reloading your app every time the source code is updated.
2. **Develop locally.**

<PackageManagers type="run" args="dev" />
After creating your project, run the following command in your project directory to start a local development server.
The command uses the Next.js development server. It offers the best developer experience by quickly reloading your app every time the source code is updated.

3. **Test and preview your site with the Cloudflare adapter.**
<PackageManagers type="run" args="dev" />

<PackageManagers type="run" args="preview" />
3. **Test and preview your site with the Cloudflare adapter.**

<Details header="What's the difference between dev and preview?">
The command used in the previous step uses the Next.js development server, which runs in Node.js.
However, your deployed application will run on Cloudflare Workers, which uses the `workerd` runtime. Therefore when running integration tests and previewing your application, you should use the preview command, which is more accurate to production, as it executes your application in the `workerd` runtime using `wrangler dev`.
</Details>
<PackageManagers type="run" args="preview" />

<Details header="What's the difference between dev and preview?">
The command used in the previous step uses the Next.js development server,
which runs in Node.js. However, your deployed application will run on
Cloudflare Workers, which uses the `workerd` runtime. Therefore when
running integration tests and previewing your application, you should use
the preview command, which is more accurate to production, as it executes
your application in the `workerd` runtime using `wrangler dev`.
</Details>

4. **Deploy your project.**
4. **Deploy your project.**

You can deploy your project to a [`*.workers.dev` subdomain](/workers/configuration/routing/workers-dev/) or a [custom domain](/workers/configuration/routing/custom-domains/) from your local machine or any CI/CD system (including [Workers Builds](/workers/ci-cd/#workers-builds)). Use the following command to build and deploy. If you're using a CI service, be sure to update your "deploy command" accordingly.
You can deploy your project to a [`*.workers.dev` subdomain](/workers/configuration/routing/workers-dev/) or a [custom domain](/workers/configuration/routing/custom-domains/) from your local machine or any CI/CD system (including [Workers Builds](/workers/ci-cd/#workers-builds)). Use the following command to build and deploy. If you're using a CI service, be sure to update your "deploy command" accordingly.

<PackageManagers type="run" args="deploy" />
<PackageManagers type="run" args="deploy" />

</Steps>

Expand All @@ -81,76 +92,80 @@ You can convert an existing Next.js application to run on Cloudflare

<Steps>

1. **Install [`@opennextjs/cloudflare`](https://www.npmjs.com/package/@opennextjs/cloudflare)**
1. **Install [`@opennextjs/cloudflare`](https://www.npmjs.com/package/@opennextjs/cloudflare)**

<PackageManagers type="install" pkg="@opennextjs/cloudflare@latest" />
<PackageManagers type="install" pkg="@opennextjs/cloudflare@latest" />

2. **Add a Wrangler configuration file**
2. **Add a Wrangler configuration file**

In your project root, create a [Wrangler configuration file](/workers/wrangler/configuration/) with the following content:
In your project root, create a [Wrangler configuration file](/workers/wrangler/configuration/) with the following content:

<WranglerConfig>
```toml
main = ".open-next/worker.js"
name = "my-app"
compatibility_date = "2025-03-25"
compatibility_flags = ["nodejs_compat"]
assets = { directory = ".open-next/assets", binding = "ASSETS" }
```
</WranglerConfig>
<WranglerConfig>
```toml
main = ".open-next/worker.js"
name = "my-app"
compatibility_date = "2025-03-25"
compatibility_flags = ["nodejs_compat"]
[assets]
directory = "./dist"
binding = "ASSETS"
```
</WranglerConfig>

:::note
As shown above, you must enable the [`nodejs_compat` compatibility flag](/workers/runtime-apis/nodejs/) _and_ set your [compatibility date](/workers/configuration/compatibility-dates/) to `2024-09-23` or later for your Next.js app to work with @opennextjs/cloudflare.
:::
:::note
As shown above, you must enable the [`nodejs_compat` compatibility flag](/workers/runtime-apis/nodejs/) _and_ set your [compatibility date](/workers/configuration/compatibility-dates/) to `2024-09-23` or later for your Next.js app to work with @opennextjs/cloudflare.
:::

3. **Add a configuration file for OpenNext**
3. **Add a configuration file for OpenNext**

In your project root, create an OpenNext configuration file named `open-next.config.ts` with the following content:
In your project root, create an OpenNext configuration file named `open-next.config.ts` with the following content:

```ts
import { defineCloudflareConfig } from "@opennextjs/cloudflare";
```ts
import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig();
```
export default defineCloudflareConfig();
```

:::note
`open-next.config.ts` is where you can configure the caching, see the [adapter documentation](https://opennext.js.org/cloudflare/caching) for more information
:::
:::note
`open-next.config.ts` is where you can configure the caching, see the [adapter documentation](https://opennext.js.org/cloudflare/caching) for more information
:::

4. **Update `package.json`**
4. **Update `package.json`**

You can add the following scripts to your `package.json`:
You can add the following scripts to your `package.json`:

```json
"preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
"deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
"cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
```
```json
"preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
"deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
"cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
```

<Details header="Usage">
- `preview`: Builds your app and serves it locally, allowing you to quickly preview your app running locally in the Workers runtime, via a single command.
- `deploy`: Builds your app, and then deploys it to Cloudflare
- `cf-typegen`: Generates a `cloudflare-env.d.ts` file at the root of your project containing the types for the env.
</Details>
<Details header="Usage">
- `preview`: Builds your app and serves it locally, allowing you to
quickly preview your app running locally in the Workers runtime, via a
single command. - `deploy`: Builds your app, and then deploys it to
Cloudflare - `cf-typegen`: Generates a `cloudflare-env.d.ts` file at the
root of your project containing the types for the env.
</Details>

5. **Develop locally.**

After creating your project, run the following command in your project directory to start a local development server.
The command uses the Next.js development server. It offers the best developer experience by quickly reloading your app after your source code is updated.
After creating your project, run the following command in your project directory to start a local development server.
The command uses the Next.js development server. It offers the best developer experience by quickly reloading your app after your source code is updated.

<PackageManagers type="run" args="dev" />
<PackageManagers type="run" args="dev" />

6. **Test your site with the Cloudflare adapter.**

The command used in the previous step uses the Next.js development server to offer a great developer experience.
However your application will run on Cloudflare Workers so you want to run your integration tests and verify that your application workers correctly in this environment.
The command used in the previous step uses the Next.js development server to offer a great developer experience.
However your application will run on Cloudflare Workers so you want to run your integration tests and verify that your application workers correctly in this environment.

<PackageManagers type="run" args="preview" />
<PackageManagers type="run" args="preview" />

7. **Deploy your project.**

You can deploy your project to a [`*.workers.dev` subdomain](/workers/configuration/routing/workers-dev/) or a [custom domain](/workers/configuration/routing/custom-domains/) from your local machine or any CI/CD system (including [Workers Builds](/workers/ci-cd/#workers-builds)). Use the following command to build and deploy. If you're using a CI service, be sure to update your "deploy command" accordingly.
You can deploy your project to a [`*.workers.dev` subdomain](/workers/configuration/routing/workers-dev/) or a [custom domain](/workers/configuration/routing/custom-domains/) from your local machine or any CI/CD system (including [Workers Builds](/workers/ci-cd/#workers-builds)). Use the following command to build and deploy. If you're using a CI service, be sure to update your "deploy command" accordingly.

<PackageManagers type="run" args="deploy" />
<PackageManagers type="run" args="deploy" />

</Steps>
4 changes: 2 additions & 2 deletions src/content/docs/workers/frameworks/framework-guides/nuxt.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import {
PackageManagers,
} from "~/components";

In this guide, you will create a new [Nuxt](https://nuxt.com/) application and deploy to Cloudflare Workers (with the new [<InlineBadge preset="beta" /> Workers Assets](/workers/static-assets/)).
In this guide, you will create a new [Nuxt](https://nuxt.com/) application and deploy to Cloudflare Workers (with the new [Workers Assets](/workers/static-assets/)).

## 1. Set up a new project

Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, initiate Nuxt's official setup tool, and provide the option to deploy instantly.

To use `create-cloudflare` to create a new Nuxt project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
To use `create-cloudflare` to create a new Nuxt project with Workers Assets, run the following command:
Copy link
Contributor

@vicb vicb Apr 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a link to Nuxt?

Copy link
Contributor Author

@emily-shen emily-shen Apr 8, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a link to nuxt in the paragraph just above :) same for the other frameworks


<PackageManagers
type="create"
Expand Down
10 changes: 8 additions & 2 deletions src/content/docs/workers/frameworks/framework-guides/qwik.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ pcx_content_type: how-to
title: Qwik
head: []
description: Create a Qwik application and deploy it to Cloudflare Workers with Workers Assets.
sidebar:
badge: Beta
---

import {
Expand All @@ -13,13 +15,17 @@ import {
PackageManagers,
} from "~/components";

In this guide, you will create a new [Qwik](https://qwik.dev/) application and deploy to Cloudflare Workers (with the new [<InlineBadge preset="beta" /> Workers Assets](/workers/static-assets/)).
:::note
Support for Qwik projects on Cloudflare Workers is currently in beta.
:::

In this guide, you will create a new [Qwik](https://qwik.dev/) application and deploy to Cloudflare Workers (with the new [Workers Assets](/workers/static-assets/)).

## 1. Set up a new project

Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, initiate Qwik's official setup tool, and provide the option to deploy instantly.

To use `create-cloudflare` to create a new Qwik project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
To use `create-cloudflare` to create a new Qwik project with Workers Assets, run the following command:
Copy link
Contributor

@vicb vicb Apr 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a link to Qwik?


<PackageManagers
type="create"
Expand Down
10 changes: 8 additions & 2 deletions src/content/docs/workers/frameworks/framework-guides/solid.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ pcx_content_type: how-to
title: Solid
head: []
description: Create a Solid application and deploy it to Cloudflare Workers with Workers Assets.
sidebar:
badge: Beta
---

import {
Expand All @@ -13,13 +15,17 @@ import {
PackageManagers,
} from "~/components";

In this guide, you will create a new [Solid](https://www.solidjs.com/) application and deploy to Cloudflare Workers (with the new [<InlineBadge preset="beta" /> Workers Assets](/workers/static-assets/)).
:::note
Support for SolidStart projects on Cloudflare Workers is currently in beta.
:::

In this guide, you will create a new [Solid](https://www.solidjs.com/) application and deploy to Cloudflare Workers (with the new [Workers Assets](/workers/static-assets/)).

## 1. Set up a new project

Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, initiate Solid's official setup tool, and provide the option to deploy instantly.

To use `create-cloudflare` to create a new Solid project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
To use `create-cloudflare` to create a new Solid project with Workers Assets, run the following command:

<PackageManagers
type="create"
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/workers/frameworks/framework-guides/svelte.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import {
PackageManagers,
} from "~/components";

In this guide, you will create a new [Svelte](https://svelte.dev/) application and deploy to Cloudflare Workers (with the new [<InlineBadge preset="beta" /> Workers Assets](/workers/static-assets/)).
In this guide, you will create a new [Svelte](https://svelte.dev/) application and deploy to Cloudflare Workers (with the new [Workers Assets](/workers/static-assets/)).

## 1. Set up a new project

Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up a new project. C3 will create a new project directory, initiate Svelte's official setup tool, and provide the option to deploy instantly.

To use `create-cloudflare` to create a new Svelte project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
To use `create-cloudflare` to create a new Svelte project with Workers Assets, run the following command:

<PackageManagers
type="create"
Expand Down
Loading