Skip to content

Commit

Permalink
Add some framework guides for Workers Assets
Browse files Browse the repository at this point in the history
  • Loading branch information
GregBrimble committed Sep 23, 2024
1 parent 052e1da commit 1aa9217
Show file tree
Hide file tree
Showing 8 changed files with 449 additions and 0 deletions.
69 changes: 69 additions & 0 deletions src/content/docs/workers/frameworks/framework-guides/angular.mdx
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 src/content/docs/workers/frameworks/framework-guides/astro.mdx
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" />
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 src/content/docs/workers/frameworks/framework-guides/gatsby.mdx
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 src/content/docs/workers/frameworks/framework-guides/index.mdx
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 src/content/docs/workers/frameworks/framework-guides/nuxt.mdx
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.
Loading

0 comments on commit 1aa9217

Please sign in to comment.