introduction HonoにはRPCの機能があり、routerで定義している情報（引数とか型とか）を他のファイルで簡単に利用することができます。 この記事では、そのRPCの機能とNextを組み合わせて、HonoをNextのBFFとして使用する組み合わせについて紹介していきたいと思います。 まず、今回作成した２つのサンプルのリポジトリを紹介します。 以下の２つのリポジトリのコードを用いて説明するので、もし興味があればクローンして色々試してみて下さい。 next-hono-webはshadcn/uiのコンポーネントをお借りして作成したサンプルのダッシュボードに対して、一部の値を動的に設定するよう変更を加えたものです。 next-hono-backendはとてもシンプルで、next-hono-webで使用するサンプルデータを返すよう定義されています。 next-hono-backend側
先日リリースしたv3.9.0でHonoの「Cloudflare Pages」のスターターテンプレートが新しくなりました。 これがなかなか面白いので詳しく紹介します。 使ってみる 使ってみてください。create honoコマンドを使います。C3（Create Cloudflare CLI）コマンドでもHonoを選べますが今のところそれだとWorkersのテンプレートになるのでcreate honoで。npmの場合は以下です。 選択肢がでてくるのでcloudflare-pagesを選びます。 そしたら、ディレクトリに入って、npm installしてnpm run devすれば開発サーバーが立ち上がり、npm run deployすればデプロイできます。 Viteベース で、以前からCloudflare Pages、もしくはWorkersも含み、Honoでアプリ開発をしていた人はこのスタータ
Cloudflare Workersで使えるシンプルだけど奥が深いフレームワークHonoをためしてみた | DevelopersIO
はじめに こんにちは、CX事業本部MAD事業部の森茂です。 Cloudflare Workersで動作するTypeScript製フレームワークHonoを紹介させていただきます。 Honoとは @yusukebe氏を中心に開発が進められているフレームワークでExpressでアプリケーションを作るような書き方でCloudflare Workersで動くアプリケーションを簡単に組み上げていくことができます。 import { Hono } from 'hono' const app = new Hono() app.get('/', (c) => c.text('Hono!!')) app.fire() Cloudflare WorkerはService WorkerのためNode.jsに依存したAPIは動作しません。Cloudflare Workers上でアプリケーションを作ろうとすると意外と
Honoのv3が出ました
僕がCreatorのHonoの新しいメジャーバージョンである「v3.0.0」が出ました。 このリリースノートに全て書いたのですが、補足を含めてこちらにも残しておきます。 Honoのステータス v3の説明の前に現在のHonoのステータスです。 GitHubスターは3.5Kです。 Cloudflare WorkersのSDK、Deno、Bun、それぞれのプロジェクトにHonoの文字が入ってます。 プロダクションやライブラリでも使われています。 cdnjsのAPIサーバー Polyfill.io repeat.dev Drivly substats Ultra（DenoのReact SSRフレームワーク） Cloudflare 公式のブログ記事 などなど いい感じです。 v3のスローガン v3へのバージョンアップにあたってのスローガンはズバリこれでした。 Do Everything, Run A
Hono v3 and v4
JSConf JP Nov 19, 2023. Yusuke Wada
Hono + htmx + Cloudflare is a new stack Jul 21, 2023 As a former backend engineer, I sometimes find React complex. Moreover, as a framework developer, creating a hydration mechanism can be troublesome. But we often end up using React. One of the main advantages of using React is JSX. At first, JSX seems strange - “Why are HTML tags in JavaScript!!!” However, once I get used to it, I find that JSX
Hotwire/Honoなウェブアプリのアーキテクチャ
React Notes: MarkdownエディタのUIを作る 「React Notes」というReact Server Components(RSC)が発表された時期にReactチーム[1]やVercel[2]が公開していたブログ投稿デモサイトがあって、それをHotwireとHono/JSXで作ってみることでRSCなしに似たようなUXが作れるっていうのを示せるのではと思って、今クローンを作ってみています 現在はテキストエリアにMarkdownを入力するとプレビューをしてくれて、保存→更新の画面遷移がひととうりできるという部分のUIだけ先に試しに書いてみて以下にデプロイしました ソースコードがここにあります SSRな部分をHono/JSXのテンプレート処理系に寄せて クライアントサーバー通信と画面更新のコードはHotwire/Turboで簡略化 イベントハンドラな部分はHotwire/St
Honoのv3.2が出ました
Honoのv3.2が出ました。 今回のアップデートについて、リリースノートとほぼ同じ内容ですが、書きます。 Honoのステータス ちなみに現在のHonoのステータス。GitHubスターは4.4Kとなっています。 新しい機能 今回はマイナーアップデートとなります。破壊的変更は含まれないものの、大きな機能がいくつか追加されました。 2つの新しいルーター: LinearRouter and PatternRouter プリセットという概念と実装: hono/tiny, hono/quick app.mount() Node adapter serverの初のメジャーバージョン「v1.0.0」がリリース AWS Lambda function URLsのサポート Cookie Middlewareの追加 hono/nextjsからhono/vercelへのリネーム ではひとつずつ見ていきましょう。
Supercharged by Bun runtime, Static Code Analysis, and Dynamic Code Injection Being one of the top-performing TypeScript frameworks. Comparable to Go and Rust. Elysia Bun
昨日、HonoのNode.jsアダプタのv1.3.0をリリースしました。これまでのものより2.7倍速くなるパフォーマンス向上が含まれています。 このリリースは「2.7倍」という数値以上にHonoにとって大きなものになりますので、それについて解説します。 Request/Responseの翻訳 HonoはWebスタンダードAPIのみを利用したWebフレームワークで、WebスタンダードAPIのみで構成されたものがWebアプリになるうるランタイムのみを対象にしていました。具体的には、Cloudflare Workers、Deno、Bun、Fastly Computeなどです。 Honoを使わない例を出すと、以下のコードはWebスタンダードのみを利用してる非常に素朴なものですが、これだけでCloudflareでもBunでも立派にWebアプリになります。
GitHub - vonojs/vono
This is unreleased. Although feature complete, the adapters are probably not all working for all providers. Create a hono app in server/index and export it as default. Vono will pick it up and build it as the server runtime. You can access Hono's RPC function with import rpc from "#vono/rpc";. On the server it directly calls the handler without an additional request. You can access the build metad
GitHub - honojs/honox: HonoX - Hono based meta framework
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - yusukebe/hono: Ultrafast web framework for Cloudflare Workers, Deno, and Bun. Fast, but not only fast.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
株式会社 CoeFont でフロントエンドエンジニアをしている uzimaru です。 Next.js の Middleware で Hono を使ってみたのでそれについて記事にまとめます。 モチベーション Next.js の Middleware はアプリケーションに1つだけしか設定出来ず、どの path で実行するかの設定も config を使って正規表現や Header, Cookie を指定して設定するかリクエストの pathname を見て処理を分岐する必要があります。 シンプルな実装のみなら良いのですが、path によってログインしているか確認したい、いくつかの処理を Middleware で適応したい、というように要件が複雑になると管理が大変になっていくと思います。 そこで、Hono のようなシンプルなフレームワークを Middleware で動かして実装をシンプルにしようと
Next.jsとHono RPCで安全・爆速開発
AWS Lambda のハンドラは辛い こんにちは！AWS Lambda初心者です！ AWS Lambda と言えば、サーバレスかつ非常に安い価格で無限にスケールアウトできる処理を書けることで有名ですが1、 2022年04月の Function URL アップデート でAPI Gatewayなど用いなくてもラムダ単体かつ無料でHTTPリクエストを処理できるURLを持てるようになり、かなりの神サービスになりました。 弊社でも Function URL でラムダによる外部連携用のサーバを立てておき、ちょっとしたHTTPのリクエストを受け取って、他所のサーバにデータ連携したり、S3にリクエスト中のデータを保存したりする用途に積極的に使っています。 さて、そんな神サービスである AWS Lambda 君ですが、いざ実際にJavaScriptでHTTPサーバを書こうとすると…… ちょっと辛い！ //
GitHub - sonikjs/sonik
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Honoハンズオン2024年3月沖縄
編集中 ここにコードを置くと思います。 このイベントが今週末で、その中で「Honoハンズオン」をやるので超絶ネタバレですが、そこで話す内容を書きます。 方針 ハンズオンと言いつつ「みんなで一斉にやりましょう」ってやると合わせるのに時間がかかるので、僕がどんどん進めます。なので、ついてきたい人だけついてきてください。そうじゃない人は僕がコード書くのを見てください。むしろその方がよくわかっていいと思います。 Honoとは？ ウェブサイトを見てください。 あと正直、僕はブログ書くのとか好きなんですが、いわゆるちゃんとした「ドキュメント」を書くのが正直苦手でそれは英語に限らずなんですが、なので、よくしている方いたら貢献してください。コントリビューションウェルカム！ create-hono さてこれからやっていくわけですが、Honoのプロジェクトをつくるときにはcreate-honoというCLIを使
【2023環境デッキ？】Bun + Hono + SvelteKit + Cloudflare D1 + Drizzle ORM - Qiita
【2023環境デッキ？】Bun + Hono + SvelteKit + Cloudflare D1 + Drizzle ORMCloudflareWorkersSvelteKitBunHonoCloudflareD1 WEB開発環境Tier1を組もうぜ？ 大学からの友人に「俺は起業をするぞ！多少なら出すからWEBサイト作れん？」と言われたので あらゆる自由 を条件に（ほぼ）無償で引き受けた案件という名の趣味制作で「ぼくのかんがえた最強のWEBサイト」を目指してみました。保守運用の汎用性は犠牲となったのだ 今年もアドベントカレンダーに投稿する機会を得たので、環境構築過程とAPI接続ができるまでをご紹介します。（他の方々の記事もぜひ読んでください） 作業メモも兼ねているため中々な長さかつ読みづらいかと思いますが、必要な部分を掻い摘んで読んでいただければ幸いです。 自己紹介 '97年製 実務歴
Hono で Server-Sent Events によるストリーミングを実装する 2024.02.01 Server-Sent events（SSE）は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信、HTTP で通信するという特徴があります。この記事では Hono を使って OpenAI API を使ったテキスト生成をストリーミングする方法を紹介します。 Server-Sent Events（SSE） は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信になるという特徴があります。また HTTP で通信するため、WebSocket のように独自のプロトコルではないため、運用の負担が少ないというメリットがあり
Hwy is a simple, lightweight, and flexible web framework, built on Hono and HTMX. Hwy is a lot like NextJS or Remix, but it uses HTMX instead of React on the frontend. Hwy lets you write React-style JSX in nested, file-based routes, with Remix-style actions and parallel loaders. Page components are async, so you can even fetch data in JSX if you want to (just be careful with waterfalls). The backe
ブログをAstroからHonoのSSGに移行しました
このブログは元々Astroを使って生成していました。 Astroはサクッとコンテンツメインのサイトが作れて便利なんですが、Blogを作り、育み、慈しむ ~ Blog Hacks 2024というスライドを見て、もうちょっと「好きなもの」を使って作り変えるのも良いかなと思っていました。 同じくらいの時期にHonoのv4でSSGが可能になり、触ってみたい気持ちが高まっていたので移行してみました。 Honoは以前、CloudFlare WorkersでLINE botを作ったときに使ったんですが、かなり感触が良かったので定期的に状況をウォッチしていました。 Hono自体も良いですし、作者さん(@yusukebe)のブログがワクワクする内容で好きなんですよね。 Honoのv4が2月9日にリリースされますとか、OSSで世界と戦うために - ゆーすけべー日記とか。 移行作業について 移行と言いつつ既存の
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
htmxについてちょっと遊んでおきたかったので遊んだ。Cloudflare Workersの上でHonoを動かして、TSXでHTMLを返しつつ、その中にhtmxをのっけた、みたいな構成。𝑹𝒆𝒂𝒍 𝑾𝒐𝒓𝒍𝒅 𝑩𝒖𝒔𝒊𝒏𝒆𝒔𝒔...でも使えるかな？ https://wild-meadow-79c7.windymelt.workers.dev/ なんか一瞬でできた。 やったこと pnpm create cloudflare@latestしてHello, Worldプロジェクトを作成してそのままデプロイ(この時点で https://wild-meadow-79c7.windymelt.workers.dev/ が生える。すげ〜) ディレクトリができるのでそこに入ってpnpm i honoする tsconfig.jsonのcompilerOptionsのjsxまわ
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Hono Conference 2024参戦レポート
Deno で本格的な Web システムを作るためテンプレートを作ってみた。 deno-vite-react-template deno-hono-api-template backend と frontend で完全に分かれていて RESTful API で通信するようにした。 仕様 deno-vite-react-template Deno, Vite, React による構成 (vite-deno-plugin を使った) Routing Library として wouter UI Library として Chakra UI 全体的に jotai, jotai-tanstack-query を活用してAPI通信のキャッシュなど行っている react-if は便利なので皆使ってほしい deno-hono-api-template Hono による RESTful API サーバー RPC
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
🔥HonoXをnodeで実行する
hono@v4がリリースされ、合わせてファイルベースルーティング機能を持ったHonoXもリリースされました これによりSPA,SSG,SSRと好みの手法でウェブアプリケーションを作成できるフレームワークの選択肢が増えました 今記事はGoogle Cloud Runなどのコンテナイメージを実行するようなクラウドへデプロイできるようにしてみたメモです 公式READMEにもある@hono/vite-cloudflare-pagesでビルドしたものをそのままNodejsで実行することも可能ですが、Worker向けのコードが入っており動かないコードが混じっているのもと思い、自前で実装します ポイントとしては @hono/vite-cloudflare-pages で行っている以下の処理を実装する必要があります 実装内容 production実行時に/static,/favicon.icoをserve
Babylon.js x Hono x Fresh x Deno で作る 3D モデリングツール - 虎の穴開発室ブログ
皆様、夏をいかがお過ごしでしょうか？ 奥谷です。 本記事は虎の穴ラボ2024年夏の連載ブログ 13日目の記事です。 前回は、godanさんによる「刺繍ミシンで日本語を刺繍しよう」でした。 次回は、m.mさんによる「画像ファイルをまとめてWebPに変換しよう！」が投稿予定です。 今回は、Babylon.js と Hono と Fresh とDeno を使って、3D モデリングツールを作ってみました。 https://pile-up.deno.dev/ にアクセスして、遊べます。 pile-up.deno.dev とりあえずソースコードを全部見たい！という方は、こちらからどうぞ。 github.com 3D モデリングツール 『Pile-Up』 今回の3Dモデリングツールは、Babylon.jsが提供するCSG（Constructive Solid Geometry）を3Dモデルを構築します。
HonoでTurbo Streamsレスポンスを描画する
要点 2つの個所を1度のレスポンスで書き換えるのにTurbo Streamsが必要 決まったHTTPレスポンスを返すだけなのでRailsはいらない form送信に応答するだけなのでこの目的ではWebSocketサーバーはいらない 参考 1: https://zenn.dev/snowcrush/articles/5e23bd7c253f66 2: https://hono.dev/api/context 3: https://turbo.hotwired.dev/handbook/streams
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next as Frontend + Hono as BFF という組み合わせの提案
Honoの新しいCloudflare Pagesスターターについて
Cloudflare Workers を使って Web ページを段階的に移行したい - なつねこメモ
Hono + htmx + Cloudflare is a new stack - Yusuke Wada
Elysia - Ergonomic Framework for Humans
HonoのNode.jsアダプタが2.7倍速くなりました
@hono/zod-openapiで型安全なAPI開発 - Repro Tech Blog
Next.js の Middleware で Hono を使う
最近 Hono で外部連携用の AWS Lambda 書いています - Qiita
Hono で Server-Sent Events によるストリーミングを実装する
Hwy Framework
Release v4.4.0 · honojs/hono
htmxをCloudflare Workers + Honoで動かして入門した - Lambdaカクテル
Release v4.1.0 · honojs/hono
Honoで作るスキーマファーストなAPI(を完成させたかった・・・)
DenoでHonoやReactを使ったテンプレートを作ってみた - ハッカーと漫画家
Release v4.3.0 · honojs/hono