mirror of
https://github.com/cloudflare/cloudflare-docs.git
synced 2026-01-11 20:06:58 +00:00
Add Analog Workers guide and remove Pages guide (#26995)
* Add Analog Workers guide and remove Pages guide - Add new Analog Workers guide at workers/framework-guides/web-apps/more-web-frameworks/analog.mdx - Remove deprecated Analog Pages guide (C3 no longer supports Analog on Pages) - Add redirect from old Pages guide to new Workers guide Co-Authored-By: pbacondarwin@cloudflare.com <pete@bacondarwin.com> * chore: remove unused imports from Analog guide Co-Authored-By: pbacondarwin@cloudflare.com <pete@bacondarwin.com> * Remove Analog from Pages C3 guide since it is now Workers-only Co-Authored-By: pbacondarwin@cloudflare.com <pete@bacondarwin.com> --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Pete Bacon Darwin
GitHub
parent
125e6d5f80
commit
f3c7d1dc4b
3 changed files with 55 additions and 155 deletions
|
|
@ -1,161 +1,10 @@
|
|||
---
|
||||
pcx_content_type: how-to
|
||||
pcx_content_type: navigation
|
||||
title: Analog
|
||||
head: []
|
||||
description: The fullstack Angular meta-framework
|
||||
description: Fullstack meta-framework for Angular, powered by Vite and Nitro.
|
||||
---
|
||||
|
||||
import {
|
||||
PagesBuildPreset,
|
||||
Render,
|
||||
TabItem,
|
||||
Tabs,
|
||||
PackageManagers,
|
||||
} from "~/components";
|
||||
|
||||
[Analog](https://analogjs.org/) is a fullstack meta-framework for Angular, powered by [Vite](https://vitejs.dev/) and [Nitro](https://nitro.unjs.io/).
|
||||
|
||||
In this guide, you will create a new Analog application and deploy it using Cloudflare Pages.
|
||||
|
||||
## Create a new project with `create-cloudflare`
|
||||
|
||||
The easiest way to create a new Analog project and deploy to Cloudflare Pages is to use the [`create-cloudflare`](https://www.npmjs.com/package/create-cloudflare) CLI (also known as C3). To get started, open a terminal and run:
|
||||
|
||||
<PackageManagers
|
||||
type="create"
|
||||
pkg="cloudflare@latest"
|
||||
args="my-analog-app --framework=analog --platform=pages"
|
||||
/>
|
||||
|
||||
C3 will walk you through the setup process and create a new project using `create-analog`, the official Analog creation tool. It will also install the necessary adapters along with the [Wrangler CLI](/workers/wrangler/install-and-update/#check-your-wrangler-version).
|
||||
|
||||
:::note[Deployment]
|
||||
|
||||
The final step of the C3 workflow will offer to deploy your application to Cloudflare. For more information on deployment options, see the [Deployment](#deployment) section below.
|
||||
|
||||
:::
|
||||
|
||||
## Bindings
|
||||
|
||||
A [binding](/pages/functions/bindings/) allows your application to interact with Cloudflare developer products, such as [KV](/kv/), [Durable Objects](/durable-objects/), [R2](/r2/), and [D1](/d1/).
|
||||
|
||||
If you intend to use bindings in your project, you must first set up your bindings for local and remote development.
|
||||
|
||||
In Analog, server-side code can be added via [API Routes](https://analogjs.org/docs/features/api/overview). The `defineEventHandler()` method is used to define your API endpoints in which you can access Cloudflare's context via the provided `context` field. The `context` field allows you to access any bindings set for your application.
|
||||
|
||||
The following code block shows an example of accessing a KV namespace in Analog.
|
||||
|
||||
```typescript null {2}
|
||||
export default defineEventHandler(async ({ context }) => {
|
||||
const { MY_KV } = context.cloudflare.env;
|
||||
const greeting = (await MY_KV.get("greeting")) ?? "hello";
|
||||
|
||||
return {
|
||||
greeting,
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
### Setup bindings in development
|
||||
|
||||
Projects created via C3 come installed with a Nitro module that simplifies the process of working with bindings during development:
|
||||
|
||||
```typescript
|
||||
const devBindingsModule = async (nitro: Nitro) => {
|
||||
if (nitro.options.dev) {
|
||||
nitro.options.plugins.push('./src/dev-bindings.ts');
|
||||
}
|
||||
};
|
||||
|
||||
export default defineConfig({
|
||||
...
|
||||
plugins: [analog({
|
||||
nitro: {
|
||||
preset: "cloudflare-pages",
|
||||
modules: [devBindingsModule]
|
||||
}
|
||||
})],
|
||||
...
|
||||
});
|
||||
```
|
||||
|
||||
This module in turn loads a plugin which adds bindings to the request context in dev:
|
||||
|
||||
```typescript
|
||||
import { NitroApp } from "nitropack";
|
||||
import { defineNitroPlugin } from "nitropack/dist/runtime/plugin";
|
||||
|
||||
export default defineNitroPlugin((nitroApp: NitroApp) => {
|
||||
nitroApp.hooks.hook("request", async (event) => {
|
||||
const _pkg = "wrangler"; // Bypass bundling!
|
||||
const { getPlatformProxy } = (await import(
|
||||
_pkg
|
||||
)) as typeof import("wrangler");
|
||||
const platform = await getPlatformProxy();
|
||||
|
||||
event.context.cf = platform["cf"];
|
||||
event.context.cloudflare = {
|
||||
env: platform["env"] as unknown as Env,
|
||||
context: platform["ctx"],
|
||||
};
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
In the code above, the `getPlatformProxy` helper function will automatically detect any bindings defined in your project's Wrangler file and emulate those bindings in local development. You may wish to refer to [Wrangler configuration information on bindings](/workers/wrangler/configuration/#bindings).
|
||||
|
||||
A new type definition for the `Env` type (used by `context.cloudflare.env`) can be generated from the [Wrangler configuration file](/workers/wrangler/configuration/) with the following command:
|
||||
|
||||
```sh
|
||||
npm run cf-typegen
|
||||
```
|
||||
|
||||
This should be done any time you add new bindings to your Wrangler configuration.
|
||||
|
||||
### Setup bindings in deployed applications
|
||||
|
||||
In order to access bindings in a deployed application, you will need to [configure your bindings](/pages/functions/bindings/) in the Cloudflare dashboard.
|
||||
|
||||
## Deployment
|
||||
|
||||
When creating your new project, C3 will give you the option of deploying an initial version of your application via [Direct Upload](/pages/how-to/use-direct-upload-with-continuous-integration/). You can redeploy your application at any time by running following command inside your project directory:
|
||||
|
||||
```sh
|
||||
npm run deploy
|
||||
```
|
||||
|
||||
<Render file="framework-guides/git-integration" product="pages" />
|
||||
|
||||
### Create a GitHub repository
|
||||
|
||||
<Render file="framework-guides/create-gh-repo" product="pages" />
|
||||
|
||||
```sh
|
||||
# Skip the following three commands if you have built your application
|
||||
# using C3 or already committed your changes
|
||||
git init
|
||||
git add .
|
||||
git commit -m "Initial commit"
|
||||
|
||||
git branch -M main
|
||||
git remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME>
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
### Create a Pages project
|
||||
|
||||
<Render
|
||||
file="framework-guides/learn-more"
|
||||
product="pages"
|
||||
params={{ name: "Analog" }}
|
||||
/>
|
||||
|
||||
<PagesBuildPreset framework="analog" />
|
||||
|
||||
Optionally, you can customize the **Project name** field. It defaults to the GitHub repository's name, but it does not need to match. The **Project name** value is assigned as your `*.pages.dev` subdomain.
|
||||
|
||||
4. After completing configuration, select the **Save and Deploy**.
|
||||
|
||||
Review your first deploy pipeline in progress. Pages installs all dependencies and builds the project as specified. Cloudflare Pages will automatically rebuild your project and deploy it on every new pushed commit.
|
||||
|
||||
Additionally, you will have access to [preview deployments](/pages/configuration/preview-deployments/), which repeat the build-and-deploy process for pull requests. With these, you can preview changes to your project with a real URL before deploying your changes to production.
|
||||
To deploy an Analog application to Cloudflare, refer to the [Analog Workers guide](/workers/framework-guides/web-apps/more-web-frameworks/analog/).
|
||||
|
|
|
|||
|
|
@ -38,7 +38,6 @@ To create a Pages project you must now specify the `--platform=pages` arg, other
|
|||
|
||||
If you choose the "Framework Starter" option, you will be prompted to choose a framework to use. The following frameworks are currently supported:
|
||||
|
||||
- [Analog](/pages/framework-guides/deploy-an-analog-site/)
|
||||
- [Angular](/pages/framework-guides/deploy-an-angular-site/)
|
||||
- [Astro](/pages/framework-guides/deploy-an-astro-site/)
|
||||
- [Docusaurus](/pages/framework-guides/deploy-a-docusaurus-site/)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
---
|
||||
pcx_content_type: how-to
|
||||
title: Analog
|
||||
tags: ["full-stack", "Angular"]
|
||||
description: Create an Analog application and deploy it to Cloudflare Workers.
|
||||
---
|
||||
|
||||
import { Render, PackageManagers } from "~/components";
|
||||
|
||||
In this guide, you will create a new [Analog](https://analogjs.org/) application and deploy to Cloudflare Workers.
|
||||
|
||||
[Analog](https://analogjs.org/) is a fullstack meta-framework for Angular, powered by [Vite](https://vitejs.dev/) and [Nitro](https://nitro.unjs.io/).
|
||||
|
||||
## 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 Analog's official setup tool, and provide the option to deploy instantly.
|
||||
|
||||
To use `create-cloudflare` to create a new Analog project, run the following command:
|
||||
|
||||
<PackageManagers
|
||||
type="create"
|
||||
pkg="cloudflare@latest"
|
||||
args="my-analog-app --framework=analog"
|
||||
/>
|
||||
|
||||
After setting up your project, change your directory by running the following command:
|
||||
|
||||
```sh
|
||||
cd my-analog-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
|
||||
|
||||
Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](/workers/configuration/routing/custom-domains/), from your own machine or from any CI/CD system, including [Cloudflare's own](/workers/ci-cd/builds/).
|
||||
|
||||
The following command will build and deploy your project. If you're using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately.
|
||||
|
||||
<PackageManagers type="run" args={"deploy"} />
|
||||
|
||||
---
|
||||
|
||||
## Bindings
|
||||
|
||||
Your Analog application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using product bindings. The [Nitro 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 Analog API routes.
|
||||
|
||||
<Render file="frameworks-bindings" product="workers" />
|
||||
Loading…
Add table
Reference in a new issue