Skip to content

Commit 5b10ba9

Browse files
atinuxRihanArfan
atinux
and
RihanArfan
authored
docs: add workers changelog (#542)
Co-authored-by: Rihan Arfan <[email protected]>
1 parent 28e4d85 commit 5b10ba9

File tree

4 files changed

+171
-6
lines changed

4 files changed

+171
-6
lines changed

‎docs/content/changelog/workers.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: NuxtHub on Workers
3+
description: "Deploy your Nuxt apps to Cloudflare Workers and build real-time experiences with zero configuration."
4+
date: 2025-04-15
5+
image: '/images/changelog/workers-support.png'
6+
authors:
7+
- name: Sebastien Chopin
8+
avatar:
9+
src: https://avatars.githubusercontent.com/u/904724?v=4
10+
to: https://bsky.app/profile/atinux.com
11+
username: atinux
12+
- name: Rihan Arfan
13+
avatar:
14+
src: https://avatars.githubusercontent.com/u/20425781?v=4
15+
to: https://bsky.app/profile/rihan.dev
16+
username: rihan.dev
17+
- name: Ahad Birang
18+
avatar:
19+
src: https://avatars.githubusercontent.com/u/2047945?v=4
20+
to: https://bsky.app/profile/farnabaz.dev
21+
username: farnabaz.dev
22+
---
23+
24+
::tip
25+
This feature is available on both [free and pro plans](/pricing) and in [`@nuxthub/core >= v0.8.24`](https://github.com/nuxt-hub/core/releases/tag/v0.8.24).
26+
::
27+
28+
After much development (and [many](https://x.com/Atinux/status/1907552625559744865/photo/1) [teasers](https://x.com/Atinux/status/1884315020982657452/video/1)), we're thrilled to announce that NuxtHub now supports deploying to Cloudflare Workers!
29+
30+
## Why Workers
31+
32+
For a while, Cloudflare have been releasing exciting new features such as [observability & persistent logs](https://developers.cloudflare.com/workers/observability/logs/workers-logs/), [workflows](https://developers.cloudflare.com/workflows/), [cron triggers](https://developers.cloudflare.com/workers/configuration/cron-triggers/), and [much more](https://developers.cloudflare.com/workers/static-assets/migrate-from-pages/#compatibility-matrix). However, these features are only available on Cloudflare Workers, and were not brought to Cloudflare Pages.
33+
34+
Now with the introduction of [static assets](https://developers.cloudflare.com/workers/static-assets/), suddenly it is now viable to deploy Nuxt applications to Cloudflare Workers, and we can benefit from the new features and services available on Cloudflare Workers.
35+
36+
## Real-time
37+
38+
Projects deployed to NuxtHub on Workers also fully support [Nitro WebSocket](https://nitro.build/guide/websocket), allowing you to create real-time experiences on NuxtHub. Simply set `nitro.experimental.websocket` to `true` in your `nuxt.config.ts`, create your websocket server route with crossws, and deploy!
39+
40+
Under the hood this is powered by Cloudflare Durable Objects. Nitro and NuxtHub magically takes care of everything related to the Durable Object, from building to deploying.
41+
42+
Check out our [multiplayer-globe](https://github.com/nuxt-hub/multiplayer-globe) template for an example of using websockets ([live demo](https://multiplayer-globe.nuxthub.workers.dev/)).
43+
44+
::note{to=https://nitro.build/guide/websocket icon="i-lucide-book"}
45+
Learn more about Nitro WebSocket on the Nitro documentation
46+
::
47+
48+
## Deploying to Workers
49+
50+
Get started by creating a new project and selecting the Cloudflare Workers type on the [NuxtHub Admin](https://admin.hub.nuxt.com) or with the latest version of the `nuxthub` CLI ([v0.9.0](https://github.com/nuxt-hub/cli/releases)). All our templates are fully compatible with NuxtHub on Workers.
51+
52+
We're working on a migration path to help simplify the switch from Cloudflare Pages to Workers. Until then, you can deploy your existing Nuxt apps to Cloudflare Workers by setting `hub.workers` to `true`, and linking them to a separate new project with the Workers type, then manually moving any data stored in your database, KV or blob.
53+
54+
::note
55+
While NuxtHub on Workers is in beta, preview environments aren't unavailable. Stay tuned for updates.
56+
::
57+
58+
::important
59+
**If you already have a NuxtHub account**, make sure to add the `Workers Scripts` permission on your Cloudflare API token.
60+
61+
- Open [Cloudflare User API Tokens](https://dash.cloudflare.com/profile/api-tokens)
62+
- Find your NuxtHub token(s)
63+
- Add the `Workers Scripts > Edit` permission
64+
- Save the changes
65+
66+
Another solution is to link again your Cloudflare account from your NuxtHub team settings by clicking on `Connect a different Cloudflare account` > `Create a token`.
67+
::
68+
69+
## What's next
70+
71+
Throughout the next few weeks, we'll be enhancing NuxtHub on Workers with new features and integration with more Cloudflare Workers-specific services, including:
72+
73+
- **Observability**: Automatically ingest, filter, and analyse logs
74+
- **Queues**: Process background tasks effectively at scale
75+
- **Cron Tasks**: Run Nitro tasks automatically on a schedule
76+
- **Environments**: Bringing the preview environment to NuxtHub on Workers
77+
78+
Let us know your feedback by joining our [Discord](https://discord.gg/vW89dsVqBF), following us on [X](https://x.com/nuxt_hub), or emailing us at [email protected].

‎docs/content/docs/2.features/realtime.md

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: Realtime & WebSockets
3+
navigation.title: Realtime
4+
description: Build realtime experiences with NuxtHub using Cloudflare Workers & Durable Objects.
5+
---
6+
7+
## Getting Started
8+
9+
Enable [Niro's experimental WebSocket](https://nitro.build/guide/websocket) support by adding the following to your `nuxt.config.ts` file:
10+
11+
```ts [nuxt.config.ts]
12+
export default defineNuxtConfig({
13+
nitro: {
14+
experimental: {
15+
websocket: true
16+
}
17+
},
18+
hub: {
19+
workers: true
20+
}
21+
})
22+
```
23+
24+
::note
25+
We need to enable the `workers` option to use the WebSocket support as Durable Objects are only supported on Cloudflare Workers.
26+
::
27+
28+
## Example
29+
30+
Let's create a simple application that display how many users are connected to the website.
31+
32+
First, let's create a websocket handler on `/ws/visitors` route:
33+
34+
```ts [server/routes/ws/visitors.ts]
35+
export default defineWebSocketHandler({
36+
open(peer) {
37+
// We subscribe to the 'visitors' channel
38+
peer.subscribe('visitors')
39+
// We publish the number of connected users to the 'visitors' channel
40+
peer.publish('visitors', peer.peers.size)
41+
// We send the number of connected users to the client
42+
peer.send(peer.peers.size)
43+
},
44+
close(peer) {
45+
peer.unsubscribe('visitors')
46+
// Wait 500ms before sending the updated locations to the server
47+
setTimeout(() => {
48+
peer.publish('visitors', peer.peers.size)
49+
}, 500)
50+
},
51+
})
52+
```
53+
54+
Install VueUse if you haven't already:
55+
56+
```bash [Terminal]
57+
npx nuxi module add vueuse
58+
```
59+
60+
Let's use the [`useWebSocket`](https://vueuse.org/core/useWebSocket/) composable from VueUse to subscribe to the `visitors` channel and display the number of connected users.
61+
62+
```vue [pages/visitors.vue]
63+
<script setup lang="ts">
64+
const visitors = ref(0)
65+
const { open } = useWebSocket('/ws/visitors', {
66+
immediate: false,
67+
async onMessage(ws, event) {
68+
// We parse the number of connected users from the message
69+
// The message might be a string or a Blob
70+
visitors.value = parseInt(typeof event.data === 'string' ? event.data : await event.data.text())
71+
},
72+
})
73+
74+
// We open the connection when the component is mounted
75+
onMounted(() => {
76+
open()
77+
})
78+
</script>
79+
80+
<template>
81+
<div>
82+
<h1>Visitors: {{ visitors }}</h1>
83+
</div>
84+
</template>
85+
```
86+
87+
See a full open source example on [GitHub](https://github.com/nuxt-hub/multiplayer-globe), including geolocation tracking.

‎docs/content/index.yml

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ hero:
1010
light: '/images/landing/hero-light.svg'
1111
dark: '/images/landing/hero-dark.svg'
1212
headline:
13-
label: "NuxtHub Github App & Action"
14-
to: /changelog/github-app-and-action
13+
label: "Deploy to Cloudflare Workers"
14+
to: /changelog/workers
1515
icon: i-lucide-arrow-right
1616
features:
1717
- title: Cloud Hosting
@@ -38,13 +38,13 @@ features:
3838
description: Run generative AI tasks on a global network and build full-stack AI applications.
3939
icon: i-lucide-wand
4040
to: /docs/features/ai
41-
- title: Analytics Engine
42-
description: Write data points & query with an SQL API with a unlimited-cardinality analytics service at scale.
43-
icon: i-lucide-bar-chart-4
44-
soon: true
4541
- title: Real-time & sockets
4642
description: Create collaborative applications, real-time chat, multiplayer games and more.
4743
icon: i-lucide-mouse-pointer-click
44+
to: /docs/features/realtime
45+
- title: Analytics Engine
46+
description: Write data points & query with an SQL API with a unlimited-cardinality analytics service at scale.
47+
icon: i-lucide-bar-chart-4
4848
soon: true
4949
- title: Cron Triggers & Queues
5050
description: Run periodic jobs with cron triggers & make sure to guarantee delivery with queues.

‎docs/public/images/changelog/workers-support.png

93.7 KB
Loading

0 commit comments

Comments
 (0)