Comment utiliser Astro avec Hono

Astro : Un framework web puissant, mon préféré du moment. Sa polyvalence le rend idéal pour un large éventail de projets. Cependant, pour le développement d'API, Hono se démarque.

Hono : un framework API simple et portable avec un système RPC convivial (ressemblant au tRPC mais plus rapide). Ce guide montre comment combiner les atouts des deux.

Configuration d'Astro

Créez un nouveau projet Astro en utilisant :

<code class="language-bash">npm create astro@latest</code>

Suivez les invites CLI. Démarrez le projet avec :

<code class="language-bash">npm run dev</code>

Accédez à votre projet Astro sur http://localhost:4321.

Configurer Hono

Installer Hono :

<code class="language-bash">npm install hono</code>

Créer un itinéraire fourre-tout dans src/pages/api/[...path].ts :

<code class="language-typescript">// src/pages/api/[...path].ts
import { Hono } from 'hono';

const app = new Hono().basePath('/api/');

app.get('/posts', async (c) => {
    return {
        posts: [
            { id: 1, title: 'Hello World' },
            { id: 2, title: 'Goodbye World' },
        ],
    };
});
</code>

Le .basePath('/api/') est crucial ; il aligne le routage de Hono avec la structure de fichiers d'Astro. Ajustez ce chemin si nécessaire pour qu'il corresponde à l'emplacement du point final de votre projet Astro (par exemple, /foo/bar/ pour src/pages/foo/bar/[...path].ts).

Intégrer Hono à Astro

Créez un export ALL pour gérer toutes les demandes et les acheminer vers Hono :

<code class="language-typescript">// src/pages/api/[...path].ts
import { Hono } from 'hono';
import type { APIRoute } from 'astro';

// ... (Hono app setup from previous step) ...

export type App = typeof app; // Export Hono app type

export const ALL: APIRoute = (context) => app.fetch(context.request);</code>

Maintenant, http://localhost:4321/api/posts renverra vos données fictives via Hono.

Ajout d'un client RPC typé

Pour les interactions API sécurisées, utilisez le hc client de Hono :

<code class="language-typescript">// src/pages/some-astro-page.astro
import { hc } from 'hono/client';
import type { App } from './api/[...path].ts';

const client = hc<App>(window.location.href);

const response = await client.posts.$get();
const json = await response.json();

console.log(json); // { posts: [...] }</code>

Conclusion

Cette configuration combine la puissance frontale d'Astro avec les capacités backend efficaces de Hono, offrant une expérience de développement rationalisée avec une sécurité de type. Explorez les fonctionnalités étendues de Hono pour un développement d'API encore plus avancé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!