Skip to content

Commit f48cd12

Browse files
authored
docs: update deployment instructions to include usage outside Cloudflare (#312)
1 parent 262e1e6 commit f48cd12

File tree

1 file changed

+90
-50
lines changed

1 file changed

+90
-50
lines changed

README.md

Lines changed: 90 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -873,52 +873,12 @@ export default defineConfig({
873873
})
874874
```
875875
876-
## Deployment
877-
878-
Since a HonoX instance is essentially a Hono instance, it can be deployed on any platform that Hono supports.
879-
880-
### Cloudflare Pages
881-
882-
Add the `wrangler.toml`:
883-
884-
```toml
885-
# wrangler.toml
886-
name = "my-project-name"
887-
compatibility_date = "2024-04-01"
888-
compatibility_flags = [ "nodejs_compat" ]
889-
pages_build_output_dir = "./dist"
890-
```
891-
892-
Setup the `vite.config.ts`:
893-
894-
```ts
895-
// vite.config.ts
896-
import { defineConfig } from 'vite'
897-
import honox from 'honox/vite'
898-
import build from '@hono/vite-build/cloudflare-pages'
899-
900-
export default defineConfig({
901-
plugins: [honox(), build()],
902-
})
903-
```
904-
905-
Build command (including a client):
906-
907-
```txt
908-
vite build --mode client && vite build
909-
```
910-
911-
Deploy with the following commands after the build. Ensure you have [Wrangler](https://developers.cloudflare.com/workers/wrangler/) installed:
912-
913-
```txt
914-
wrangler pages deploy
915-
```
916-
917876
### SSG - Static Site Generation
918877
919878
Using Hono's SSG feature, you can generate static HTML for each route.
920879
921880
```ts
881+
// vite.config.ts
922882
import { defineConfig } from 'vite'
923883
import honox from 'honox/vite'
924884
import ssg from '@hono/vite-ssg'
@@ -961,31 +921,111 @@ export default defineConfig(({ mode }) => {
961921
962922
Build command (including a client):
963923
964-
```txt
924+
```sh
965925
vite build --mode client && vite build
966926
```
967927
968-
You can also deploy it to Cloudflare Pages.
928+
## Deployment
969929
970-
```txt
971-
wrangler pages deploy ./dist
972-
```
930+
[`@hono/vite-build`]: https://www.npmjs.com/package/@hono/vite-build
973931
974-
### Others
932+
HonoX consists of a Hono instance and Vite configuration, so it can be deployed on any platform that Hono supports.
933+
[`@hono/vite-build`] provides build configurations for Cloudflare Workers, Node.js, Bun, and many other platforms.
934+
935+
### Cloudflare Workers
936+
937+
If you create a project using the `create-hono` command and select `x-basic`, the configuration for deploying to Cloudflare Workers is already included by default.
938+
939+
Add the `wrangler.jsonc`:
940+
941+
```jsonc
942+
// wrangler.jsonc
943+
{
944+
"$schema": "node_modules/wrangler/config-schema.json",
945+
"name": "my-project-name",
946+
"main": "./dist/index.js",
947+
"compatibility_date": "2024-04-01",
948+
"compatibility_flags": [
949+
"nodejs_compat"
950+
],
951+
"assets": {
952+
"directory": "./dist"
953+
}
954+
}
955+
```
975956
976-
Using `@hono/vite-build`, you can build the HonoX app for various platforms. For example, you can make it for the Bun:
957+
Setup the `vite.config.ts`:
977958
978959
```ts
979960
// vite.config.ts
961+
import build from '@hono/vite-build/cloudflare-workers'
962+
import adapter from '@hono/vite-dev-server/cloudflare'
963+
import tailwindcss from '@tailwindcss/vite'
964+
import honox from 'honox/vite'
980965
import { defineConfig } from 'vite'
966+
967+
export default defineConfig({
968+
plugins: [
969+
honox({
970+
devServer: { adapter },
971+
client: { input: ['./app/style.css'] }
972+
}),
973+
tailwindcss(),
974+
build()
975+
]
976+
})
977+
```
978+
979+
Build command (including a client):
980+
981+
```sh
982+
vite build --mode client && vite build
983+
```
984+
985+
Deploy with the following commands after the build. Ensure you have [Wrangler](https://developers.cloudflare.com/workers/wrangler/) installed:
986+
987+
```sh
988+
wrangler deploy
989+
```
990+
991+
### On-Premises or Other Platforms
992+
993+
You can build the HonoX app for on-premises environments or various other platforms. See the [`@hono/vite-build`] README for a full list of supported platforms. For example, you can make it for the Bun:
994+
995+
```ts
996+
// vite.config.ts
997+
import build from '@hono/vite-build/bun' // Change to Bun
998+
import adapter from '@hono/vite-dev-server/bun' // Change to Bun
999+
import tailwindcss from '@tailwindcss/vite'
9811000
import honox from 'honox/vite'
982-
import build from '@hono/vite-build/bun'
1001+
import { defineConfig } from 'vite'
9831002

9841003
export default defineConfig({
985-
plugins: [honox(), build()],
1004+
plugins: [
1005+
honox({
1006+
devServer: { adapter },
1007+
client: { input: ['./app/style.css'] }
1008+
}),
1009+
tailwindcss(),
1010+
build()
1011+
]
9861012
})
9871013
```
9881014
1015+
Build command (including a client):
1016+
1017+
```sh
1018+
vite build --mode client && vite build
1019+
```
1020+
1021+
Run the server with Bun:
1022+
1023+
```sh
1024+
cd ./dist && bun index.js
1025+
```
1026+
1027+
**Note**: When running on-premises, make sure to change the working directory to the output directory (e.g., `cd ./dist`). Otherwise, JavaScript, CSS, and static assets may not be resolved correctly.
1028+
9891029
## Examples
9901030
9911031
- https://github.com/yusukebe/honox-examples

0 commit comments

Comments
 (0)