npm package: @fastly/hono-compute-js-static-publish
Description: Serve files from Fastly Compute Static Publisher on Hono
Author: Katsuyuki Omuro
Latest version: 0.5.4

# Compute Static Publisher for Hono

> NOTE: `@fastly/hono-compute-js-static-publish` is provided as a Fastly Labs product. Visit the [Fastly Labs](https://www.fastlylabs.com/) site for terms of use.

`@fastly/hono-compute-js-static-publish` is a utility for [Hono](https://hono.dev) to allow your program to serve static files under [Fastly Compute](https://www.fastly.com/products/edge-compute). It leverages the `PublisherServer` from [`@fastly/compute-js-static-publish`](https://www.npmjs.com/package/@fastly/compute-js-static-publish).

Works with:
* Hono v4.x
* [@fastly/compute-js-static-publish](https://www.npmjs.com/package/@fastly/compute-js-static-publish) v6.x and v7.x

## Example

### compute-js-static-publish v7

```typescript
import { Hono } from 'hono/quick'
import { fire } from 'hono/service-worker'

import { fromStaticPublishRc } from '@fastly/hono-compute-js-static-publish'
import rc from '../static-publish.rc.js'
const serveStatic = fromStaticPublishRc(rc)

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

app.get('/favicon.ico', serveStatic({ path: './favicon.ico' }))
app.get('/static/*', serveStatic({ root: './' }))

fire(app)
```

### compute-js-static-publish v6

```typescript
import { Hono } from 'hono/quick'
import { fire } from 'hono/service-worker'

import { fromPublisherServer } from '@fastly/hono-compute-js-static-publish'
import { getServer } from '../static-publisher/statics.js'
const serveStatic = fromPublisherServer(getServer())

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

app.get('/favicon.ico', serveStatic({ path: './favicon.ico' }))
app.get('/static/*', serveStatic({ root: './' }))

fire(app)
```

## Usage

> [!NOTE]
> The instructions below are for @fastly/compute-js-static-publish v7.

Once you have [set up a Hono project for Fastly Compute](https://hono.dev/getting-started/fastly), add this library and the Static Publisher library to your application:

```
npm install @fastly/hono-compute-js-static-publish @fastly/compute-js-static-publish
```

These directions assume your static files exist directly under the `./assets` subdirectory of your Fastly Compute application.

You will need to add and modify some files at the root of your project.

* Add `static-publish.rc.js`
    ```javascript
    /** @type {import('@fastly/hono-compute-js-static-publish').StaticPublishRc} */
    const rc = {
        kvStoreName: "site-content",
        publishId: "default",
        defaultCollectionName: "live",
        staticPublisherWorkingDir: "./static-publisher",
    };
    
    export default rc;
    ```
    This sets up the Static Publisher to use a KV Store named `site-content` and to place generated temporary files in the `./static-publisher` subdirectory. The other fields are not used in `@fastly/hono-compute-js-static-publish` but are required fields.

    > [!TIP]
    > Add `./static-publisher/` to your `.gitignore` as these files will be regenerated on the build.

* Add `publish-content.config.js`
    ```javascript
    /** @type {import('@fastly/hono-compute-js-static-publish').PublishContentConfig} */
    const config = {
        rootDir: './assets'
    };
    
    export default config;
    ```

    This instructs the Static Publisher to find static files at `./assets`.

    > [!IMPORTANT]
    > As this application does not use `PublisherServer` to directly serve assets, the `server` field is not applicable.

* Modify `package.json`
    Add the following items under the `scripts` section:
    ```json
    {
      "scripts": {
        "dev:publish": "npx @fastly/compute-js-static-publish publish-content --local",
        "dev:start": "fastly compute serve",
        "fastly:deploy": "fastly compute publish",
        "fastly:publish": "npx @fastly/compute-js-static-publish publish-content"
      }
    }
    ```

* Modify `fastly.toml`
    Add the following lines to the end of the file:
    ```toml
    [local_server.kv_stores]
    site-content = { file = "./static-publisher/kvstore.json", format = "json" }

    [setup.kv_stores.site-content]
    ``` 

Finally, modify your application's `src/index.ts` file:
1. Import `fromStaticPublishRc` from this library
2. Import the default constant from `static-publish.rc.js` and pass it to `fromStaticPublishRc()` to instantiate the [Hono Middleware](https://hono.dev/guides/middleware). 

```typescript
import { Hono } from 'hono/quick'
import { fire } from 'hono/service-worker'

import { fromStaticPublishRc } from '@fastly/hono-compute-js-static-publish'
import rc from '../static-publish.rc.js'
const serveStatic = fromStaticPublishRc(rc)

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

app.get('/favicon.ico', serveStatic({ path: './favicon.ico' }))
app.get('/static/*', serveStatic({ root: './' }))

fire(app)
```

Include either `path` or `root` in the object passed to `serveStatic()`.
* `path` - serves the static file at the specified path under the asset directory.
    * e.g., a request for `/favicon.ico` serves `./assets/favicon.ico`.
* `root` - serves the file at the path under the asset directory relative to the specified directory.
    * e.g., a request for `/static/foo.html` serves `./assets/static/foo.html`.

### Run locally

```sh
npm run dev:publish          # 'publish' your files to the simulated local KV Store
npm run dev:start            # preview locally
```

Serves your app at `http://127.0.0.1:7676`, powered by a simulated KV Store.

### Deploy to Fastly Compute

[Create a free Fastly account](https://www.fastly.com/signup/?tier=free) if you haven't already, and then:

```sh
npm run fastly:deploy        # deploy the app
npm run fastly:publish       # upload your static files
```

Further changes involving only updates to your static files can be made by running:
```sh
npm run fastly:publish       # upload your static files
```

📘 For more on Compute-JS Static Publisher:  
[https://github.com/fastly/compute-js-static-publish](https://github.com/fastly/compute-js-static-publish)

## Issues

If you encounter any non-security-related bug or unexpected behavior, please [file an issue][bug] using the bug report template.

[bug]: https://github.com/fastly/hono-compute-js-static-publish/issues/new?labels=bug

### Security issues

Please see our [SECURITY.md](SECURITY.md) for guidance on reporting security-related issues.

## License

[MIT](./LICENSE).