Add Cyclic hosting guide (#888)

site/docs/.vitepress/configs/locales/en.ts

@@ -340,6 +340,10 @@ const hostingTutorials = {
       text: "Vercel",
       link: "/hosting/vercel",
     },
+    {
+      text: "Cyclic",
+      link: "/hosting/cyclic",
+    },
     {
       text: "Virtual Private Server",
       link: "/hosting/vps",

site/docs/.vitepress/configs/locales/id.ts

@@ -332,6 +332,10 @@ const hostingTutorials = {
       text: "Vercel",
       link: "/id/hosting/vercel",
     },
+    {
+      text: "Cyclic",
+      link: "/id/hosting/cyclic",
+    },
     {
       text: "Virtual Private Server",
       link: "/id/hosting/vps",

site/docs/.vitepress/configs/locales/uk.ts

@@ -340,6 +340,10 @@ const hostingTutorials = {
       text: "Vercel",
       link: "/uk/hosting/vercel",
     },
+    {
+      text: "Cyclic",
+      link: "/uk/hosting/cyclic",
+    },
     {
       text: "Віртуальний приватний сервер",
       link: "/uk/hosting/vps",

site/docs/hosting/comparison.md

@@ -49,6 +49,7 @@ Instead, you will often have to have a database separately and connect to it if
 | Scaleway Functions     | Free       | €0.15/1M req, €1.2/100K GB-s                                                                               | [1M requests, 400K GB-s/mo](https://www.scaleway.com/en/pricing/?tags=serverless-functions-serverlessfunctions)   | ❓                                                                                                      | ❓                                             | ❓                                                |                                                                                                                                                                     |
 | Scaleway Containers    | Free       | €0.10/100K GB-s, €1.0/100K vCPU-s                                                                          | [400K GB-s, 200K vCPU-s/mo](https://www.scaleway.com/en/pricing/?tags=serverless-containers-serverlesscontainers) | ❓                                                                                                      | ❓                                             | ❓                                                |                                                                                                                                                                     |
 | Vercel Edge Functions  | Free       | $20/mo subscription for 500K                                                                               | [100K req/day](https://vercel.com/pricing)                                                                        | [✅](https://vercel.com/docs/concepts/functions/edge-functions/edge-runtime#compatible-node.js-modules) | ❓                                             | [✅](https://vercel.com/templates/edge-functions) |                                                                                                                                                                     |
+| Cyclic.sh              | Free       | $1/mo per app, $0.50 for 100K                                                                              | [10K req/mo](https://docs.cyclic.sh/overview/limits)                                                              | ✅                                                                                                      | ❓                                             | ❓                                                |                                                                                                                                                                     |
 | serverless.com         | Free       |                                                                                                            |                                                                                                                   | ❓                                                                                                      | ❓                                             | ❓                                                |                                                                                                                                                                     |
 | Heroku                 | $5         | $5 for 1,000 [dyno hours](https://devcenter.heroku.com/articles/usage-and-billing#dyno-usage-and-costs)/mo | [512MB RAM, sleeps after 30 mins of inactivity](https://www.heroku.com/pricing)                                   | ✅                                                                                                      | ✅                                             | ❓                                                | Deno is supported by a [third-party buildpack](https://github.com/chibat/heroku-buildpack-deno).                                                                    |
 | DigitalOcean Apps      | $5         |                                                                                                            |                                                                                                                   | ❓                                                                                                      | ❓                                             | ❓                                                | Not tested                                                                                                                                                          |

site/docs/hosting/cyclic.md

@@ -0,0 +1,159 @@
+---
+prev: false
+next: false
+---
+
+# Hosting: Cyclic
+
+This guide tells you how you can host your grammY bots on [Cyclic](https://cyclic.sh).
+
+## Prerequisites
+
+To follow along, you need to have a [Github](https://github.com) and [Cyclic](https://cyclic.sh) account.
+First, initialize your project and install some dependencies:
+
+```sh
+# Initialize the project.
+mkdir grammy-bot
+cd grammy-bot
+npm init -y
+
+# Install main dependencies.
+npm install grammy express dotenv
+
+# Install development dependencies.
+npm install -D typescript ts-node nodemon @types/express @types/node
+
+# Initialize TypeScript config.
+npx tsc --init
+```
+
+We will store our TypeScript files inside `src/`, and our compiled files in `dist/`.
+After creating both of them, cd into `src/`, and create a file named `bot.ts`.
+Your project's root directory should now look like this:
+
+```asciiart:no-line-numbers
+.
+├── node_modules/
+├── dist/
+├── src/
+│   └── bot.ts
+├── package.json
+├── package-lock.json
+└── tsconfig.json
+```
+
+Then, open `tsconfig.json`, and rewrite its contents to use this configuration:
+
+```json
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}
+```
+
+And then we have to add `start`, `build` and `dev` scripts to our `package.json`.
+Our `package.json` should now be similar to this:
+
+```json{6-10}
+{
+  "name": "grammy-bot",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/bot.js",
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/bot.js",
+    "dev": "nodemon src/bot.ts"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.18.2",
+    "grammy": "^1.17.2",
+    "dotenv": "^16.3.1"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.17",
+    "@types/node": "^20.4.9",
+    "typescript": "^5.1.6",
+    "nodemon": "^3.0.1",
+    "ts-node": "^10.9.1"
+  },
+  "keywords": []
+}
+```
+
+### Webhooks
+
+Open `src/bot.ts` write the following contents to it:
+
+```ts{15}
+import express from "express";
+import { Bot, webhookCallback } from "grammy";
+import "dotenv/config";
+
+const bot = new Bot(process.env.BOT_TOKEN || "");
+
+bot.command("start", (ctx) => ctx.reply("Hello World!"))
+
+if (process.env.NODE_ENV === "DEVELOPMENT") {
+  bot.start();
+} else {
+  const port = process.env.PORT || 3000;
+  const app = express();
+  app.use(express.json());
+  app.use(`/${bot.token}`, webhookCallback(bot, "express"));
+  app.listen(port, () => console.log(`listening on port ${port}`));
+}
+```
+
+We recommend that you have your webhook handler on a secret path rather than `/`.
+As shown in the highlighted line above, we are using the `/<bot-token>` instead of `/`.
+
+### Local Development
+
+Create a `.env` file at the root of your project with the following contents:
+
+```
+BOT_TOKEN=<bot-token>
+NODE_ENV=DEVELOPMENT
+```
+
+After that, run your `dev` script:
+
+```sh
+npm run dev
+```
+
+Nodemon will watch your `bot.ts` file and restart your bot on every code change.
+
+## Deploying
+
+1. Create a repository on GitHub, it can be either private or public.
+2. Push your code.
+
+> It is recommended that you have a single stable branch and you do your testing in separate branches, so that you won't land unexpected behaviors to production.
+
+3. Visit your [Cyclic dashboard](https://app.cyclic.sh).
+4. Click "Link Your Own" and select your repository.
+5. Go to Advanced > Variables and add your `BOT_TOKEN`.
+6. Deploy your bot with "Connect Cyclic".
+
+### Setting the Webhook URL
+
+If you are using webhooks, after your first deployment, you should configure your bot's webhook settings to point to your app.
+To do that, send a request to
+
+```text
+https://api.telegram.org/bot<token>/setWebhook?url=<url>/<token>
+```
+
+replacing `<token>` with your bot token, and `<url>` with the full URL of your app along with the path to the webhook handler.
+
+Congratulations!
+Your bot should now be up and running.

site/docs/id/hosting/cyclic.md

@@ -0,0 +1,159 @@
+---
+prev: false
+next: false
+---
+
+# Hosting: Cyclic
+
+Panduan ini berisi langkah-langkah untuk menjalankan bot grammY di [Cyclic](https://cyclic.sh).
+
+## Prasyarat
+
+Sebelum memulai, kamu diharuskan memiliki sebuah akun [GitHub](https://github.com) dan [Cyclic](https://cyclic.sh).
+Pertama-tama, inisialisasi proyeknya lalu instal beberapa dependensi berikut:
+
+```sh
+# Inisialisasi proyek.
+mkdir grammy-bot
+cd grammy-bot
+npm init -y
+
+# Instal dependensi utama.
+npm install grammy express dotenv
+
+# Instal dependensi pengembangan.
+npm install -D typescript ts-node nodemon @types/express @types/node
+
+# Inisialisasi pengaturan TypeScript.
+npx tsc --init
+```
+
+Kita akan menyimpan file TypeScript di dalam `src/` dan file hasil kompilasinya di `dist/`.
+Setelah membuat kedua folder, cd ke `src/` lalu buat sebuah file bernama `bot.ts`.
+Sekarang, struktur direktori root kita seharusnya mirip seperti ini:
+
+```asciiart:no-line-numbers
+.
+├── node_modules/
+├── dist/
+├── src/
+│   └── bot.ts
+├── package.json
+├── package-lock.json
+└── tsconfig.json
+```
+
+Selanjutnya, buka `tsconfig.json` lalu ganti isinya dengan konfigurasi berikut:
+
+```json
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}
+```
+
+Kemudian, kita akan menambahkan script `start`, `build`, serta `dev` ke `package.json`.
+Isi `package.json` kita kurang lebih menjadi seperti ini:
+
+```json{6-10}
+{
+  "name": "grammy-bot",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/bot.js",
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/bot.js",
+    "dev": "nodemon src/bot.ts"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.18.2",
+    "grammy": "^1.17.2",
+    "dotenv": "^16.3.1"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.17",
+    "@types/node": "^20.4.9",
+    "typescript": "^5.1.6",
+    "nodemon": "^3.0.1",
+    "ts-node": "^10.9.1"
+  },
+  "keywords": []
+}
+```
+
+### Webhooks
+
+Buka `src/bot.ts` lalu isi dengan kode berikut:
+
+```ts{15}
+import express from "express";
+import { Bot, webhookCallback } from "grammy";
+import "dotenv/config";
+
+const bot = new Bot(process.env.BOT_TOKEN || "");
+
+bot.command("start", (ctx) => ctx.reply("Halo Dunia!"))
+
+if (process.env.NODE_ENV === "DEVELOPMENT") {
+  bot.start();
+} else {
+  const port = process.env.PORT || 3000;
+  const app = express();
+  app.use(express.json());
+  app.use(`/${bot.token}`, webhookCallback(bot, "express"));
+  app.listen(port, () => console.log(`Menyimak di port ${port}`));
+}
+```
+
+Untuk alasan keamanan, penanganan webhook sebaiknya diletakkan di path tersembunyi alih-alih di `/`.
+Seperti yang terlihat pada baris yang disorot di atas, kita menggunakan path `/<bot-token>` alih-alih di `/`.
+
+### Pengembangan Lokal
+
+Buat sebuah file `.env` di root proyek lalu isi dengan konten berikut:
+
+```
+BOT_TOKEN=<bot-token>
+NODE_ENV=DEVELOPMENT
+```
+
+Setelah itu, jalankan script `dev`-nya:
+
+```sh
+npm run dev
+```
+
+Nodemon akan memantau file `bot.ts` dan memulai ulang bot ketika terjadi perubahan kode.
+
+## Men-deploy
+
+1. Buat sebuah repositori di GitHub, bisa berupa privat ataupun publik.
+2. Push kodenya.
+
+> Disarankan memiliki branch utama untuk produksi dan branch terpisah untuk melakukan pengetesan agar tidak terjadi hal-hal yang tidak diinginkan di tahap produksi.
+
+3. Kunjungi [dashboard Cyclic](https://app.cyclic.sh).
+4. Klik "Link Your Own" lalu pilih repositorinya.
+5. Pergi ke Advanced > Variables, kemudian tambahkan `BOT_TOKEN`-nya.
+6. Deploy bot dengan "Connect Cyclic".
+
+### Mengatur URL Webhook
+
+Jika kamu menggunakan webhooks, tepat setelah melakukan deployment, kamu perlu mengarahkan webhook bot ke app yang barusan kamu deploy.
+Untuk melakukannya, kirim request ke
+
+```text
+https://api.telegram.org/bot<token>/setWebhook?url=<url>/<token>
+```
+
+Ganti `<token>` dengan token bot serta `<url>` dengan URL app kamu lengkap beserta path penanganan webhook-nya.
+
+Selamat!
+Bot kamu sekarang siap untuk digunakan.