-
Notifications
You must be signed in to change notification settings - Fork 5.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add some framework guides for Workers Assets
- Loading branch information
1 parent
052e1da
commit 1aa9217
Showing
8 changed files
with
449 additions
and
0 deletions.
There are no files selected for viewing
69 changes: 69 additions & 0 deletions
69
src/content/docs/workers/frameworks/framework-guides/angular.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
--- | ||
pcx_content_type: how-to | ||
title: Angular | ||
sidebar: | ||
badge: Beta | ||
head: [] | ||
description: Create an Angular application and deploy it to Cloudflare Workers with Workers Assets. | ||
--- | ||
|
||
import { | ||
Badge, | ||
Description, | ||
InlineBadge, | ||
Render, | ||
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/configuration/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 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: | ||
|
||
<PackageManagers | ||
type="create" | ||
pkg="cloudflare@latest my-angular-app" | ||
args={"--framework=angular --experimental"} | ||
/> | ||
|
||
<Render | ||
file="c3-post-run-steps" | ||
product="workers" | ||
params={{ | ||
category: "web-framework", | ||
framework: "Angular", | ||
}} | ||
/> | ||
|
||
After setting up your project, change your directory by running the following command: | ||
|
||
```sh | ||
cd my-angular-app | ||
``` | ||
|
||
## 2. Develop locally | ||
|
||
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. | ||
|
||
<PackageManagers type="run" args={"dev"} /> | ||
|
||
## 3. Deploy your Project | ||
|
||
Deploy your Worker via Wrangler to a `*.workers.dev` subdomain or configure a [Custom Domain](/workers/configuration/routing/custom-domains/). | ||
|
||
<PackageManagers type="run" args={"deploy"} /> | ||
|
||
--- | ||
|
||
## Bindings | ||
|
||
TODO | ||
|
||
## Static assets | ||
|
||
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. | ||
|
||
<Render file="workers-assets-routing-summary" /> |
69 changes: 69 additions & 0 deletions
69
src/content/docs/workers/frameworks/framework-guides/astro.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
--- | ||
pcx_content_type: how-to | ||
title: Astro | ||
sidebar: | ||
badge: Beta | ||
head: [] | ||
description: Create an Astro application and deploy it to Cloudflare Workers with Workers Assets. | ||
--- | ||
|
||
import { | ||
Badge, | ||
Description, | ||
InlineBadge, | ||
Render, | ||
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/configuration/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: | ||
|
||
<PackageManagers | ||
type="create" | ||
pkg="cloudflare@latest my-astro-app" | ||
args={"--framework=astro --experimental"} | ||
/> | ||
|
||
<Render | ||
file="c3-post-run-steps" | ||
product="workers" | ||
params={{ | ||
category: "web-framework", | ||
framework: "Astro", | ||
}} | ||
/> | ||
|
||
After setting up your project, change your directory by running the following command: | ||
|
||
```sh | ||
cd my-astro-app | ||
``` | ||
|
||
## 2. Develop locally | ||
|
||
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. | ||
|
||
<PackageManagers type="run" args={"dev"} /> | ||
|
||
## 3. Deploy your Project | ||
|
||
Deploy your Worker via Wrangler to a `*.workers.dev` subdomain or configure a [Custom Domain](/workers/configuration/routing/custom-domains/). | ||
|
||
<PackageManagers type="run" args={"deploy"} /> | ||
|
||
--- | ||
|
||
## Bindings | ||
|
||
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`. | ||
|
||
## Static assets | ||
|
||
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. | ||
|
||
<Render file="workers-assets-routing-summary" /> |
63 changes: 63 additions & 0 deletions
63
src/content/docs/workers/frameworks/framework-guides/docusaurus.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
--- | ||
pcx_content_type: how-to | ||
title: Docusaurus | ||
sidebar: | ||
badge: Beta | ||
head: [] | ||
description: Create a Docusaurus application and deploy it to Cloudflare Workers with Workers Assets. | ||
--- | ||
|
||
import { | ||
Badge, | ||
Description, | ||
InlineBadge, | ||
Render, | ||
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/configuration/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: | ||
|
||
<PackageManagers | ||
type="create" | ||
pkg="cloudflare@latest my-docusaurus-app" | ||
args={"--framework=docusaurus --experimental"} | ||
/> | ||
|
||
<Render | ||
file="c3-post-run-steps" | ||
product="workers" | ||
params={{ | ||
category: "web-framework", | ||
framework: "Docusaurus", | ||
}} | ||
/> | ||
|
||
After setting up your project, change your directory by running the following command: | ||
|
||
```sh | ||
cd my-docusaurus-app | ||
``` | ||
|
||
## 2. Develop locally | ||
|
||
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. | ||
|
||
<PackageManagers type="run" args={"dev"} /> | ||
|
||
## 3. Deploy your Project | ||
|
||
Deploy your Worker via Wrangler to a `*.workers.dev` subdomain or configure a [Custom Domain](/workers/configuration/routing/custom-domains/). | ||
|
||
<PackageManagers type="run" args={"deploy"} /> | ||
|
||
--- | ||
|
||
## Static assets | ||
|
||
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. |
63 changes: 63 additions & 0 deletions
63
src/content/docs/workers/frameworks/framework-guides/gatsby.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
--- | ||
pcx_content_type: how-to | ||
title: Gatsby | ||
sidebar: | ||
badge: Beta | ||
head: [] | ||
description: Create a Gatsby application and deploy it to Cloudflare Workers with Workers Assets. | ||
--- | ||
|
||
import { | ||
Badge, | ||
Description, | ||
InlineBadge, | ||
Render, | ||
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/configuration/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: | ||
|
||
<PackageManagers | ||
type="create" | ||
pkg="cloudflare@latest my-gatsby-app" | ||
args={"--framework=gatsby --experimental"} | ||
/> | ||
|
||
<Render | ||
file="c3-post-run-steps" | ||
product="workers" | ||
params={{ | ||
category: "web-framework", | ||
framework: "Gatsby", | ||
}} | ||
/> | ||
|
||
After setting up your project, change your directory by running the following command: | ||
|
||
```sh | ||
cd my-gatsby-app | ||
``` | ||
|
||
## 2. Develop locally | ||
|
||
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. | ||
|
||
<PackageManagers type="run" args={"dev"} /> | ||
|
||
## 3. Deploy your Project | ||
|
||
Deploy your Worker via Wrangler to a `*.workers.dev` subdomain or configure a [Custom Domain](/workers/configuration/routing/custom-domains/). | ||
|
||
<PackageManagers type="run" args={"deploy"} /> | ||
|
||
--- | ||
|
||
## Static assets | ||
|
||
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. |
36 changes: 36 additions & 0 deletions
36
src/content/docs/workers/frameworks/framework-guides/index.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
--- | ||
pcx_content_type: navigation | ||
title: Frameworks Guides | ||
sidebar: | ||
order: 3 | ||
badge: Beta | ||
head: [] | ||
description: Create full-stack applications, powered by your favorite web frameworks, deployed to Cloudflare Workers. | ||
--- | ||
|
||
import { | ||
Badge, | ||
Description, | ||
DirectoryListing, | ||
InlineBadge, | ||
Render, | ||
TabItem, | ||
Tabs, | ||
PackageManagers, | ||
Feature, | ||
} from "~/components"; | ||
|
||
<Description> | ||
Create full-stack applications, powered by your favorite web frameworks, | ||
deployed to Cloudflare Workers. | ||
</Description> | ||
|
||
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. | ||
|
||
<PackageManagers | ||
type="create" | ||
pkg="cloudflare@latest my-framework-app" | ||
args={"--type=web-framework --experimental"} | ||
/> | ||
|
||
<DirectoryListing /> |
67 changes: 67 additions & 0 deletions
67
src/content/docs/workers/frameworks/framework-guides/nuxt.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
--- | ||
pcx_content_type: how-to | ||
title: Nuxt | ||
sidebar: | ||
badge: Beta | ||
head: [] | ||
description: Create a Nuxt application and deploy it to Cloudflare Workers with Workers Assets. | ||
--- | ||
|
||
import { | ||
Badge, | ||
Description, | ||
InlineBadge, | ||
Render, | ||
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/configuration/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: | ||
|
||
<PackageManagers | ||
type="create" | ||
pkg="cloudflare@latest my-nuxt-app" | ||
args={"--framework=nuxt --experimental"} | ||
/> | ||
|
||
<Render | ||
file="c3-post-run-steps" | ||
product="workers" | ||
params={{ | ||
category: "web-framework", | ||
framework: "Nuxt", | ||
}} | ||
/> | ||
|
||
After setting up your project, change your directory by running the following command: | ||
|
||
```sh | ||
cd my-nuxt-app | ||
``` | ||
|
||
## 2. Develop locally | ||
|
||
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. | ||
|
||
<PackageManagers type="run" args={"dev"} /> | ||
|
||
## 3. Deploy your Project | ||
|
||
Deploy your Worker via Wrangler to a `*.workers.dev` subdomain or configure a [Custom Domain](/workers/configuration/routing/custom-domains/). | ||
|
||
<PackageManagers type="run" args={"deploy"} /> | ||
|
||
--- | ||
|
||
## Bindings | ||
|
||
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. | ||
|
||
## Static assets | ||
|
||
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. |
Oops, something went wrong.