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.

Sign up for GitHub

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

Switch from Cloudflare Pages to Workers with Static Assets #989

Merged
merged 4 commits into from
Nov 7, 2024
Merged

Switch from Cloudflare Pages to Workers with Static Assets #989

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
56c7263
Switch from Cloudflare Pages to Workers with Static Assets
rmarscher Oct 18, 2024
812a6c5
Attempt fix cloudflare build for windows
rmarscher Nov 6, 2024
e96715b
Another attempt to fix cloudflare build for windows
rmarscher Nov 6, 2024
397756e
Function rename
rmarscher Nov 6, 2024
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1007,7 +1007,7 @@ Note: When rendering in static mode, please be sure to return `render: 'static'`

```
npm run build -- --with-cloudflare
npx wrangler pages dev # or deploy
npx wrangler dev # or deploy
```

### PartyKit (experimental)
Expand Down
195 changes: 95 additions & 100 deletions packages/waku/src/lib/plugins/vite-plugin-deploy-cloudflare.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,13 @@ import {
existsSync,
mkdirSync,
readdirSync,
renameSync,
rmSync,
writeFileSync,
copyFileSync,
} from 'node:fs';
import os from 'node:os';
import { randomBytes } from 'node:crypto';

import type { Plugin } from 'vite';

import { unstable_getPlatformObject } from '../../server.js';
Expand Down Expand Up @@ -62,24 +65,82 @@ export default {
};
`;

const getFiles = (dir: string, files: string[] = []): string[] => {
const entries = readdirSync(dir, { withFileTypes: true });
for (const entry of entries) {
const fullPath = path.join(dir, entry.name);
if (entry.isDirectory()) {
getFiles(fullPath, files);
} else {
files.push(fullPath);
function copyFiles(srcDir: string, destDir: string, extensions: string[]) {
const files = readdirSync(srcDir, { withFileTypes: true });
for (const file of files) {
const srcPath = path.join(srcDir, file.name);
const destPath = path.join(destDir, file.name);
if (file.isDirectory()) {
mkdirSync(destPath, { recursive: true });
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this recursive option work on node 18? it might have been with another function call but I think we saw that this got added in node 20 for something else, so it seems good to double check.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://nodejs.org/docs/latest-v18.x/api/fs.html#fsmkdirsyncpath-options

Seems OK with 18.

Copy link
Contributor Author

@rmarscher rmarscher Nov 6, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is readdir's recursive option that isn't consistent across node versions. I think mkdir recursive is more stable.

copyFiles(srcPath, destPath, extensions);
} else if (extensions.some((ext) => file.name.endsWith(ext))) {
copyFileSync(srcPath, destPath);
}
}
return files;
};
}

const WORKER_JS_NAME = '_worker.js';
const ROUTES_JSON_NAME = '_routes.json';
const HEADERS_NAME = '_headers';
function copyDirectory(srcDir: string, destDir: string) {
const files = readdirSync(srcDir, { withFileTypes: true });
for (const file of files) {
const srcPath = path.join(srcDir, file.name);
const destPath = path.join(destDir, file.name);
if (file.isDirectory()) {
mkdirSync(destPath, { recursive: true });
copyDirectory(srcPath, destPath);
} else {
copyFileSync(srcPath, destPath);
}
}
}

type StaticRoutes = { version: number; include: string[]; exclude: string[] };
function separatePublicAssetsFromFunctions({
outDir,
functionDir,
assetsDir,
}: {
outDir: string;
functionDir: string;
assetsDir: string;
}) {
const tempDist = path.join(
os.tmpdir(),
`dist_${randomBytes(16).toString('hex')}`,
);
const tempPublicDir = path.join(tempDist, DIST_PUBLIC);
const workerPublicDir = path.join(functionDir, DIST_PUBLIC);

// Create a temp dir to prepare the separated files
rmSync(tempDist, { recursive: true, force: true });
mkdirSync(tempDist, { recursive: true });

// Move the current dist dir to the temp dir
// Folders are copied instead of moved to avoid issues on Windows
copyDirectory(outDir, tempDist);
rmSync(outDir, { recursive: true, force: true });

// Create empty directories at the desired deploy locations
// for the function and the assets
mkdirSync(functionDir, { recursive: true });
mkdirSync(assetsDir, { recursive: true });

// Move tempDist/public to assetsDir
copyDirectory(tempPublicDir, assetsDir);
rmSync(tempPublicDir, { recursive: true, force: true });

// Move tempDist to functionDir
copyDirectory(tempDist, functionDir);
rmSync(tempDist, { recursive: true, force: true });

// Traverse assetsDir and copy specific files to functionDir/public
mkdirSync(workerPublicDir, { recursive: true });
copyFiles(assetsDir, workerPublicDir, [
'.txt',
'.html',
'.json',
'.js',
'.css',
]);
}

export function deployCloudflarePlugin(opts: {
srcDir: string;
Expand Down Expand Up @@ -136,93 +197,18 @@ export function deployCloudflarePlugin(opts: {
}

const outDir = path.join(rootDir, opts.distDir);

// Advanced-mode Cloudflare Pages imports _worker.js
// and can be configured with _routes.json to serve other static root files
mkdirSync(path.join(outDir, WORKER_JS_NAME));
const outPaths = readdirSync(outDir);
for (const p of outPaths) {
if (p === WORKER_JS_NAME) {
continue;
}
renameSync(path.join(outDir, p), path.join(outDir, WORKER_JS_NAME, p));
}

const workerEntrypoint = path.join(outDir, WORKER_JS_NAME, 'index.js');
if (!existsSync(workerEntrypoint)) {
writeFileSync(
workerEntrypoint,
`
import server from './${SERVE_JS}'

export default {
...server
}
`,
);
}

// Create _routes.json if one doesn't already exist in the public dir
// https://developers.cloudflare.com/pages/functions/routing/#functions-invocation-routes
const routesFile = path.join(outDir, ROUTES_JSON_NAME);
const publicDir = path.join(outDir, WORKER_JS_NAME, DIST_PUBLIC);
if (!existsSync(path.join(publicDir, ROUTES_JSON_NAME))) {
// exclude strategy
const staticPaths: string[] = ['/assets/*'];
const paths = getFiles(publicDir);
for (const p of paths) {
const basePath = path.dirname(p.replace(publicDir, '')) || '/';
const name = path.basename(p);
const entry =
name === 'index.html'
? basePath + (basePath !== '/' ? '/' : '')
: path.join(basePath, name.replace(/\.html$/, ''));
if (
entry.startsWith('/assets/') ||
entry.startsWith('/' + WORKER_JS_NAME + '/') ||
entry === '/' + WORKER_JS_NAME ||
entry === '/' + ROUTES_JSON_NAME ||
entry === '/' + HEADERS_NAME
) {
continue;
}
if (!staticPaths.includes(entry)) {
staticPaths.push(entry);
}
}
const MAX_CLOUDFLARE_RULES = 100;
if (staticPaths.length + 1 > MAX_CLOUDFLARE_RULES) {
throw new Error(
`The number of static paths exceeds the limit of ${MAX_CLOUDFLARE_RULES}. ` +
`You need to create a custom ${ROUTES_JSON_NAME} file in the public folder. ` +
`See https://developers.cloudflare.com/pages/functions/routing/#functions-invocation-routes`,
);
}
const staticRoutes: StaticRoutes = {
version: 1,
include: ['/*'],
exclude: staticPaths,
};
writeFileSync(routesFile, JSON.stringify(staticRoutes));
}

// Move the public files to the root of the dist folder
const publicPaths = readdirSync(
path.join(outDir, WORKER_JS_NAME, DIST_PUBLIC),
);
for (const p of publicPaths) {
renameSync(
path.join(outDir, WORKER_JS_NAME, DIST_PUBLIC, p),
path.join(outDir, p),
);
}
rmSync(path.join(outDir, WORKER_JS_NAME, DIST_PUBLIC), {
recursive: true,
force: true,
const assetsDistDir = path.join(outDir, 'assets');
const workerDistDir = path.join(outDir, 'worker');

// Move the public static assets to a separate folder from the server files
separatePublicAssetsFromFunctions({
outDir,
assetsDir: assetsDistDir,
functionDir: workerDistDir,
});

appendFileSync(
path.join(outDir, WORKER_JS_NAME, DIST_ENTRIES_JS),
path.join(workerDistDir, DIST_ENTRIES_JS),
`export const buildData = ${JSON.stringify(platformObject.buildData)};`,
);

Expand All @@ -233,9 +219,18 @@ export default {
`
# See https://developers.cloudflare.com/pages/functions/wrangler-configuration/
name = "waku-project"
compatibility_date = "2024-09-02"
compatibility_date = "2024-09-23"
compatibility_flags = [ "nodejs_als" ]
pages_build_output_dir = "./dist"
main = "./dist/worker/serve-cloudflare.js"

assets = {
directory = "./dist/assets",
binding = "ASSETS",
html_handling = "drop-trailing-slash",
# "single-page-application" | "404-page" | "none"
not_found_handling = "404-page"
}
`,
);
}
Expand Down
Loading