Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: @hono/vite-cloudflare-pages #15

Merged
merged 2 commits into from
Oct 24, 2023
Merged
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
126 changes: 126 additions & 0 deletions packages/cloudflare-pages/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
# @hono/vite-cloudflare-pages

`@hono/vite-cloudflare-pages` is a 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/vite-cloudflare-pages
```

Or you can install them with Bun.

```plain
bun add vite @hono/vite-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',
},
},
emptyOutDir: false,
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