[Pages] update framework guides to reference C3 (#10357)

* [pages] update svelte, hono, astro framework guides to include c3 * update solid framework guide * update nuxt framework guide * update react,angular,qwik,vue,nuxt,gatsby guides to reference c3. update title wording in other guides. add c3 deploy partial. * update remix,docusaurus guides. * Update content/pages/_partials/_c3-adapter.md Co-authored-by: Kate Tungusova <70746074+deadlypants1973@users.noreply.github.com> * Update content/pages/_partials/_deploy-via-c3.md Co-authored-by: Kate Tungusova <70746074+deadlypants1973@users.noreply.github.com> * Update content/pages/framework-guides/deploy-a-docusaurus-site.md Co-authored-by: Kate Tungusova <70746074+deadlypants1973@users.noreply.github.com> * Update content/pages/_partials/_deploy-via-c3.md Co-authored-by: Kate Tungusova <70746074+deadlypants1973@users.noreply.github.com> * Update content/pages/framework-guides/deploy-a-docusaurus-site.md Co-authored-by: Kate Tungusova <70746074+deadlypants1973@users.noreply.github.com> * address pcx review * update angular template --------- Co-authored-by: Kate Tungusova <70746074+deadlypants1973@users.noreply.github.com>
cloudflare · Sep 15, 2023 · 82fb676 · 82fb676
1 parent f9172ee
commit 82fb676
Show file tree

Hide file tree

Showing 21 changed files with 163 additions and 129 deletions.
diff --git a/content/pages/_partials/_c3-adapter.md b/content/pages/_partials/_c3-adapter.md
@@ -0,0 +1,12 @@
+---
+_build:
+  publishResources: false
+  render: never
+  list: never
+---
+
+{{<Aside type="note">}}
+
+If using [`create-cloudflare` (C3)](https://www.npmjs.com/package/create-cloudflare), you can bypass adding an adapter as C3 automatically installs any necessary adapters and configures them when creating your project.
+
+{{</Aside>}}
diff --git a/content/pages/_partials/_deploy-via-c3.md b/content/pages/_partials/_deploy-via-c3.md
@@ -0,0 +1,11 @@
+---
+_build:
+  publishResources: false
+  render: never
+  list: never
+inputParameters: deployedTarget
+---
+
+### Deploy via the `create-cloudflare` CLI (C3)
+
+If you use [`create-cloudflare`(C3)](https://www.npmjs.com/package/create-cloudflare) to create your new $1 project, C3 will install all dependencies needed for your project and prompt you to deploy your project via the CLI. If you deploy, your site will be live and you will be provided with a deployment URL. 
diff --git a/content/pages/framework-guides/deploy-a-docusaurus-site.md b/content/pages/framework-guides/deploy-a-docusaurus-site.md
@@ -7,21 +7,27 @@ title: Deploy a Docusaurus site
 
 [Docusaurus](https://docusaurus.io) is a static site generator. It builds a single-page application with fast client-side navigation, leveraging the full power of React to make your site interactive. It provides out-of-the-box documentation features but can be used to create any kind of site such as a personal website, a product site, a blog, or marketing landing pages.
 
-## Install Docusaurus
+## Set up a new project
 
-To begin, with [Node.js](https://nodejs.org/en/download/) installed, create a new Docusaurus site by running:
+Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to set up your 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, run the following command:
 
 ```sh
-$ npx create-docusaurus@latest my-website classic
+$ npm create cloudflare@latest my-docusaurus-app -- --framework=docusaurus
 ```
 
+`create-cloudflare` will install additional dependencies, including the [Wrangler](/workers/wrangler/install-and-update/#check-your-wrangler-version) CLI and any necessary adapters, and ask you setup questions.
+
 {{<render file="_tutorials-before-you-start.md">}}
 
 {{<render file="_create-github-repository.md">}}
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
+{{<render file="_deploy-via-c3.md" withParameters="Docusaurus">}}
+
+### Deploy via the Cloudflare dashboard
 
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
 2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**.

diff --git a/content/pages/framework-guides/deploy-a-hexo-site.md b/content/pages/framework-guides/deploy-a-hexo-site.md
@@ -51,7 +51,7 @@ Inside of `hello-hexo.md`, use Markdown to write the content of the article. You
 
 {{<render file="_create-github-repository.md">}}
 
-## Deploying with Cloudflare Pages
+## Deploy with Cloudflare Pages
 
 To deploy your site to Pages:
 

diff --git a/content/pages/framework-guides/deploy-a-hono-site.md b/content/pages/framework-guides/deploy-a-hono-site.md
@@ -9,27 +9,12 @@ title: Deploy a Hono site
 
 ## Create a new project
 
-Create a new project by running the following commands in your terminal:
+Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to create a new project. C3 will create a new project directory, initiate Hono's official setup tool, and provide the option to deploy instantly.
 
-```sh
-$ mkdir my-hono-app
-$ cd my-hono-app
-$ npm init -y
-
-# Make sure Hono is installed
-$ npm install hono
-
-# Install the required dependencies
-# ESBuild is needed to bundle the hono app code
-# npm-run-all enables us to run multiple npm commands at once
-$ npm install --save-dev wrangler esbuild npm-run-all
-```
-
-If you want your application to use TypeScript, you need to generate a `tsconfig.json` file. To generate a `tsconfig.json` file, run:
+To use `create-cloudflare` to create a new Hono project, run the following command:
 
 ```sh
-$ npm install --save-dev typescript
-$ npx tsc --init
+$ npm create cloudflare@latest my-hono-app -- --framework=hono
 ```
 
 Open your project and create a `src/server.js` file (or `src/server.ts` if you are using TypeScript). Add the following content to your file:
@@ -116,7 +101,9 @@ You should be able to review your generated web application at `http://localhost
 
 ## Deploy with Cloudflare Pages
 
-To deploy your site to Pages:
+{{<render file="_deploy-via-c3.md" withParameters="Hono">}}
+
+### Deploy via the Cloudflare dashboard
 
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
 2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**.

diff --git a/content/pages/framework-guides/deploy-a-jekyll-site.md b/content/pages/framework-guides/deploy-a-jekyll-site.md
@@ -60,7 +60,7 @@ Optionally, you may use a theme with your new Jekyll site if you would like to s
 
 If you are migrating an existing Jekyll project to Pages, confirm that your `Gemfile` is committed as part of your codebase. Pages will look at your Gemfile and run `bundle install` to install the required dependencies for your project, including the `jekyll` gem.
 
-## Deploying with Cloudflare Pages
+## Deploy with Cloudflare Pages
 
 To deploy your site to Pages:
 

diff --git a/content/pages/framework-guides/deploy-a-nextjs-site.md b/content/pages/framework-guides/deploy-a-nextjs-site.md
@@ -24,20 +24,28 @@ For more information about the Edge Runtime, refer to [the official Next.js docu
 
 ### Select your Next.js project
 
-If you already have a Next.js project that you wish to deploy, change to its directory and proceed to the next step. Otherwise, use `create-next-app` to create a new Next.js project:
+If you already have a Next.js project that you wish to deploy, change to its directory and proceed to the next step. Otherwise, use `create-cloudflare` to create a new Next.js project:
 
 ```sh
-$ npx create-next-app my-app
+$ npm create cloudflare@latest my-next-app -- --framework=next
 ```
 
-After creating your project, a new `my-app` directory will be generated using the official default template. Change to this directory to continue.
+`create-cloudflare` will install additional dependencies, including the [Wrangler](/workers/wrangler/install-and-update/#check-your-wrangler-version) CLI and the `@cloudflare/next-on-pages` adapter, and ask you setup questions.
+
+After creating your project, a new `my-next-app` directory will be generated using the official default template. Change to this directory to continue.
 
 ```sh
-$ cd my-app
+$ cd my-next-app
 ```
 
 ### Configure the application to use the Edge Runtime
 
+{{<Aside type="note">}}
+
+If you created your project using `create-cloudflare`, you can skip this step.
+
+{{</Aside>}}
+
 The default template uses traditional Node.js-powered routes that are not supported on Cloudflare Pages. To run your application, you need to opt into the Edge Runtime for any routes that have server-side functionality (for example, API routes or pages that use `getServerSideProps`). To do this, you need to export a `runtime` [route segment config](https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#runtime) option from each route's file.
 
 ```js
@@ -107,6 +115,10 @@ git push -u origin main
 
 ### Deploy your application to Cloudflare Pages
 
+{{<render file="_deploy-via-c3.md" withParameters="Next.js">}}
+
+### Deploy via the Cloudflare dashboard
+
 To deploy your application to Cloudflare Pages, you need to install the `@cloudflare/next-on-pages` package. This library builds your Next.js project in a format that can be deployed to Pages, and handles the runtime logic for your application.
 
 ```sh

diff --git a/content/pages/framework-guides/deploy-a-nuxt-site.md b/content/pages/framework-guides/deploy-a-nuxt-site.md
@@ -11,15 +11,17 @@ In this guide, you will create a new Nuxt application and deploy it using Cloudf
 
 ## Create a new project
 
-Create a new project by running the following commands in your terminal:
+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, run the following command:
 
 ```sh
-$ npx nuxi init my-nuxt-app
-$ cd my-nuxt-app
-$ npm install
+$ npm create cloudflare@latest my-nuxt-app -- --framework=nuxt
 ```
 
-Next, run the application using the command:
+`create-cloudflare` will then install dependencies, including the [Wrangler](/workers/wrangler/install-and-update/#check-your-wrangler-version) CLI, and ask you setup questions.
+
+After you have installed your project dependencies, start your application:
 
 ```sh
 $ npm run dev
@@ -29,9 +31,11 @@ $ npm run dev
 
 {{<render file="_create-github-repository.md">}}
 
-## Deploying with Cloudflare Pages
+## Deploy with Cloudflare Pages
+
+{{<render file="_deploy-via-c3.md" withParameters="Nuxt">}}
 
-To deploy your site to Pages:
+### Deploy via the Cloudflare dashboard
 
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
 2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**.

diff --git a/content/pages/framework-guides/deploy-a-preact-site.md b/content/pages/framework-guides/deploy-a-preact-site.md
@@ -23,7 +23,7 @@ $ cd your-project-name
 
 {{<render file="_create-github-repository.md">}}
 
-## Deploying with Cloudflare Pages
+## Deploy with Cloudflare Pages
 
 To deploy your site to Pages:
 

diff --git a/content/pages/framework-guides/deploy-a-qwik-site.md b/content/pages/framework-guides/deploy-a-qwik-site.md
@@ -11,24 +11,17 @@ In this guide, you will create a new Qwik application implemented via [Qwik City
 
 ## Creating a new project
 
-Create a new project by running the following command in your terminal:
+Use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (C3) to create a new project. C3 will create a new project directory, initiate Qwik's official setup tool, and provide the option to deploy instantly.
 
-```sh
-$ npm create qwik@latest
-```
-
-You will need to provide a directory for your project (this guide will assume you chose `./qwik-app`) and select a starter from a provided list. Choose any of the QwikCity available options.
-
-The command will also ask you if you would like to install npm dependencies, choose yes.
-
-Next, add the [Qwik cloudflare-pages adaptor](https://qwik.builder.io/integrations/deployments/cloudflare-pages/#cloudflare-pages-adaptor) with the following commands:
+To use `create-cloudflare` to create a new Qwik project, run the following command:
 
 ```sh
-$ cd qwik-app
-$ npm run qwik add cloudflare-pages
+$ npm create cloudflare@latest my-qwik-app -- --framework=qwik
 ```
 
-Note that as part of the `cloudflare-pages` adaptor installation, a `functions/[[path]].ts` file will be created. The `[[path]]` filename indicates that this file will handle requests to all incoming URLs. Refer to [Path segments](/pages/platform/functions/routing/#dynamic-routes) to learn more.
+`create-cloudflare` will install additional dependencies, including the [Wrangler CLI](/workers/wrangler/install-and-update/#check-your-wrangler-version) and any necessary adapters, and ask you setup questions.
+
+As part of the `cloudflare-pages` adapter installation, a `functions/[[path]].ts` file will be created. The `[[path]]` filename indicates that this file will handle requests to all incoming URLs. Refer to [Path segments](/pages/platform/functions/routing/#dynamic-routes) to learn more.
 
 After selecting your server option, change the directory to your project and render your project by running the following command:
 
@@ -40,9 +33,11 @@ $ npm start
 
 {{<render file="_create-github-repository.md">}}
 
-## Deploying with Cloudflare Pages
+## Deploy with Cloudflare Pages
+
+{{<render file="_deploy-via-c3.md" withParameters="Qwik">}}
 
-To deploy your site to Pages:
+### Deploy via the Cloudflare dashboard
 
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
 2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**.

diff --git a/content/pages/framework-guides/deploy-a-react-site.md b/content/pages/framework-guides/deploy-a-react-site.md
@@ -11,13 +11,17 @@ In this guide, you will create a new React application and deploy it using Cloud
 
 ## Setting up a new project
 
-Create a new project using `npx`, giving it the title `my-react-app` in your terminal.
+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 React's official setup tool, and provide the option to deploy instantly.
+
+To use `create-cloudflare` to create a new React project, run the following command:
 
 ```sh
-$ npx create-react-app my-react-app
+$ npm create cloudflare@latest my-react-app -- --framework=react
 ```
 
-And move into the application's directory via:
+`create-cloudflare` will install dependencies, including the [Wrangler](/workers/wrangler/install-and-update/#check-your-wrangler-version) CLI and the Cloudflare Pages adapter, and ask you setup questions.
+
+Go to the application's directory:
 
 ```sh
 $ cd my-react-app
@@ -33,9 +37,11 @@ $ npm start
 
 {{<render file="_create-github-repository_no_init.md">}}
 
-## Deploying with Cloudflare Pages
+## Deploy with Cloudflare Pages
+
+{{<render file="_deploy-via-c3.md" withParameters="React">}}
 
-To deploy your site to Pages:
+### Deploy via the Cloudflare dashboard
 
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
 2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**.

diff --git a/content/pages/framework-guides/deploy-a-remix-site.md b/content/pages/framework-guides/deploy-a-remix-site.md
@@ -11,36 +11,39 @@ In this guide, you will create a new Remix application and deploy to Cloudflare
 
 ## Setting up a new project
 
-Start by installing the latest version of Remix. Create a new project directory and then initialize a Remix project by running:
+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 Remix's official setup tool, and provide the option to deploy instantly.
 
-```sh
-$ npx create-remix@latest
+To use `create-cloudflare` to create a new Remix project, run the following command:
 
+```sh
+$ npm create cloudflare@latest my-remix-app -- --framework=remix
 ```
 
-After running `npx create-remix@latest`, you will be prompted to answer configuration questions and select your deploy method. This guide uses Cloudflare Pages.
-
-After selecting _Cloudflare Pages_ as your deployment option in the terminal drop-down menu, your Remix Project will generate a `functions/[[path]].js` file. The `[[path]]` filename indicates that this file will handle requests to all incoming URLs. Refer to [Path segments](/pages/platform/functions/routing/#dynamic-routes) to learn more.
+`create-cloudflare` will install additional dependencies, including the [Wrangler](/workers/wrangler/install-and-update/#check-your-wrangler-version) CLI and any necessary adapters, and ask you setup questions.
 
 {{<Aside type="warning" header="Before you deploy">}}
-The `functions/[[path]].js` file will not be generated until you interact with Remix the first time, via `remix dev` or `remix build`. The `functions/[[path]].js` will not function as expected if you attempt to deploy your site before running `remix dev` or `remix build`.
+Your Remix Project will generate a `functions/[[path]].js` file the first time you run `remix dev` or `remix build`. The `[[path]]` filename indicates that this file will handle requests to all incoming URLs. Refer to [Path segments](/pages/platform/functions/routing/#dynamic-routes) to learn more.
+
+The `functions/[[path]].js` will not function as expected if you attempt to deploy your site before running `remix dev` or `remix build`.
 {{</Aside>}}
 
-After selecting your deployment option, change the directory to your project and render your project by running the following command:
+After setting up your project, change the directory and render your project by running the following command:
 
 ```sh
 # choose Cloudflare Pages
-$ cd <YOUR_PROJECT>
+$ cd my-remix-app
 $ npm run dev
 ```
 
 {{<render file="_tutorials-before-you-start.md">}}
 
 {{<render file="_create-github-repository_no_init.md">}}
 
-## Deploying with Cloudflare Pages
+## Deploy with Cloudflare Pages
+
+{{<render file="_deploy-via-c3.md" withParameters="Remix">}}
 
-To deploy your site to Pages:
+### Deploy via the Cloudflare dashboard
 
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
 2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**.

diff --git a/content/pages/framework-guides/deploy-a-solid-site.md b/content/pages/framework-guides/deploy-a-solid-site.md
@@ -17,30 +17,28 @@ At the time of writing SolidStart is in beta, this may make the following guide
 
 ## Create a new project
 
-Create a new project (`my-solid-app`) by running the following command in your terminal:
+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, run the following command:
 
 ```sh
-$ mkdir my-solid-app
-$ cd my-solid-app
-$ npm init solid@latest
+$ npm create cloudflare@latest my-solid-app -- --framework=solid
 ```
 
 You will be prompted to select a starter. Choose any of the available options. You will then be asked if you want to enable Server Side Rendering. Reply `yes`. Finally, you will be asked if you want to use TypeScript, choose either `yes` or `no`.
 
-Then, install the application's dependencies:
-
-```sh
-$ npm install
-```
+`create-cloudflare` will then install dependencies, including the [Wrangler](/workers/wrangler/install-and-update/#check-your-wrangler-version) CLI and the SolidStart Cloudflare Pages adapter, and ask you setup questions.
 
-After installing dependencies, run your application:
+After you have installed your project dependencies, start your application:
 
 ```sh
 $ npm run dev
 ```
 
 ## SolidStart Cloudflare configuration
 
+{{<render file="_c3-adapter.md">}}
+
 In order to use SolidStart with Cloudflare Pages, add the [SolidStart Cloudflare Pages adapter](https://github.com/solidjs/solid-start/tree/main/packages/start-cloudflare-pages) to your application:
 
 ```sh
@@ -67,9 +65,11 @@ export default defineConfig({
 
 {{<render file="_create-github-repository.md">}}
 
-## Deploying with Cloudflare Pages
+## Deploy with Cloudflare Pages
+
+{{<render file="_deploy-via-c3.md" withParameters="Solid">}}
 
-To deploy your site to Pages:
+### Deploy via the Cloudflare dashboard
 
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
 2. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**.

diff --git a/content/pages/framework-guides/deploy-a-sphinx-site.md b/content/pages/framework-guides/deploy-a-sphinx-site.md
@@ -212,7 +212,7 @@ $ git branch -M main
 $ git push -u origin main
 ```
 
-## Deploying with Cloudflare Pages
+## Deploy with Cloudflare Pages
 
 To deploy your site to Pages: