Build serverless applications and deploy instantly across the globe for exceptional performance, reliability, and scale.

Yaitu dengan Cloudflare Workers.

Berikut ini beberapa tips atau info terkait penggunaan salah satu produk unggulan dari Cloudflare ini.

Untuk mulai menggunakan workers ini kita perlu menginstall aplikasi cli bernama wrangler.

Aplikasi wrangler ini sangat flexible, dimana pada umumnya nodejs tooling diinstall sebagai bagian dari development dependency npm project kita, wrangler bisa juga digunakan sebagai standalone cli untuk berinteraksi dengan produk-produk Cloudflare lainnya, juga bisa digunakan sewaktu-waktu kita ingin membuat temporary prototipe dengan cepat, tanpa project.

Untuk itu, saya merekomendasikan untuk menginstall aplikasi ini secara global.

npm install --location global wrangler

Dan selanjutnya pastikan sudah terinstall dengan benar, --selalu lakukan proses verifikasi yah kalo-kalo abis menginstall sesuatu sebelum melanjutkan ke pekerjaan berikutnya, dari pada ketemu error nya nanti belakangan saat kita sedang melakukan hal lain yang pada akhir nya bisa memberikan indikasi yang salah tentang masalah apa yang sebenarnya terjadi.

npm ls --location global
wrangler --version

Oh ya, satu tips lagi, untuk paket-paket npm yang kita install global sebaiknya kita maintain supaya senantiasa up to date, jadi kalo misal kita temukan hal yang aneh atau tidak biasa, kita bisa langsung bereaksi untuk memperbaiki sekaligus mengupdate pengetahuan dan pengalaman kita.

Cara update nya sama saja seperti kita menginstall pertama kali, yaitu dalam hal ini kita mau mengupdate wrangler, maka command nya adalah:

npm install --location global wrangler

Oh ya lagi, mumpung lagi install paket npm global, saya tambahin satu rekomendasi lagi yaitu untuk menginstall pnpm sebagai package manager pengganti dari npm bawaan instalan nodejs, pnpm ini akan menghemat disk, waktu, dan tentunya bandwidth yang masih mahal di negara kita ini.

Nah selanjutnya, baru ini kita install wrangler nya:

npm install --location global pnpm

Wrangler terbaru (versi 2) secara otomatis mem-bundle source code kita dengan esbuild. Kita bisa mengecek hasil dari aktual bundling nya si wrangler seperti apa dengan cara:

$ wrangler publish --dry-run --outdir /tmp/dist

Nah, kita bisa melihat apa yang nantinya akan di-upload ke Cloudflare workers di file /tmp/dist/index.js.

Terkait dengan proses bundling, berikut beberapa tipe "module" yang disupport:

- .txt
- .html 
- .bin
- .wasm dan .wasm?module

Jadi selain js atau ts, kita bisa meng-import file-file tersebut dalam project yang kita buat.

Sebagai penutup, saya sampaikan rekomendasi langkah-langkah untuk membuat project workers baru dari nol.

Dibanding cara yang lebih singkat yaitu dengan wrangler init, berikut ini adalah langkah-langkah manual yang memberikan kita informasi lebih banyak terkait apa-apa saja yang terinstall pada saat wrangler init.

mkdir -p /tmp/x5 && cd /tmp/x5
pnpm init
pnpm install --save-dev typescript@latest
pnpm install --save-dev vitest@latest
pnpm exec tsc --init

Sampai saat ini, kita belum menambahkan wrangler kedalam project tersebut. Untuk menambahkannya, kita gunakan init sbb:

wrangler init

Dari prompt yang muncul, kita isikan seperti berikut ini:

... use git to manage this Worker?  --> yes
... install wrangler into package.json?  --> yes
... install the type definitions for Workers.. --> yes
... create a Worker at src/index.ts? --> Fetch handler
... write your first test with Vitest? --> yes

Perhatikan ada info yang muncul terkait TypeScript typing yang mesti kita tambahkan manual dalam hal ini yaitu:

✨ Installed wrangler, @cloudflare/workers-types, and vitest into devDependencies
🚨 Please add "@cloudflare/workers-types" to compilerOptions.types in tsconfig.json

Edit file tsconfig.json, hasil dari penambahan informasi typing ini di sekitar baris 35 sbb:

...
...
     "types": ["@cloudflare/workers-types"],
...
...

Nah, sekarang kita verifikasi semua sudah terinstall dengan benar.

pnpm exec vitest run

Jika sukses, maka hasil nya kurang lebih mirip-mirip berikut:

 RUN  v0.30.1 /private/tmp/x5

 ✓ src/index.test.ts (1) 743ms

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  09:28:31
   Duration  2.18s (transform 83ms, setup 0ms, collect 584ms, tests 743ms, environment 0ms, prepare 159ms)

Selanjutnya kita bisa mulai membuat aplikasi worker kita di src/index.ts. File ini adalah file ES module sebagaimana biasanya, berisi entri point dari aplikasi, silahkan berkreasi sesuka hati, panduan dan contoh resmi nya lengkap dan mudah ada disini.

Untuk memulai proses development, seperti biasa, kita start development server sbb:

pnpm exec wrangler dev

Untuk mendeploy nya, secara umum proses nya cukup mudah, tinggal ikuti saja instruksi yang muncul dari command-command berikut ini:

pnpm exec wrangler login
pnpm exec wrangler publish

Output nya kurang lebih seperti berikut:

 ⛅️ wrangler 2.15.1
--------------------
Total Upload: 0.19 KiB / gzip: 0.16 KiB
Uploaded x5 (2.66 sec)
Published x5 (6.68 sec)
  https://x5.datafy.workers.dev
Current Deployment ID: e8d976fc-8d92-46c0-8d46-6a5338b09c4d

Sekarang aplikasi kita sudah online di url yang disebutkan diatas. Alhamdulillah.

Selamat berkreasi.