{"id":19522289,"url":"https://github.com/anycable/vercel-anycable-demo","last_synced_at":"2025-04-26T09:32:07.526Z","repository":{"id":195299978,"uuid":"691337379","full_name":"anycable/vercel-anycable-demo","owner":"anycable","description":"Next.js real-time application using AnyCable-Go as a real-time server and deployed on Vercel","archived":false,"fork":false,"pushed_at":"2024-04-23T12:54:02.000Z","size":321,"stargazers_count":8,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-01T09:44:34.988Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vercel-anycable-demo.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anycable.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-14T01:27:24.000Z","updated_at":"2024-05-10T11:28:58.980Z","dependencies_parsed_at":"2023-09-27T08:44:39.601Z","dependency_job_id":"1c6bc594-173e-4d56-b7ff-82132e7d6079","html_url":"https://github.com/anycable/vercel-anycable-demo","commit_stats":null,"previous_names":["anycable/vercel-anycable-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anycable%2Fvercel-anycable-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anycable%2Fvercel-anycable-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anycable%2Fvercel-anycable-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anycable%2Fvercel-anycable-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anycable","download_url":"https://codeload.github.com/anycable/vercel-anycable-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250967244,"owners_count":21515565,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T00:38:08.651Z","updated_at":"2025-04-26T09:32:07.256Z","avatar_url":"https://github.com/anycable.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AnyCable Next.js/Vercel Example\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fanycable%2Fvercel-anycable-demo\u0026env=CABLE_URL,ANYCABLE_HTTP_BROADCAST_URL,ANYCABLE_HTTP_BROADCAST_SECRET,ANYCABLE_JWT_ID_KEY\u0026envDescription=Link%20Vercel%20application%20with%20AnyCable%20server\u0026envLink=https%3A%2F%2Fgithub.com%2Fanycable%2Fvercel-anycable-demo\u0026project-name=vercel-anycable-demo\u0026repository-name=vercel-anycable-demo)\n\nThis is an example of how to use [AnyCable](https://anycable.io) with [Next.js](https://nextjs.org) and [Vercel](https://vercel.com) to build real-time applications.\n\nLearn more about AnyCable for serverless JavaScript apps in [the documentation](https://docs.anycable.io/guides/serverless).\n\n## Prerequisites\n\nYou will need to deploy an AnyCable-Go server to the platform of your choice. We recommend using [Fly.io](https://fly.io) and provide an example configuration in `fly.toml.example` for seamless deployments. However, Anycable-Go server can be deployed on any platform.\n\nUsing [fly CLI](https://fly.io/docs/hands-on/install-flyctl/), run the following command to create and launch a new AnyCable-Go application:\n\n```sh\n# Create a new Fly application\nfly launch --image anycable/anycable-go:1.4 --generate-name --ha=false --internal-port 8080 --env PORT=8080 --env ANYCABLE_BROKER=memory\n```\n\nAnswer \"No\" to all database-related questions and \"Yes\" to deployment. This will deploy your app and create a `fly.toml` file with the minimum configuration. See the `fly.toml.example` file to learn more about other available and recommended configuration options.\n\n## Deployment\n\n- Click the **Deploy** button\n\n- Fill in the required environment variables:\n\n  ```env\n  CABLE_URL=wss://\u003cYOUR_ANYCABLE_GO_HOSTNAME\u003e/cable\n  ANYCABLE_HTTP_BROADCAST_URL=https://\u003cYOUR_ANYCABLE_GO_HOSTNAME\u003e/_broadcast\n  ANYCABLE_HTTP_BROADCAST_SECRET=\u003cYOUR_SECRET\u003e\n  ANYCABLE_JWT_ID_KEY=\u003cYOUR_JWT_SECRET\u003e\n  ```\n\n  * The `ANYCABLE_HTTP_BROADCAST_SECRET` and `ANYCABLE_JWT_ID_KEY` can be any strings.\n  * You can create a secure value using this CLI command `openssl rand -hex 32`\n\n- Set the following environment variables on your AnyCable-Go server:\n\n  ```env\n  ANYCABLE_RPC_HOST=https://\u003cYOUR_VERCEL_APP_HOSTNAME\u003e/api/anycable\n  ANYCABLE_HTTP_BROADCAST_SECRET=\u003cYOUR_SECRET\u003e\n  ANYCABLE_JWT_ID_KEY=\u003cYOUR_JWT_SECRET\u003e\n  ```\n\nWhen using Fly, you can keep all env vars in the `.env.production` file and import the secrets using the following command:\n\n```sh\ncat .env.production | fly secrets import\n```\n\nWhen deploying to Vercel you can use the [Vercel CLI](https://vercel.com/docs/cli) to pull environment variables:\n\n```sh\nvercel env pull\n```\n\n### Authentication\n\nWe use the [AnyCable JWT identification](https://docs.anycable.io/anycable-go/jwt_identification) feature to issue JWT tokens to authenticate clients. The benefit of using AnyCable JWTs is the ability to verify and identify clients at the WebSocket server side without making additional requests to the backend (Vercel functions in our case).\n\nThe `ANYCABLE_JWT_ID_KEY` environment variable is responsible for this.\n\n## Running locally\n\n\u003e [PNPM](https://pnpm.io/installation) is required to install dependencies.\n\nFirst, install the dependencies:\n\n```bash\npnpm install\n```\n\nThen, start AnyCable-Go:\n\n```bash\npnpm anycable-go\n```\n\nAnd start the Next.js app:\n\n```bash\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanycable%2Fvercel-anycable-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanycable%2Fvercel-anycable-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanycable%2Fvercel-anycable-demo/lists"}