Skip to content

Commit

Permalink
feat: @hono/vite-cloudflare-pages
Browse files Browse the repository at this point in the history
  • Loading branch information
yusukebe committed Oct 24, 2023
1 parent fa2f7b8 commit a43bbd8
Show file tree
Hide file tree
Showing 10 changed files with 310 additions and 4 deletions.
125 changes: 125 additions & 0 deletions packages/cloudflare-pages/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
# @hono/vite-cloudflare-pages

`@hono/vite-cloudflare-pages` is Vite plugin to build your Hono application for Cloudflare Pages.

## Usage

### Installation

You can install `vite` and `@hono/vite-cloudflare-pages` via npm.

```plain
npm i -D vite @hono/cloudflare-pages
```

Or you can install them with Bun.

```plain
bun add vite @hono/cloudflare-pages
```

### Settings

Add `"type": "module"` to your `package.json`. Then, create `vite.config.ts` and edit it.

```ts
import { defineConfig } from 'vite'
import pages from '@hono/vite-cloudflare-pages'

export default defineConfig({
plugins: [pages()],
})
```

### Build

Just run `vite build`.

```text
npm exec vite build
```

Or

```text
bunx --bun vite build
```

### Deploy to Cloudflare Pages

Run the `wrangler` command.

```text
wrangler pages deploy ./dist
```

## Options

The options are below.

```ts
type CloudflarePagesOptions = {
entry?: string
outputDir?: string
external?: string[]
minify?: boolean
emptyOutDir?: boolean
}
```
Default values:
```ts
export const defaultOptions = {
entry: defaultEntry, // node_modules/@hono/vite-cloudflare-pages/dist/entry/_worker.js
outputDir: './dist',
external: ['react', 'react-dom'],
minify: true,
emptyOutDir: true,
}
```

## Build a client

If you also want to build a client-side script, you can configure it as follows.

```ts
export default defineConfig(({ mode }) => {
if (mode === 'client') {
return {
build: {
lib: {
entry: './src/client.ts',
formats: ['es'],
fileName: 'client',
name: 'client',
},
rollupOptions: {
output: {
dir: './dist/static',
},
},
copyPublicDir: false,
},
}
} else {
return {
plugins: [pages()],
}
}
})
```

The build command:

```text
vite build && vite build --mode client
```

## Authors

- Yusuke Wada <https://github.com/yusukebe>

## License

MIT
57 changes: 57 additions & 0 deletions packages/cloudflare-pages/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
{
"name": "@hono/vite-cloudflare-pages",
"description": "Vite plugin to build your Hono app for Cloudflare Pages",
"version": "0.0.0",
"types": "dist/index.d.ts",
"module": "dist/index.js",
"type": "module",
"scripts": {
"build:entry": "tsup --no-config --format esm --external /src/index -d dist/entry ./src/entry/_worker.js",
"build": "rimraf dist && tsup && yarn build:entry && publint",
"watch": "tsup --watch",
"prepublishOnly": "yarn build",
"release": "bumpp --tag \"@hono/cloudflare-pages@v%s\" --commit \"chore(cloudflare-pages): release v%s\" && yarn publish"
},
"files": [
"dist"
],
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js"
}
},
"typesVersions": {
"*": {
"types": [
"./dist/types"
]
}
},
"author": "Yusuke Wada <[email protected]> (https://github.com/yusukebe)",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/honojs/vite-plugins.git"
},
"publishConfig": {
"registry": "https://registry.npmjs.org",
"access": "public"
},
"homepage": "https://github.com/honojs/vite-plugins",
"devDependencies": {
"bumpp": "^9.2.0",
"glob": "^10.3.10",
"hono": "^3.8.3",
"publint": "^0.1.12",
"rimraf": "^5.0.1",
"tsup": "^7.2.0",
"vite": "^4.4.9"
},
"peerDependencies": {
"hono": "*"
},
"engines": {
"node": ">=18.14.1"
}
}
52 changes: 52 additions & 0 deletions packages/cloudflare-pages/src/cloudflare-pages.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { builtinModules } from 'module'
import path from 'node:path'
import { fileURLToPath } from 'url'
import type { Plugin, UserConfig } from 'vite'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

const defaultEntry = path.join(__dirname, 'entry', '_worker.js')

type CloudflarePagesOptions = {
entry?: string
outputDir?: string
external?: string[]
minify?: boolean
emptyOutDir?: boolean
}

export const defaultOptions = {
entry: defaultEntry, // node_modules/@hono/vite-cloudflare-pages/dist/entry/_worker.js
outputDir: './dist',
external: ['react', 'react-dom'],
minify: true,
emptyOutDir: true,
}

export const cloudflarePagesPlugin = (options?: CloudflarePagesOptions): Plugin => {
const entry = options?.entry ?? defaultOptions.entry
return {
name: '@hono/vite-cloudflare-pages',
config: async (): Promise<UserConfig> => {
return {
ssr: {
external: options?.external ?? defaultOptions.external,
noExternal: true,
},
build: {
emptyOutDir: options?.emptyOutDir ?? defaultOptions.emptyOutDir,
ssr: entry,
minify: options?.minify ?? defaultOptions.minify,
rollupOptions: {
external: [...builtinModules, /^node:/],
input: entry,
output: {
dir: options?.outputDir ?? defaultOptions.outputDir,
},
},
},
}
},
}
}
11 changes: 11 additions & 0 deletions packages/cloudflare-pages/src/entry/_worker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { Hono } from 'hono'
import { serveStatic } from 'hono/cloudflare-pages'
import app from '/src/index'

const worker = new Hono()
worker.get('/favicon.ico', serveStatic())
worker.get('/static/*', serveStatic())

worker.route('/', app)

export default worker
2 changes: 2 additions & 0 deletions packages/cloudflare-pages/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import { cloudflarePagesPlugin } from './cloudflare-pages'
export default cloudflarePagesPlugin
12 changes: 12 additions & 0 deletions packages/cloudflare-pages/tsconfig.build.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"rootDir": "./src/"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"src/**/*.test.ts"
]
}
14 changes: 14 additions & 0 deletions packages/cloudflare-pages/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"extends": "../../tsconfig.base.json",
"include": [
"src",
"test"
],
"compilerOptions": {
"module": "ES2022",
"target": "ES2022",
"types": [
"vite/client"
]
},
}
17 changes: 17 additions & 0 deletions packages/cloudflare-pages/tsup.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { glob } from 'glob'
import { defineConfig } from 'tsup'

const entryPoints = glob.sync('./src/**/*.+(ts|tsx|json)', {
ignore: ['./src/**/*.test.+(ts|tsx)'],
})

export default defineConfig({
entry: entryPoints,
dts: true,
tsconfig: './tsconfig.build.json',
splitting: false,
minify: false,
format: ['esm'],
bundle: false,
platform: 'node',
})
4 changes: 2 additions & 2 deletions packages/dev-server/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"build": "rimraf dist && tsup && publint",
"watch": "tsup --watch",
"prepublishOnly": "yarn build && yarn test",
"release": "bumpp --tag \"@hono/vite-dev-server@v%s\" --commit \"chore(dev-server): release v%s\" && pnpm publish"
"release": "bumpp --tag \"@hono/vite-dev-server@v%s\" --commit \"chore(dev-server): release v%s\" && yarn publish"
},
"files": [
"dist"
Expand Down Expand Up @@ -57,4 +57,4 @@
"@hono/node-server": "^1.2.0",
"miniflare": "^3.20231016.0"
}
}
}
20 changes: 18 additions & 2 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,22 @@ __metadata:
languageName: node
linkType: hard

"@hono/vite-cloudflare-pages@workspace:packages/cloudflare-pages":
version: 0.0.0-use.local
resolution: "@hono/vite-cloudflare-pages@workspace:packages/cloudflare-pages"
dependencies:
bumpp: ^9.2.0
glob: ^10.3.10
hono: ^3.8.3
publint: ^0.1.12
rimraf: ^5.0.1
tsup: ^7.2.0
vite: ^4.4.9
peerDependencies:
hono: "*"
languageName: unknown
linkType: soft

"@hono/vite-dev-server@workspace:packages/dev-server":
version: 0.0.0-use.local
resolution: "@hono/vite-dev-server@workspace:packages/dev-server"
Expand Down Expand Up @@ -2158,7 +2174,7 @@ __metadata:
languageName: node
linkType: hard

"glob@npm:^10.2.2, glob@npm:^10.3.4, glob@npm:^10.3.7":
"glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.4, glob@npm:^10.3.7":
version: 10.3.10
resolution: "glob@npm:10.3.10"
dependencies:
Expand Down Expand Up @@ -2333,7 +2349,7 @@ __metadata:
languageName: unknown
linkType: soft

"hono@npm:^3.5.8":
"hono@npm:^3.5.8, hono@npm:^3.8.3":
version: 3.8.3
resolution: "hono@npm:3.8.3"
checksum: cd1c70527f016b8e40216337386aa5871483c1cc8e55297e41d7cea974659d688dea0752779f77f1af2b4ae1184955cecb2851504e3d84cd869896f34423ee0e
Expand Down

0 comments on commit a43bbd8

Please sign in to comment.