Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 24 additions & 30 deletions src/content/docs/guides/backend-adapters/hono.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -42,22 +42,19 @@ Components inside other directories (e.g. `components` and `layouts`) will not b

### Run the development server

You can run the development server by using the `startServer` function:
You can run the development server by using the `mighty` middleware:

```ts {8}
```ts {6}
import { Hono } from "hono";
import { startServer } from "@gomighty/hono";
import { mighty } from "@gomighty/hono";

const app = new Hono();

// ...

startServer(app);
// Chain .use(mighty()) for type safety
const app = new Hono().use(mighty());
```

This will start a server that renders Astro components on-demand, with Hot Module Replacement (HMR) included for fast updates.

The server will only start **in development** (i.e. when `NODE_ENV=development`), and the `startServer` function will do nothing in production.
The `mighty()` middleware auto-detects the environment: in development it starts the dev server with HMR, and in production it sets up rendering of pre-built components.

<Aside>
When using Hono, Mighty runs the development server in [**middleware mode**](https://vite.dev/config/server-options.html#server-middlewaremode).
Expand All @@ -75,19 +72,19 @@ Before using Mighty in production, first build optimized versions of your compon
<Fragment slot="npm">
```shell
# build assets with npm
npx @gomighty/hono build
npx mighty-hono build
```
</Fragment>
<Fragment slot="pnpm">
```shell
# build assets with pnpm
pnpx @gomighty/hono build
pnpx mighty-hono build
```
</Fragment>
<Fragment slot="bun">
```shell
# build assets with bun
bunx @gomighty/hono build
bunx mighty-hono build
```
</Fragment>
</PackageManagerTabs>
Expand All @@ -102,19 +99,18 @@ Mighty will now use render optimized Astro components either statically or on-de

You can use Astro as a rendering engine for your application by returning Astro components from your Hono code.

```ts {7-10}
```ts {8-11}
import { Hono } from "hono";
import { db } from "./lib/db";
import { startServer, render } from "@gomighty/hono";
import { mighty } from "@gomighty/hono";

const app = new Hono();
// Chain .use(mighty()) for type safety
const app = new Hono().use(mighty());

app.get("/", async (c) => {
const posts = await db.getPosts();
return render(c, "posts.index", { posts });
return c.render({ component: "posts.index", props: { posts } });
});

startServer(app);
```

This will render the following Astro component and pass it the `posts` prop:
Expand Down Expand Up @@ -154,26 +150,24 @@ const { posts } = Astro.props;

You might want to pass properties to every Astro component, such as the current user or notification content.

To do this, use the `share` function in your Hono code:
To do this, use `c.var.share()` in your Hono code:

```ts
import { Hono } from "hono";
import { db } from "./lib/db";
import { startServer, render, share } from "@gomighty/hono";
import { mighty } from "@gomighty/hono";

const app = new Hono();
// Chain .use(mighty()) for type safety
const app = new Hono().use(mighty());

app.get("/", async (c) => {
const posts = await db.getPosts();
return render(c, "posts.index", { posts });
app.use(async (c, next) => {
c.var.share({ user: await db.getUser() });
await next();
});

startServer(app);

share(app, async (c) => {
return {
user: db.getUser(),
};
app.get("/", async (c) => {
const posts = await db.getPosts();
return c.render({ component: "posts.index", props: { posts } });
});
```

Expand Down
40 changes: 12 additions & 28 deletions src/content/docs/guides/backend-adapters/write-your-own-adapter.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -72,12 +72,7 @@ All helper functions accept an object with the following options:

```ts
export type MightyServerOptions = {
config?: AstroUserConfig;
hooks?: {
"mighty:server:start"?: (options: {
address: AddressInfo;
}) => void | Promise<void>;
};
config?: AstroInlineConfig;
};
```

Expand All @@ -96,40 +91,29 @@ If there is a configuration value conflict, Mighty's configuration overrides the

</Aside>

### `hooks` option

A series of events to hook into the Mighty pipeline.

Use the `mighty:server:start` hook to get the Mighty server's address.

This is useful when you want to send the server's host and port to your backend.

## Render Astro components from your backend code

We assume your backend has knowledge about Mighty's server host and port (e.g. `http://localhost:4321`).

You can now call the server on the `/render` endpoint to render Astro components:
The `dev()` and `start()` functions return a `render` function that you can use to render Astro components programmatically:

```ts
const res = await fetch("http://localhost:4321", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
component: "posts.index",
props: { id: 1 },
context: { backendVersion: "v1.2.0" },
}),
});
const astroComponentBody = await res.text();
// Development
const { render, viteMiddleware, stop } = await dev({ config: { root: "./astro" } });
const result = await render({ component: "posts.index", props: { id: 1 }, context: {}, address: "..." });

// Production
const { render } = await start({ config: { root: "./astro" } });
const result = await render({ component: "posts.index", props: { id: 1 }, context: {} });
```

The `/render` endpoint accepts a JSON body with the following options:
The `render` function accepts a `MightyRenderRequest` object:

```ts
export type MightyRenderRequest = {
component: string;
props?: Record<string, unknown>;
context?: Record<string, unknown>;
/** @default true */
partial?: boolean;
};
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,4 @@ In addition, backend adapters may perform additional tasks for better integratio
To run the production server, refer to the instructions your backend adapter provides:

- [Laravel](/guides/backend-adapters/laravel#start-the-production-server)
- [Hono](/guides/backend-adapters/hono#build-production-assets)