Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 5 additions & 1 deletion src/content/docs/containers/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ In this guide, we will build and push a container image alongside your Worker co

## Deploy your first Container

If you already have a project with a `Dockerfile` or `Containerfile`, Wrangler can generate a singleton Containers Worker for you:

<PackageManagers type="exec" pkg="wrangler" args="deploy Dockerfile" />

Run the following command to create and deploy a new Worker with a container, from the starter template:

<PackageManagers
Expand All @@ -54,7 +58,7 @@ are faster, because they [reuse cached image layers](https://docs.docker.com/bui
:::note
After you deploy your Worker for the first time, you will need to wait several minutes until
it is ready to receive requests. Unlike Workers, Containers take a few minutes to be provisioned.
During this time, requests are sent to the Worker, but calls to the Container will error.
During this time, requests are sent to the Worker, but calls to the Container may return `503` or `500`.
:::

### Check deployment status
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ description: Integrate Workers development into your existing GitLab Pipelines w
products:
- workers
---

import { DashButton } from "~/components";

You can deploy Workers with [GitLab CI/CD](https://docs.gitlab.com/ee/ci/pipelines/index.html). Here is how you can set up your Gitlab CI/CD pipeline.
You can deploy Workers with [GitLab CI/CD](https://docs.gitlab.com/ee/ci/pipelines/index.html). Here is how you can set up your GitLab CI/CD pipeline.

## 1. Authentication

Expand Down Expand Up @@ -45,10 +46,12 @@ To set up your CI:

:::caution

Don't store the value of `CLOUDFLARE_API_TOKEN` in your repository, as it gives access to deploy Workers on your account. Instead, you should utilize your CI/CD provider's support for storing secrets.
Do not store the value of `CLOUDFLARE_API_TOKEN` in your repository. It gives access to deploy Workers on your account. Instead, use your CI/CD provider's support for storing secrets.
:::

2. Create a workflow that will be responsible for deploying the Worker. This workflow should run `wrangler deploy`. Review an example [GitHub Actions](https://docs.github.com/en/actions/using-workflows/about-workflows) workflow in the following section.
2. Create a workflow that runs `wrangler deploy`. Review an example GitLab pipeline in the following section.

If your repository does not have a Wrangler configuration file and uses [automatic project configuration](/workers/framework-guides/automatic-configuration/), run `wrangler deploy --yes` in CI. For Dockerfile-backed Containers, pass the Dockerfile or Containerfile target, or run `wrangler setup --yes` before deploying. Bare Dockerfile detection is not used in CI.

### GitLab Pipelines

Expand Down
168 changes: 147 additions & 21 deletions src/content/docs/workers/framework-guides/automatic-configuration.mdx

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ import {

[![Deploy to Workers](https://deploy.workers.cloudflare.com/button)](https://dash.cloudflare.com/?to=/:account/workers-and-pages/create/deploy-to-workers&repository=https://github.com/cloudflare/templates/tree/main/vite-react-template)

If you already have a React app built with Vite and do not need a Worker API, Wrangler can deploy it with `--experimental-auto-config-static-assets`. For more information, refer to [Deploy an existing project](/workers/framework-guides/automatic-configuration/#deploy-a-specific-target).

## What is React?

[React](https://react.dev/) is a framework for building user interfaces. It allows you to create reusable UI components and manage the state of your application efficiently. You can use React to build a single-page application (SPA), and combine it with a backend API running on Cloudflare Workers to create a full-stack application.
Expand Down
54 changes: 30 additions & 24 deletions src/content/docs/workers/framework-guides/web-apps/vue.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ import {

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

If you already have a Vue app built with Vite and do not need a Worker API, Wrangler can deploy it with `--experimental-auto-config-static-assets`. For more information, refer to [Deploy an existing project](/workers/framework-guides/automatic-configuration/#deploy-a-specific-target).

## 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, use code from the official Vue template, and provide the option to deploy instantly.
Expand All @@ -34,30 +36,34 @@ To use `create-cloudflare` to create a new Vue project with Workers Assets, run
args="my-vue-app --framework=vue"
/>

<Details header="How is this project set up?">
Below is a simplified file tree of the project.
<FileTree>
- my-vue-app
- src/
- App.vue
- server/
- index.ts
- index.html
- vite.config.ts
- wrangler.jsonc
</FileTree>

`wrangler.jsonc` is your [Wrangler configuration file](/workers/wrangler/configuration/).
In this file:
- `main` points to `server/index.ts`. This is your Worker, which is going to act as your backend API.
- `assets.not_found_handling` is set to `single-page-application`, which means that routes that are handled by your Vue SPA do not go to the Worker, and are thus free.
- If you want to add bindings to resources on Cloudflare's developer platform, you configure them here. Read more about [bindings](/workers/runtime-apis/bindings/).

`vite.config.ts` is set up to use the [Cloudflare Vite plugin](/workers/vite-plugin/). This runs your Worker in the Cloudflare Workers runtime, ensuring your local development environment is as close to production as possible.

`server/index.ts` is your backend API, which contains a single endpoint, `/api/`, that returns a text response.
At `src/App.vue`, your Vue app calls this endpoint to get a message back and displays this.
</Details>
<Details header="How is this project set up?">

Below is a simplified file tree of the project.

<FileTree>

- my-vue-app
- src/
- App.vue
- server/
- index.ts
- index.html
- vite.config.ts
- wrangler.jsonc

</FileTree>

`wrangler.jsonc` is your [Wrangler configuration file](/workers/wrangler/configuration/). In this file:

- `main` points to `server/index.ts`. This is your Worker, which acts as your backend API.
- `assets.not_found_handling` is set to `single-page-application`. Routes handled by your Vue SPA do not go to the Worker, and are free.
- Bindings to resources on Cloudflare's developer platform are configured here. For more information, refer to [Bindings](/workers/runtime-apis/bindings/).

`vite.config.ts` is set up to use the [Cloudflare Vite plugin](/workers/vite-plugin/). This runs your Worker in the Cloudflare Workers runtime, ensuring your local development environment is as close to production as possible.

`server/index.ts` is your backend API, which contains a single endpoint, `/api/`, that returns a text response. At `src/App.vue`, your Vue app calls this endpoint to get a message back and displays this.

</Details>

## 2. Develop locally with the [Cloudflare Vite plugin](/workers/vite-plugin/)

Expand Down
2 changes: 2 additions & 0 deletions src/content/docs/workers/runtime-apis/nodejs/http.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,8 @@ export default httpServerHandler({ port: 8080 });

The `httpServerHandler` function integrates Node.js HTTP servers with the Cloudflare Workers request model. It supports two API patterns:

If you already have an Express-style Node HTTP server, Wrangler can generate the Worker wrapper and Node.js compatibility configuration for you. Static assets and WebSocket routes may require manual migration. For more information, refer to [Deploy an existing project](/workers/framework-guides/automatic-configuration/#deploy-a-specific-target).

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Nit: This note is inserted between the introduction of the two API patterns and the code block that demonstrates them. It breaks the reader's flow. Consider moving it to a :::note callout after the code examples, or to the top of the httpServerHandler section.


```js
import http from "node:http";
import { httpServerHandler } from "cloudflare:node";
Expand Down
4 changes: 3 additions & 1 deletion src/content/docs/workers/static-assets/binding.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ import {
WranglerConfig,
} from "~/components";

Configuring a Worker with assets requires specifying a [directory](/workers/static-assets/binding/#directory) and, optionally, an [assets binding](/workers/static-assets/binding/), in your Worker's Wrangler file. The [assets binding](/workers/static-assets/binding/) allows you to dynamically fetch assets from within your Worker script (e.g. `env.ASSETS.fetch()`), similarly to how you might with a make a `fetch()` call with a [Service binding](/workers/runtime-apis/bindings/service-bindings/http/).
When you use persistent Worker configuration, configure assets by specifying a [directory](/workers/static-assets/binding/#directory) and, optionally, an [assets binding](/workers/static-assets/binding/), in your Worker's Wrangler file. The [assets binding](/workers/static-assets/binding/) allows you to dynamically fetch assets from within your Worker script, for example `env.ASSETS.fetch()`, similar to making a `fetch()` call with a [Service binding](/workers/runtime-apis/bindings/service-bindings/http/).

Wrangler can also deploy some static asset targets without creating a persistent Wrangler configuration file. Static directories that contain `index.html` deploy without a flag. Static Vite apps require `--experimental-auto-config-static-assets`. For more information, refer to [Deploy an existing project](/workers/framework-guides/automatic-configuration/#deploy-a-specific-target).

Only one collection of static assets can be configured in each Worker.

Expand Down
26 changes: 26 additions & 0 deletions src/content/docs/workers/static-assets/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,32 @@ Alternatively, you may prefer to build your website from scratch if:

This guide will instruct you through setting up and deploying a static site or a full-stack application without a framework on Workers.

## Deploy existing static assets

If you already have a standalone HTML file, Wrangler can deploy it directly. Pass the file to `wrangler deploy`:

<PackageManagers
type="exec"
pkg="wrangler"
args={"deploy index.html --name my-site --compatibility-date <YYYY-MM-DD>"}
/>

For an existing static directory, pass the directory directly:

<PackageManagers type="exec" pkg="wrangler" args="deploy ./site" />

For a static Vite app directory, pass the directory with `--experimental-auto-config-static-assets`:

<PackageManagers
type="exec"
pkg="wrangler"
args="deploy ./app --experimental-auto-config-static-assets"
/>

For a static Vite app directory, Wrangler runs the build command and deploys `dist`. The build output must contain `dist/index.html`.

For more information, refer to [Deploy an existing project](/workers/framework-guides/automatic-configuration/).

## Deploy a static site

This guide will instruct you through setting up and deploying a static site on Workers.
Expand Down
4 changes: 3 additions & 1 deletion src/content/docs/workers/static-assets/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,9 @@ Learn more about supported frameworks on Workers.

When you deploy your project, Cloudflare deploys both your Worker code and your static assets in a single operation. This deployment operates as a tightly integrated "unit" running across Cloudflare's network, combining static file hosting, custom logic, and global caching.

The **assets directory** specified in your [Wrangler configuration file](/workers/wrangler/configuration/#assets) is central to this design. During deployment, Wrangler automatically uploads the files from this directory to Cloudflare's infrastructure. Once deployed, requests for these assets are routed efficiently to locations closest to your users.
For projects with persistent configuration, the **assets directory** specified in your [Wrangler configuration file](/workers/wrangler/configuration/#assets) is central to this design. During deployment, Wrangler automatically uploads the files from this directory to Cloudflare's infrastructure. Once deployed, requests for these assets are routed efficiently to locations closest to your users.

If you already have a standalone HTML file or a static directory that contains `index.html`, Wrangler can deploy it without creating a Wrangler configuration file. Static Vite apps require `--experimental-auto-config-static-assets`. For more information, refer to [Deploy an existing project](/workers/framework-guides/automatic-configuration/#deploy-a-specific-target).

<WranglerConfig>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@ Unlike Pages, Workers has a distinctly broader set of features available to it,

Migrating from Cloudflare Pages to Cloudflare Workers is often a straightforward process. The following are some of the most common steps you will need to take to migrate your project.

For supported frameworks and project types, Wrangler can [configure or deploy your project automatically](/workers/framework-guides/automatic-configuration/). From your project root, run:

<PackageManagers type="exec" pkg="wrangler" args="setup" />

If Wrangler detects your project, review the generated configuration before deploying. Continue with the manual migration steps if you need to migrate Pages Functions, adjust static asset routing, or configure an unsupported project.

### Frameworks

If your Pages project uses [a popular framework](/workers/framework-guides/), most frameworks already have adapters available for Cloudflare Workers. Switch out any Pages-specific adapters for the Workers equivalent and follow any guidance that they provide.
Expand Down Expand Up @@ -321,27 +327,25 @@ If you are using Pages' built-in CI/CD system, you can swap this for Workers Bui

Pages automatically creates a preview environment for each project, and can be independently configured.

To get a similar experience in Workers, you must:

1. Ensure [preview URLs](/workers/versions-and-deployments/preview-urls/) are enabled (they are on by default).
To get a similar experience in Workers, ensure [preview URLs](/workers/versions-and-deployments/preview-urls/) are enabled. They are on by default.

<WranglerConfig>
<WranglerConfig>

```json
{
"name": "my-worker",
"compatibility_date": "$today",
"main": "./worker/index.ts",
"assets": {
"directory": "./dist/client/"
},
"preview_urls": true
}
```
```json
{
"name": "my-worker",
"compatibility_date": "$today",
"main": "./worker/index.ts",
"assets": {
"directory": "./dist/client/"
},
"preview_urls": true
}
```

</WranglerConfig>
</WranglerConfig>

1. [Enable non-production branch builds](/workers/ci-cd/builds/build-branches/#configure-non-production-branch-builds) in Workers Builds.
Then, [enable non-production branch builds](/workers/ci-cd/builds/build-branches/#configure-non-production-branch-builds) in Workers Builds.

Optionally, you can also [protect these preview URLs with Cloudflare Access](/workers/versions-and-deployments/preview-urls/#manage-access-to-preview-urls).

Expand Down Expand Up @@ -412,11 +416,11 @@ This compatibility matrix compares the features of Workers and Pages. Unless oth
| ----------------------------------------------------------------------------------------------------------- | ------- | ------- |
| **Writing, Testing, and Deploying Code** | | |
| [Cloudflare Vite plugin](/workers/vite-plugin/) | ✅ | ❌ |
| [Rollbacks](/workers/versions-and-deployments/rollbacks/) | ✅ | ✅ |
| [Gradual Deployments](/workers/versions-and-deployments/) | ✅ | ❌ |
| [Rollbacks](/workers/versions-and-deployments/rollbacks/) | ✅ | ✅ |
| [Gradual Deployments](/workers/versions-and-deployments/) | ✅ | ❌ |
| [Preview URLs](/workers/versions-and-deployments/preview-urls/) | ✅ | ✅ |
| [Testing tools](/workers/testing) | ✅ | ✅ |
| [Local Development](/workers/local-development/) | ✅ | ✅ |
| [Local Development](/workers/local-development/) | ✅ | ✅ |
| [Remote Development (`--remote`)](/workers/wrangler/commands/) | ✅ | ❌ |
| [Quick Editor in Dashboard](https://blog.cloudflare.com/improved-quick-edit) | ✅ | ❌ |
| **Static Assets** | | |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ difficulty: Beginner
pcx_content_type: tutorial
title: Migrate from Netlify to Workers
description: >-
Migrate your Netlify application to Cloudflare Workers. You should already have an existing project deployed on Netlified that you would like to host on Workers.
Migrate your Netlify application to Cloudflare Workers. You should already have an existing project deployed on Netlify that you would like to host on Workers.
products:
- workers
---

import { WranglerConfig } from "~/components";
import { PackageManagers, WranglerConfig } from "~/components";

In this tutorial, you will learn how to migrate your Netlify application to Cloudflare Workers.

Expand All @@ -19,6 +19,12 @@ You should already have an existing project deployed on Netlify that you would l

Some frameworks like Next.js, Astro with on demand rendering, and others have specific guides for migrating to Cloudflare Workers. Refer to our [framework guides](/workers/framework-guides/) for more information. If your framework has a **Deploy an existing project on Workers** guide, follow that guide for specific instructions. Otherwise, continue with the steps below.

For supported frameworks and project types, Wrangler can [configure or deploy your project automatically](/workers/framework-guides/automatic-configuration/). From your project root, run:

<PackageManagers type="exec" pkg="wrangler" args="deploy" />

If Wrangler detects your project, confirm the generated settings. If Wrangler cannot detect your project or you need to adjust routing behavior, continue with the manual migration steps.

## Find your build command and build directory

To move your application to Cloudflare Workers, you will need to know your build command and build directory. Cloudflare Workers will use this information to build and deploy your application. We will cover how to find these values in the Netlify Dashboard below.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ products:
- workers
---

import { WranglerConfig } from "~/components";
import { PackageManagers, WranglerConfig } from "~/components";

In this tutorial, you will learn how to migrate your Vercel application to Cloudflare Workers.

Expand All @@ -19,6 +19,12 @@ You should already have an existing project deployed on Vercel that you would li

Some frameworks like Next.js, Astro with on demand rendering, and others have specific guides for migrating to Cloudflare Workers. Refer to our [framework guides](/workers/framework-guides/) for more information. If your framework has a **Deploy an existing project on Workers** guide, follow that guide for specific instructions. Otherwise, continue with the steps below.

For supported frameworks and project types, Wrangler can [configure or deploy your project automatically](/workers/framework-guides/automatic-configuration/). From your project root, run:

<PackageManagers type="exec" pkg="wrangler" args="deploy" />

If Wrangler detects your project, confirm the generated settings. If Wrangler cannot detect your project or you need to adjust routing behavior, continue with the manual migration steps.

## Find your build command and build directory

To move your application to Cloudflare Workers, you will need to know your build command and build directory. Cloudflare Workers will use this information to build and deploy your application. We'll cover how to find these values in the Vercel Dashboard below.
Expand Down
Loading