Update wrangler, restructure cloudflare app dist directory

unstubbable · Sep 26, 2024 · 061ad3d · 061ad3d
1 parent 6f0a725
commit 061ad3d
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 85 deletions.
diff --git a/apps/cloudflare-app/package.json b/apps/cloudflare-app/package.json
@@ -47,7 +47,7 @@
     "webpack": "^5.77.0",
     "webpack-cli": "^5.0.1",
     "webpack-manifest-plugin": "^5.0.0",
-    "wrangler": "^3.32.0"
+    "wrangler": "3.33.0"
   },
   "wallaby": {
     "env": {

diff --git a/apps/cloudflare-app/src/worker/manifests.js b/apps/cloudflare-app/src/worker/manifests.js
@@ -6,7 +6,7 @@
 // been created, at which point webpack has already emitted the server bundle.
 
 export const reactServerManifest = require(/* webpackIgnore: true */ `./react-server-manifest.json`);
-export const reactClientManifest = require(/* webpackIgnore: true */ `./client/react-client-manifest.json`);
-export const reactSsrManifest = require(/* webpackIgnore: true */ `./client/react-ssr-manifest.json`);
-export const cssManifest = require(/* webpackIgnore: true */ `./client/css-manifest.json`);
-export const jsManifest = require(/* webpackIgnore: true */ `./client/js-manifest.json`);
+export const reactClientManifest = require(/* webpackIgnore: true */ `./react-client-manifest.json`);
+export const reactSsrManifest = require(/* webpackIgnore: true */ `./react-ssr-manifest.json`);
+export const cssManifest = require(/* webpackIgnore: true */ `./css-manifest.json`);
+export const jsManifest = require(/* webpackIgnore: true */ `./js-manifest.json`);
diff --git a/apps/cloudflare-app/src/worker/wrangler.toml b/apps/cloudflare-app/src/worker/wrangler.toml
@@ -1,5 +1,5 @@
 name = "mfng"
-main = "../../dist/worker.js"
+main = "../../dist/worker/index.js"
 compatibility_date = "2024-03-04"
 compatibility_flags = ["nodejs_als"]
 
@@ -13,7 +13,5 @@ command = ""
 watch_dir = []
 
 [assets]
-bucket = "../../dist"
-include = ["client"]
-exclude = []
+bucket = "../../dist/static"
 serve_single_page_app = true
diff --git a/apps/cloudflare-app/webpack.config.js b/apps/cloudflare-app/webpack.config.js
@@ -1,5 +1,6 @@
 import {createRequire} from 'module';
 import path from 'path';
+import url from 'url';
 import {
   WebpackRscClientPlugin,
   WebpackRscServerPlugin,
@@ -13,8 +14,30 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import ResolveTypeScriptPlugin from 'resolve-typescript-plugin';
 import {WebpackManifestPlugin} from 'webpack-manifest-plugin';
 
+const currentDirname = path.dirname(url.fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
 
+const outputDirname = path.join(currentDirname, `dist`);
+const outputWorkerDirname = path.join(outputDirname, `worker`);
+
+const reactServerManifestFilename = path.join(
+  outputWorkerDirname,
+  `react-server-manifest.json`,
+);
+
+const reactClientManifestFilename = path.join(
+  outputWorkerDirname,
+  `react-client-manifest.json`,
+);
+
+const reactSsrManifestFilename = path.join(
+  outputWorkerDirname,
+  `react-ssr-manifest.json`,
+);
+
+const jsManifestFilename = path.join(outputWorkerDirname, `js-manifest.json`);
+
+const cssManifestFilename = path.join(outputWorkerDirname, `css-manifest.json`);
 /**
  * @param {unknown} _env
  * @param {{readonly mode?: import('webpack').Configuration['mode']}} argv
@@ -101,8 +124,8 @@ export default function createConfigs(_env, argv) {
     entry: `./src/worker/index.tsx`,
     target: `webworker`,
     output: {
-      filename: `worker.js`,
-      path: path.join(process.cwd(), `dist`),
+      filename: `index.js`,
+      path: outputWorkerDirname,
       libraryTarget: `module`,
       chunkFormat: `module`,
       devtoolModuleFilenameTemplate: (
@@ -152,7 +175,14 @@ export default function createConfigs(_env, argv) {
     },
     plugins: [
       new MiniCssExtractPlugin({filename: `server-main.css`, runtime: false}),
-      new WebpackRscServerPlugin({clientReferencesMap, serverReferencesMap}),
+      new WebpackRscServerPlugin({
+        clientReferencesMap,
+        serverReferencesMap,
+        serverManifestFilename: path.relative(
+          outputWorkerDirname,
+          reactServerManifestFilename,
+        ),
+      }),
     ],
     experiments: {outputModule: true, layers: true},
     performance: {maxAssetSize: 1_000_000, maxEntrypointSize: 1_000_000},
@@ -162,6 +192,9 @@ export default function createConfigs(_env, argv) {
     stats,
   };
 
+  const staticDirname = path.join(currentDirname, `dist/static`);
+  const clientOutputDirname = path.join(staticDirname, `client`);
+
   /**
    * @type {import('webpack').Configuration}
    */
@@ -171,7 +204,7 @@ export default function createConfigs(_env, argv) {
     entry: `./src/client.tsx`,
     output: {
       filename: dev ? `main.js` : `main.[contenthash:8].js`,
-      path: path.join(process.cwd(), `dist/client`),
+      path: clientOutputDirname,
       clean: !dev,
       publicPath: `/client/`,
     },
@@ -206,16 +239,26 @@ export default function createConfigs(_env, argv) {
         runtime: false,
       }),
       new WebpackManifestPlugin({
-        fileName: `css-manifest.json`,
+        fileName: cssManifestFilename,
         publicPath: `/client/`,
         filter: (file) => file.path.endsWith(`.css`),
       }),
       new WebpackManifestPlugin({
-        fileName: `js-manifest.json`,
+        fileName: jsManifestFilename,
         publicPath: `/client/`,
         filter: (file) => file.path.endsWith(`.js`),
       }),
-      new WebpackRscClientPlugin({clientReferencesMap}),
+      new WebpackRscClientPlugin({
+        clientReferencesMap,
+        clientManifestFilename: path.relative(
+          clientOutputDirname,
+          reactClientManifestFilename,
+        ),
+        ssrManifestFilename: path.relative(
+          clientOutputDirname,
+          reactSsrManifestFilename,
+        ),
+      }),
     ],
     devtool: `source-map`,
     mode,