From 7729a2791fde1b18a02ffe667750c80578465b24 Mon Sep 17 00:00:00 2001 From: daishi Date: Fri, 15 Dec 2023 00:31:19 +0900 Subject: [PATCH 1/7] add hacky output cloudflare --- packages/waku/src/cli.ts | 26 +++++++-- packages/waku/src/lib/builder/build.ts | 6 +++ .../waku/src/lib/builder/output-cloudflare.ts | 54 +++++++++++++++++++ 3 files changed, 81 insertions(+), 5 deletions(-) create mode 100644 packages/waku/src/lib/builder/output-cloudflare.ts diff --git a/packages/waku/src/cli.ts b/packages/waku/src/cli.ts index e4c30931a..dbf142fdd 100755 --- a/packages/waku/src/cli.ts +++ b/packages/waku/src/cli.ts @@ -22,6 +22,12 @@ const { values, positionals } = parseArgs({ 'with-ssr': { type: 'boolean', }, + 'with-vercel': { + type: 'boolean', + }, + 'with-cloudflare': { + type: 'boolean', + }, version: { type: 'boolean', short: 'v', @@ -46,7 +52,11 @@ if (values.version) { runDev({ ssr: !!values['with-ssr'] }); break; case 'build': - runBuild({ ssr: !!values['with-ssr'] }); + runBuild({ + ssr: !!values['with-ssr'], + vercel: !!values['with-vercel'], + cloudflare: !!values['with-cloudflare'], + }); break; case 'start': runStart({ ssr: !!values['with-ssr'] }); @@ -62,13 +72,17 @@ if (values.version) { async function runDev(options: { ssr: boolean }) { const app = new Hono(); - app.use('*', honoDevMiddleware({ ssr: options.ssr })); + app.use('*', honoDevMiddleware(options)); const port = parseInt(process.env.PORT || '3000', 10); startServer(app, port); } -async function runBuild(options: { ssr: boolean }) { - await build({ ssr: options.ssr }); +async function runBuild(options: { + ssr: boolean; + vercel: boolean; + cloudflare: boolean; +}) { + await build(options); } async function runStart(options: { ssr: boolean }) { @@ -77,7 +91,7 @@ async function runStart(options: { ssr: boolean }) { url.pathToFileURL(path.resolve(distDir, entriesJs)).toString() ); const app = new Hono(); - app.use('*', honoPrdMiddleware({ entries, ssr: options.ssr })); + app.use('*', honoPrdMiddleware({ entries, ...options })); app.use('*', serveStatic({ root: path.join(distDir, publicDir) })); const port = parseInt(process.env.PORT || '8080', 10); startServer(app, port); @@ -108,6 +122,8 @@ Commands: Options: --with-ssr Use opt-in SSR + --with-vercel Output for Vercel on build + --with-cloudflare Output for Cloudflare on build -v, --version Display the version number -h, --help Display this help message `); diff --git a/packages/waku/src/lib/builder/build.ts b/packages/waku/src/lib/builder/build.ts index 1bcf14005..864ce109e 100644 --- a/packages/waku/src/lib/builder/build.ts +++ b/packages/waku/src/lib/builder/build.ts @@ -44,6 +44,7 @@ import { nonjsResolvePlugin } from '../plugins/vite-plugin-nonjs-resolve.js'; import { rscTransformPlugin } from '../plugins/vite-plugin-rsc-transform.js'; import { patchReactRefresh } from '../plugins/patch-react-refresh.js'; import { emitVercelOutput } from './output-vercel.js'; +import { emitCloudflareOutput } from './output-cloudflare.js'; // TODO this file and functions in it are too long. will fix. @@ -482,6 +483,7 @@ export async function build(options: { config?: Config; ssr?: boolean; vercel?: boolean; + clouflare?: boolean; }) { const config = await resolveConfig(options.config || {}); const rootDir = ( @@ -536,4 +538,8 @@ export async function build(options: { !!options?.ssr, ); } + + if (options?.clouflare) { + await emitCloudflareOutput(rootDir, config, !!options?.ssr); + } } diff --git a/packages/waku/src/lib/builder/output-cloudflare.ts b/packages/waku/src/lib/builder/output-cloudflare.ts new file mode 100644 index 000000000..289081e37 --- /dev/null +++ b/packages/waku/src/lib/builder/output-cloudflare.ts @@ -0,0 +1,54 @@ +import path from 'node:path'; +import { existsSync, writeFileSync } from 'node:fs'; + +import type { ResolvedConfig } from '../config.js'; + +// XXX this can be very limited. FIXME if anyone has better knowledge. +export const emitCloudflareOutput = async ( + rootDir: string, + config: ResolvedConfig, + ssr: boolean, +) => { + const outputDir = path.resolve('.'); + const relativeRootDir = path.relative(outputDir, rootDir); + const entriesFile = path.join( + relativeRootDir, + config.distDir, + config.entriesJs, + ); + const publicDir = path.join( + relativeRootDir, + config.distDir, + config.publicDir, + ); + if (!existsSync(path.join(outputDir, 'serve.js'))) { + writeFileSync( + path.join(outputDir, 'serve.js'), + ` +import { honoMiddleware } from 'waku'; +import { Hono } from 'hono'; +import { serveStatic } from 'hono/cloudflare-workers'; + +const entries = import('${entriesFile}'); + +const app = new Hono(); +app.use('*', honoMiddleware({ entries, ssr: ${ssr} })); +app.use('*', serveStatic({ root: './' })); +export default app; +`, + ); + } + if (!existsSync(path.join(outputDir, 'wrangler.toml'))) { + writeFileSync( + path.join(outputDir, 'wrangler.toml'), + ` +name = "waku-project" +main = "src/index.js" +compatibility_date = "2023-12-06" + +[site] +bucket = "${publicDir}" +`, + ); + } +}; From a83ac0fe4e188a5e7187fc3562c9b0e13edea0ea Mon Sep 17 00:00:00 2001 From: daishi Date: Fri, 15 Dec 2023 00:47:59 +0900 Subject: [PATCH 2/7] wip: readme --- README.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/README.md b/README.md index 0472cc463..1229c8f5b 100644 --- a/README.md +++ b/README.md @@ -290,6 +290,22 @@ Alternatively, you could create a project with something like `npm create waku@latest` and copy files from the example folder in the repository. +## Deploy + +### Vercel + +TODO + +![vercel](https://github.com/dai-shi/waku/assets/490574/6bd317a8-2772-42f4-92d4-b508af7d7460) + +### Cloudflare + +```sh +npm run build --with-cloudflare +npx wrangler dev +npx wrangler deploy +``` + ## Tweets From 217132540f1c43878b07f92d79884682fa202e7c Mon Sep 17 00:00:00 2001 From: daishi Date: Fri, 15 Dec 2023 00:54:54 +0900 Subject: [PATCH 3/7] fix for undefined --- packages/waku/src/cli.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/waku/src/cli.ts b/packages/waku/src/cli.ts index dbf142fdd..3d0c76306 100755 --- a/packages/waku/src/cli.ts +++ b/packages/waku/src/cli.ts @@ -54,7 +54,7 @@ if (values.version) { case 'build': runBuild({ ssr: !!values['with-ssr'], - vercel: !!values['with-vercel'], + vercel: values['with-vercel'], cloudflare: !!values['with-cloudflare'], }); break; @@ -79,10 +79,14 @@ async function runDev(options: { ssr: boolean }) { async function runBuild(options: { ssr: boolean; - vercel: boolean; + vercel: boolean | undefined; cloudflare: boolean; }) { - await build(options); + const { vercel, ...rest } = options; + await build({ + ...rest, + ...(typeof vercel === 'boolean' && { vercel }), + }); } async function runStart(options: { ssr: boolean }) { From 3c47793d7cb47909b25a2293ddde3e12946246db Mon Sep 17 00:00:00 2001 From: daishi Date: Fri, 15 Dec 2023 01:10:22 +0900 Subject: [PATCH 4/7] fix typo --- README.md | 2 +- packages/waku/src/cli.ts | 6 +----- packages/waku/src/lib/builder/build.ts | 6 +++--- packages/waku/src/lib/builder/output-cloudflare.ts | 12 ++++++------ 4 files changed, 11 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 1229c8f5b..9c44c8bcf 100644 --- a/README.md +++ b/README.md @@ -301,7 +301,7 @@ TODO ### Cloudflare ```sh -npm run build --with-cloudflare +npm run build -- --with-cloudflare npx wrangler dev npx wrangler deploy ``` diff --git a/packages/waku/src/cli.ts b/packages/waku/src/cli.ts index 3d0c76306..cd3f356f5 100755 --- a/packages/waku/src/cli.ts +++ b/packages/waku/src/cli.ts @@ -82,11 +82,7 @@ async function runBuild(options: { vercel: boolean | undefined; cloudflare: boolean; }) { - const { vercel, ...rest } = options; - await build({ - ...rest, - ...(typeof vercel === 'boolean' && { vercel }), - }); + await build(options); } async function runStart(options: { ssr: boolean }) { diff --git a/packages/waku/src/lib/builder/build.ts b/packages/waku/src/lib/builder/build.ts index 864ce109e..cbabfc831 100644 --- a/packages/waku/src/lib/builder/build.ts +++ b/packages/waku/src/lib/builder/build.ts @@ -482,8 +482,8 @@ const resolveFileName = (fname: string) => { export async function build(options: { config?: Config; ssr?: boolean; - vercel?: boolean; - clouflare?: boolean; + vercel?: boolean | undefined; + cloudflare?: boolean; }) { const config = await resolveConfig(options.config || {}); const rootDir = ( @@ -539,7 +539,7 @@ export async function build(options: { ); } - if (options?.clouflare) { + if (options?.cloudflare) { await emitCloudflareOutput(rootDir, config, !!options?.ssr); } } diff --git a/packages/waku/src/lib/builder/output-cloudflare.ts b/packages/waku/src/lib/builder/output-cloudflare.ts index 289081e37..2870f0087 100644 --- a/packages/waku/src/lib/builder/output-cloudflare.ts +++ b/packages/waku/src/lib/builder/output-cloudflare.ts @@ -30,11 +30,11 @@ import { Hono } from 'hono'; import { serveStatic } from 'hono/cloudflare-workers'; const entries = import('${entriesFile}'); - + const app = new Hono(); app.use('*', honoMiddleware({ entries, ssr: ${ssr} })); app.use('*', serveStatic({ root: './' })); -export default app; +export default app; `, ); } @@ -42,11 +42,11 @@ export default app; writeFileSync( path.join(outputDir, 'wrangler.toml'), ` -name = "waku-project" -main = "src/index.js" -compatibility_date = "2023-12-06" +name = "waku-project" +main = "serve.js" +compatibility_date = "2023-12-06" -[site] +[site] bucket = "${publicDir}" `, ); From 5c2595d999489bd4124a5a5a48481edded26c1cc Mon Sep 17 00:00:00 2001 From: daishi Date: Fri, 15 Dec 2023 01:30:32 +0900 Subject: [PATCH 5/7] oh this is hard.. --- packages/waku/src/lib/builder/output-cloudflare.ts | 4 ++-- packages/waku/src/lib/rsc/worker-api.ts | 9 ++++++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/waku/src/lib/builder/output-cloudflare.ts b/packages/waku/src/lib/builder/output-cloudflare.ts index 2870f0087..8d361bbf2 100644 --- a/packages/waku/src/lib/builder/output-cloudflare.ts +++ b/packages/waku/src/lib/builder/output-cloudflare.ts @@ -29,7 +29,7 @@ import { honoMiddleware } from 'waku'; import { Hono } from 'hono'; import { serveStatic } from 'hono/cloudflare-workers'; -const entries = import('${entriesFile}'); +const entries = import('./${entriesFile}'); const app = new Hono(); app.use('*', honoMiddleware({ entries, ssr: ${ssr} })); @@ -47,7 +47,7 @@ main = "serve.js" compatibility_date = "2023-12-06" [site] -bucket = "${publicDir}" +bucket = "./${publicDir}" `, ); } diff --git a/packages/waku/src/lib/rsc/worker-api.ts b/packages/waku/src/lib/rsc/worker-api.ts index 3c23366c2..96bcad48e 100644 --- a/packages/waku/src/lib/rsc/worker-api.ts +++ b/packages/waku/src/lib/rsc/worker-api.ts @@ -46,7 +46,14 @@ const getWorker = () => { return lastWorker; } return (lastWorker = new Promise((resolve, reject) => { - Promise.all([import('node:worker_threads'), import('node:module')]) + Promise.all([ + import('node:worker_threads').catch((e) => { + throw e; + }), + import('node:module').catch((e) => { + throw e; + }), + ]) .then(([{ Worker }, { default: module }]) => { const HAS_MODULE_REGISTER = typeof module.register === 'function'; const worker = new Worker(new URL('worker-impl.js', import.meta.url), { From 2f3b187814b43e5c9b787d343921c06565bfde70 Mon Sep 17 00:00:00 2001 From: daishi Date: Fri, 15 Dec 2023 01:46:05 +0900 Subject: [PATCH 6/7] fix readme --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9c44c8bcf..e0a6c6fea 100644 --- a/README.md +++ b/README.md @@ -302,8 +302,9 @@ TODO ```sh npm run build -- --with-cloudflare -npx wrangler dev -npx wrangler deploy +rm -r node_modules +npm install --omit=dev --omit=peer +npx wrangler dev # or deploy ``` ## Tweets From ad262109489c08e2ffb966fb8cc94b1aa0ce0ce5 Mon Sep 17 00:00:00 2001 From: daishi Date: Fri, 15 Dec 2023 08:20:26 +0900 Subject: [PATCH 7/7] update README --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7d04fa5a1..7254e1696 100644 --- a/README.md +++ b/README.md @@ -296,7 +296,11 @@ folder in the repository. ### Vercel -TODO +```sh +vercel +``` + +Then change the setting as follows (needs redeploy for the first time): ![vercel](https://github.com/dai-shi/waku/assets/490574/6bd317a8-2772-42f4-92d4-b508af7d7460)