Skip to content
This repository has been archived by the owner on Apr 25, 2024. It is now read-only.

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
bruceharrison1984 committed Apr 24, 2024
1 parent 41e3da7 commit 8bce423
Showing 1 changed file with 40 additions and 31 deletions.
71 changes: 40 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,23 +81,6 @@ export type AppType = typeof route;
export default app;
```

Add a `tsconfig.json` file to the `functions` directory to fix type issues:

```json
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Bundler",
"strict": true,
"lib": ["ESNext"],
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx",
"types": ["hono"]
}
}
```

Start development mode by running `vite`.

## Vite Plugin Configuration
Expand Down Expand Up @@ -135,24 +118,13 @@ const route = app.get('/hello', (c) => {

Any updates to the API will trigger a full refresh in the browser window, as well as print a console message in the browser.

You can also return HTML directly to facilitate HTMX applications:

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

const route = app.get('/page', (c) => {
return c.html(<div>My HTMX content!</div>);
});
```

_**Beware when importing types from backend `/functions` into your frontend application. Depending on how they are exported,
it could pull your entire Function bundle into your frontend code. Always double-check the final bundle to ensure you
haven't accidentally imported more than you wanted.**_

### Allowed/Excluded Api Paths

**Excluded api paths take precedence over allowed api paths**

The `allowedApiPaths` and `excludedApiPaths` plugin settings will determine which routes get routed to the frontend or
backend.

| Path | Result |
| -------------- | :---------------------------------: |
| `/some` | exact match |
Expand All @@ -166,6 +138,43 @@ not work correctly once deployed to Cloudflare.

[See Cloudflare \_routes.json documentation for more information.](https://developers.cloudflare.com/pages/functions/routing/#create-a-_routesjson-file)

### Hono HTML Endpoints

You can also return HTML directly to facilitate HTMX applications:

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

const route = app.get('/page', (c) => {
return c.html(<div>My HTMX content!</div>);
});
```

_**Beware when importing types from backend `/functions` into your frontend application. Depending on how they are exported,
it could pull your entire Function bundle into your frontend code. Always double-check the final bundle to ensure you
haven't accidentally imported more than you wanted.**_

#### Optional: Add Hono/jsx types to functions directory

Using Hono JSX can cause typing errors due to collisions with standard JSX types. Add a `tsconfig.json` file to the
`functions` directory to fix type issues that may occur. These settings may need to be altered to fit your specific
environment.

```json
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Bundler",
"strict": true,
"lib": ["ESNext"],
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx",
"types": ["hono"]
}
}
```

## Build & Deploy to Cloudflare

To produce a prodution bundle, **two build steps are required**. This is to ensure code separation between the static
Expand Down

0 comments on commit 8bce423

Please sign in to comment.