honojs / examples Goto Github PK
View Code? Open in Web Editor NEWExamples using Hono.
Home Page: https://hono.dev
Examples using Hono.
Home Page: https://hono.dev
I can get the other examples works but when I run yarn dev
on the blog example, I get:
Running custom build: yarn run build
Usage Error: Couldn't find a script named "build".
$ yarn run [--inspect] [--inspect-brk] [-T,--top-level] [-B,--binaries-only] <scriptName> ...
โ [ERROR] Command failed with exit code 1: yarn run build
I found a mistake in the usage commands.
This command does not work.
Lines 25 to 27 in 284f11c
-yarn run install
+yarn install
I am using hono
(v3.12.6) in some personal projects lately, it is simple and fun, but when it comes to file handling, I am having some trouble and was not able to figure it out.
I followed the instructions here
but with no results :
// ... handlers
.post('/:id/file', async (ctx: AppAuthContext) => {
const user = ctx.get('user');
const projectId = ctx.req.param('id');
const parsed = await ctx.req.parseBody();
const file = parsed['file'] as File;
const form = await ctx.req.formData();
const body = {
type: form.get('type') as ProjectType,
};
const json = await createProjectFile(user, projectId, file, body);
return ctx.json(json);
});
and this is my postman request :
Maybe this is not the correct place for this issue, but I think that a clear example can prevent a lot of headaches.
Thank you.
Hi, getting this error in the browser when I try to run the page-stack example:
Also getting this error on http://127.0.0.1:8788/
From honojs/hono#606 the issue is still valid
Tested with:
/bun/tsconfig.json
from:
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxFragmentFactory": "Fragment",
"jsxImportSource": "hono/jsx"
}
}
to:
{
"compilerOptions": {
"jsx": "preserve",
"jsxFragmentFactory": "Fragment",
"jsxImportSource": "hono/jsx"
}
}
Option 'jsxFragmentFactory' cannot be specified without specifying option 'jsxFactory'.
Which can be solved by adding "jsxFactory": "jsx",
Hi, I'm newer to hono and cloudflare workers. In the jsx-ssr example, I add some code to get value from the KV storage.
A error happens: TypeError: Cannot read properties of undefined (reading 'get')
.
And I out put the c.env
and it is empty: {}
.
Is there something wrong?
I'm trying to create a middleware which will convert post request body json from camel case to snake case, then response body json from snake case to camel case. The first part is OK, but I'm struggling with the second part. I raised it here, as I also thought it would be nice to add it to the examples. This is what I have so far:
import camelcaseKeys from 'camelcase-keys';
import snakecaseKeys from 'snakecase-keys';
function tryParseJSONObject (jsonString: string) {
try {
var o = JSON.parse(jsonString);
if (o && typeof o === "object") {
return o;
}
}
catch (e) { return e }
return undefined
}
app.use('*', async (c, next) => {
if (c.req.method === 'POST') {
let bodyText = await c.req.raw.clone().text()
let jsonObj = tryParseJSONObject(bodyText)
if (jsonObj && !(jsonObj instanceof Error)) {
c.json(snakecaseKeys(jsonObj))
}
}
await next()
try {
let body = await c.res.json()
if (body) {
// How do I set the response body json and avoid potential issues using cloning?
}
} catch(e) {}
})
Do you have any relevant examples?
Hey,
I really like hono, and I'd love to see how I can use it with cloudflare queue ? And Cron ?
Maybe some simple example would be super nice
A full example
Maybe this is too Cloudflare-specific for Hono, but it would be awesome to have something like itty-durable that makes integrating with Durable Objects type-safe and seamless, then Hono would truely be a full stack framework! (hono client + rpc + hono-do ๐ )
It'd be great if there was an official example of how to use Taiwlind with Hono. It's a frequently asked topic on the Discord server.
For example, following the usual docs for getting Tailwind to work in dev on Cloudflare Pages works fine. However, I can't figure out how to get the CSS file to be created in a production build.
I'm currently working on integrating Hono with Cloudflare Durable Objects following this example: Hono Example. However, I've run into a snag and need some help troubleshooting.
My implementation, which is essentially a replica of the original example, can be found here: My Hono Implementation.
When I run the worker and send requests to port 8787 (where the worker runs, I have confirmed) I see 404 not found for all routes '/', '/increment', '/decrement'. What could be the reason? In general how else can I test if the do works?
Looking at https://github.com/honojs/examples/blob/main/durable-objects/src/counter.ts, I wanted to try something that makes a Durable Object feel more like a stateless application but with a c.state
property. So I came up with this:
const app = new HonoObject()
const getValue = async (storage: DurableObjectStorage) => await storage.get<number>('value') || 0
app.get('/increment', async (c) => {
const { storage } = c.state
const newVal = 1 + await getValue(storage);
storage.put('value', newVal)
return c.text(newVal.toString())
})
app.get('/decrement', async (c) => {
const { storage } = c.state
const newVal = -1 + await getValue(storage);
storage.put('value', newVal)
return c.text(newVal.toString())
})
app.get('/', async c => {
const value = await getValue(c.state.storage)
return c.text(value.toString())
})
export { app as Counter }
It does a whole bunch of stuff like support oauth, email sending using Amazon SES, permissions, rate limiter using durable objects, SQL database using PlanetScale
https://github.com/OultimoCoder/cloudflare-planetscale-hono-boilerplate
It might be worth linking to as a larger example? But if not don't worry about it.
@yusukebe , is there an interest in my adding another blog type web app in the examples folder?
The current is api based, while the one I have renders html using simple interpolated strings.
the app also uses postgres for the data.
In the blog example you can use getMiniflareBindings()
to get access to the global env variables. I am trying to do the same thing in my project but can't replicate the functionality.
bindings.d.ts file:
export interface Bindings {
ENV: string
MYSQL_URL: string
JWT_SECRET: string
JWT_ACCESS_EXPIRATION_MINUTES: number
JWT_REFRESH_EXPIRATION_DAYS: number
JWT_RESET_PASSWORD_EXPIRATION_MINUTES: number
JWT_VERIFY_EMAIL_EXPIRATION_MINUTES: number
}
declare global {
function getMiniflareBindings(): Bindings
}
Trying to use it:
const env = getMiniflareBindings()
Error:
ReferenceError: getMiniflareBindings is not defined
build.js:
import { build } from 'esbuild'
try {
await build({
entryPoints: ['./src/index.ts'],
bundle: true,
outdir: './dist/',
sourcemap: true,
minify: true
})
} catch(err) {
process.exitCode = 1;
}
tsconfig.json:
{
"compilerOptions": {
"allowJs": true,
"target": "esnext",
"lib": ["esnext"],
"moduleResolution": "node",
"resolveJsonModule": true,
"inlineSourceMap": true,
"module": "esnext",
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"strict": true,
"noImplicitAny": true,
"noEmit": true,
"types": [
"@cloudflare/workers-types",
"@types/bcryptjs"
]
},
"ts-node": {
"transpileOnly": true
},
"include": ["./src/**/*", "bindings.d.ts"]
}
Any idea what I am doing wrong?
How can you encrypt keys to later validate with jwt, I tried with bcrypt but it gave me errors
Are there any example of modern-monorepo-stack (pnpm and turborepo) using Hono RPC?
If not, I want to add!
Did this still the type of client is unkonw. Ran pnpm install and restrated the server.
@yusukebe Is it possible to use Hono with the new Next.js app directory? If so, do you have some example?
Thank you for your excellent work
Hi,
Good job on Hono!
Followed this hono-example-blog example.
The route will become /post/post, not /post.
Index.ts should have this instead, think it would fix it.
app.route('/', middleware)
app.route('/', api)
Am I wrong? Please explain to me in that case how you're suppose to you app.route correct.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.