Skip to content

Commit bc3bcbd

Browse files
committed
Add some framework guides for Workers Assets
1 parent 6bce723 commit bc3bcbd

File tree

8 files changed

+449
-0
lines changed

8 files changed

+449
-0
lines changed
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
pcx_content_type: how-to
3+
title: Angular
4+
sidebar:
5+
badge: Beta
6+
head: []
7+
description: Create an Angular application and deploy it to Cloudflare Workers with Workers Assets.
8+
---
9+
10+
import {
11+
Badge,
12+
Description,
13+
InlineBadge,
14+
Render,
15+
PackageManagers,
16+
} from "~/components";
17+
18+
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/configuration/assets/)).
19+
20+
## 1. Set up a new project
21+
22+
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.
23+
24+
To use `create-cloudflare` to create a new Angular project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
25+
26+
<PackageManagers
27+
type="create"
28+
pkg="cloudflare@latest my-angular-app"
29+
args={"--framework=angular --experimental"}
30+
/>
31+
32+
<Render
33+
file="c3-post-run-steps"
34+
product="workers"
35+
params={{
36+
category: "web-framework",
37+
framework: "Angular",
38+
}}
39+
/>
40+
41+
After setting up your project, change your directory by running the following command:
42+
43+
```sh
44+
cd my-angular-app
45+
```
46+
47+
## 2. Develop locally
48+
49+
After you have created your project, run the following command in the project directory to start a local server. This will allow you to preview your project locally during development.
50+
51+
<PackageManagers type="run" args={"dev"} />
52+
53+
## 3. Deploy your Project
54+
55+
Deploy your Worker via Wrangler to a `*.workers.dev` subdomain or configure a [Custom Domain](/workers/configuration/routing/custom-domains/).
56+
57+
<PackageManagers type="run" args={"deploy"} />
58+
59+
---
60+
61+
## Bindings
62+
63+
TODO
64+
65+
## Static assets
66+
67+
You can serve static assets your Angular application by placing them in [the `./public/` directory](https://angular.dev/reference/configs/file-structure#workspace-configuration-files). This can be useful for resource files such as images, stylesheets, fonts, and manifests.
68+
69+
<Render file="workers-assets-routing-summary" />
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
pcx_content_type: how-to
3+
title: Astro
4+
sidebar:
5+
badge: Beta
6+
head: []
7+
description: Create an Astro application and deploy it to Cloudflare Workers with Workers Assets.
8+
---
9+
10+
import {
11+
Badge,
12+
Description,
13+
InlineBadge,
14+
Render,
15+
PackageManagers,
16+
} from "~/components";
17+
18+
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/configuration/assets/)).
19+
20+
## 1. Set up a new project
21+
22+
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.
23+
24+
To use `create-cloudflare` to create a new Astro project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
25+
26+
<PackageManagers
27+
type="create"
28+
pkg="cloudflare@latest my-astro-app"
29+
args={"--framework=astro --experimental"}
30+
/>
31+
32+
<Render
33+
file="c3-post-run-steps"
34+
product="workers"
35+
params={{
36+
category: "web-framework",
37+
framework: "Astro",
38+
}}
39+
/>
40+
41+
After setting up your project, change your directory by running the following command:
42+
43+
```sh
44+
cd my-astro-app
45+
```
46+
47+
## 2. Develop locally
48+
49+
After you have created your project, run the following command in the project directory to start a local server. This will allow you to preview your project locally during development.
50+
51+
<PackageManagers type="run" args={"dev"} />
52+
53+
## 3. Deploy your Project
54+
55+
Deploy your Worker via Wrangler to a `*.workers.dev` subdomain or configure a [Custom Domain](/workers/configuration/routing/custom-domains/).
56+
57+
<PackageManagers type="run" args={"deploy"} />
58+
59+
---
60+
61+
## Bindings
62+
63+
Your Astro application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using product bindings. The [Astro documentation](https://docs.astro.build/en/guides/integrations-guide/cloudflare/#cloudflare-runtime) provides information about configuring bindings and how you can access them in your `locals`.
64+
65+
## Static assets
66+
67+
You can serve static assets your Astro application by placing them in [the `./public/` directory](https://docs.astro.build/en/basics/project-structure/#public). This can be useful for resource files such as images, stylesheets, fonts, and manifests.
68+
69+
<Render file="workers-assets-routing-summary" />
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
pcx_content_type: how-to
3+
title: Docusaurus
4+
sidebar:
5+
badge: Beta
6+
head: []
7+
description: Create a Docusaurus application and deploy it to Cloudflare Workers with Workers Assets.
8+
---
9+
10+
import {
11+
Badge,
12+
Description,
13+
InlineBadge,
14+
Render,
15+
PackageManagers,
16+
} from "~/components";
17+
18+
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/configuration/assets/)).
19+
20+
## 1. Set up a new project
21+
22+
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.
23+
24+
To use `create-cloudflare` to create a new Docusaurus project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
25+
26+
<PackageManagers
27+
type="create"
28+
pkg="cloudflare@latest my-docusaurus-app"
29+
args={"--framework=docusaurus --experimental"}
30+
/>
31+
32+
<Render
33+
file="c3-post-run-steps"
34+
product="workers"
35+
params={{
36+
category: "web-framework",
37+
framework: "Docusaurus",
38+
}}
39+
/>
40+
41+
After setting up your project, change your directory by running the following command:
42+
43+
```sh
44+
cd my-docusaurus-app
45+
```
46+
47+
## 2. Develop locally
48+
49+
After you have created your project, run the following command in the project directory to start a local server. This will allow you to preview your project locally during development.
50+
51+
<PackageManagers type="run" args={"dev"} />
52+
53+
## 3. Deploy your Project
54+
55+
Deploy your Worker via Wrangler to a `*.workers.dev` subdomain or configure a [Custom Domain](/workers/configuration/routing/custom-domains/).
56+
57+
<PackageManagers type="run" args={"deploy"} />
58+
59+
---
60+
61+
## Static assets
62+
63+
You can serve static assets your Docusaurus application by placing them in [the `./static/` directory](https://docusaurus.io/docs/static-assets). This can be useful for resource files such as images, stylesheets, fonts, and manifests.
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
pcx_content_type: how-to
3+
title: Gatsby
4+
sidebar:
5+
badge: Beta
6+
head: []
7+
description: Create a Gatsby application and deploy it to Cloudflare Workers with Workers Assets.
8+
---
9+
10+
import {
11+
Badge,
12+
Description,
13+
InlineBadge,
14+
Render,
15+
PackageManagers,
16+
} from "~/components";
17+
18+
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/configuration/assets/)).
19+
20+
## 1. Set up a new project
21+
22+
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.
23+
24+
To use `create-cloudflare` to create a new Gatsby project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
25+
26+
<PackageManagers
27+
type="create"
28+
pkg="cloudflare@latest my-gatsby-app"
29+
args={"--framework=gatsby --experimental"}
30+
/>
31+
32+
<Render
33+
file="c3-post-run-steps"
34+
product="workers"
35+
params={{
36+
category: "web-framework",
37+
framework: "Gatsby",
38+
}}
39+
/>
40+
41+
After setting up your project, change your directory by running the following command:
42+
43+
```sh
44+
cd my-gatsby-app
45+
```
46+
47+
## 2. Develop locally
48+
49+
After you have created your project, run the following command in the project directory to start a local server. This will allow you to preview your project locally during development.
50+
51+
<PackageManagers type="run" args={"dev"} />
52+
53+
## 3. Deploy your Project
54+
55+
Deploy your Worker via Wrangler to a `*.workers.dev` subdomain or configure a [Custom Domain](/workers/configuration/routing/custom-domains/).
56+
57+
<PackageManagers type="run" args={"deploy"} />
58+
59+
---
60+
61+
## Static assets
62+
63+
You can serve static assets your Gatsby application by placing them in [the `./static/` directory](https://www.gatsbyjs.com/docs/how-to/images-and-media/static-folder/). This can be useful for resource files such as images, stylesheets, fonts, and manifests.
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
pcx_content_type: navigation
3+
title: Frameworks Guides
4+
sidebar:
5+
order: 3
6+
badge: Beta
7+
head: []
8+
description: Create full-stack applications, powered by your favorite web frameworks, deployed to Cloudflare Workers.
9+
---
10+
11+
import {
12+
Badge,
13+
Description,
14+
DirectoryListing,
15+
InlineBadge,
16+
Render,
17+
TabItem,
18+
Tabs,
19+
PackageManagers,
20+
Feature,
21+
} from "~/components";
22+
23+
<Description>
24+
Create full-stack applications, powered by your favorite web frameworks,
25+
deployed to Cloudflare Workers.
26+
</Description>
27+
28+
The following frameworks have experimental support for Cloudflare Workers and the new [<InlineBadge preset="beta" /> Workers Assets](/workers/configuration/assets/). They can be initialized with the [`create-cloudflare` CLI](/workers/get-started/guide/) using the `--experimental` flag.
29+
30+
<PackageManagers
31+
type="create"
32+
pkg="cloudflare@latest my-framework-app"
33+
args={"--type=web-framework --experimental"}
34+
/>
35+
36+
<DirectoryListing />
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
pcx_content_type: how-to
3+
title: Nuxt
4+
sidebar:
5+
badge: Beta
6+
head: []
7+
description: Create a Nuxt application and deploy it to Cloudflare Workers with Workers Assets.
8+
---
9+
10+
import {
11+
Badge,
12+
Description,
13+
InlineBadge,
14+
Render,
15+
PackageManagers,
16+
} from "~/components";
17+
18+
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/configuration/assets/)).
19+
20+
## 1. Set up a new project
21+
22+
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.
23+
24+
To use `create-cloudflare` to create a new Nuxt project with <InlineBadge preset="beta" /> Workers Assets, run the following command:
25+
26+
<PackageManagers
27+
type="create"
28+
pkg="cloudflare@latest my-nuxt-app"
29+
args={"--framework=nuxt --experimental"}
30+
/>
31+
32+
<Render
33+
file="c3-post-run-steps"
34+
product="workers"
35+
params={{
36+
category: "web-framework",
37+
framework: "Nuxt",
38+
}}
39+
/>
40+
41+
After setting up your project, change your directory by running the following command:
42+
43+
```sh
44+
cd my-nuxt-app
45+
```
46+
47+
## 2. Develop locally
48+
49+
After you have created your project, run the following command in the project directory to start a local server. This will allow you to preview your project locally during development.
50+
51+
<PackageManagers type="run" args={"dev"} />
52+
53+
## 3. Deploy your Project
54+
55+
Deploy your Worker via Wrangler to a `*.workers.dev` subdomain or configure a [Custom Domain](/workers/configuration/routing/custom-domains/).
56+
57+
<PackageManagers type="run" args={"deploy"} />
58+
59+
---
60+
61+
## Bindings
62+
63+
Your Nuxt application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using product bindings. The [Nuxt documentation](https://nitro.unjs.io/deploy/providers/cloudflare#direct-access-to-cloudflare-bindings) provides information about configuring bindings and how you can access them in your Nuxt event handlers.
64+
65+
## Static assets
66+
67+
You can serve static assets your Nuxt application by placing them in [the `./public/` directory](https://nuxt.com/docs/guide/directory-structure/public). This can be useful for resource files such as images, stylesheets, fonts, and manifests.

0 commit comments

Comments
 (0)