Added first working example of Cloudflare Worker integration through wrangler and Webpack 4

2026-03-15 14:25:17 +00:00 · 2022-02-03 00:14:29 +01:00
parent 2969a75727
commit 788c400850
8 changed files with 9701 additions and 0 deletions
--- a/examples/cloudflare-worker/wrangler/.gitignore
+++ b/examples/cloudflare-worker/wrangler/.gitignore
@@ -0,0 +1,10 @@
+/target
+/dist
+**/*.rs.bk
+Cargo.lock
+bin/
+pkg/
+wasm-pack.log
+worker/
+node_modules/
+.cargo-ok
--- a/examples/cloudflare-worker/wrangler/package-lock.json
+++ b/examples/cloudflare-worker/wrangler/package-lock.json
--- a/examples/cloudflare-worker/wrangler/package.json
+++ b/examples/cloudflare-worker/wrangler/package.json
@@ -0,0 +1,27 @@
+{
+	"name": "cloudflare-worker",
+	"version": "0.0.0",
+	"private": true,
+	"description": "",
+	"main": "src/index.ts",
+	"scripts": {
+		"preinstall": "npm run clear:deps && npm unlink --no-save passkit-generator",
+		"postinstall": "npm --prefix ../../.. run build && npm --prefix ../../.. link && npm link passkit-generator",
+		"clear:deps": "rm -rf node_modules",
+		"example": "npx wrangler dev",
+		"build": "npx tsc"
+	},
+	"keywords": [],
+	"devDependencies": {
+		"@cloudflare/workers-types": "^3.3.1",
+		"@cloudflare/wrangler": "^1.19.7",
+		"ts-loader": "^8.3.0",
+		"typescript": "^4.5.5",
+		"url-loader": "^4.1.1",
+		"webpack": "^4.46.0",
+		"webpack-cli": "^4.9.2"
+	},
+	"browser": {
+		"fs": false
+	}
+}
--- a/examples/cloudflare-worker/wrangler/src/files.d.ts
+++ b/examples/cloudflare-worker/wrangler/src/files.d.ts
@@ -0,0 +1,4 @@
+declare module "*.png" {
+	const content: Buffer;
+	export default content;
+}
--- a/examples/cloudflare-worker/wrangler/src/index.ts
+++ b/examples/cloudflare-worker/wrangler/src/index.ts
@@ -0,0 +1,218 @@
+import { PKPass } from "passkit-generator";
+
+/** Assets are handled by Webpack url-loader */
+import icon from "../../../models/exampleBooking.pass/icon.png";
+import icon2x from "../../../models/exampleBooking.pass/icon@2x.png";
+import footer from "../../../models/exampleBooking.pass/footer.png";
+import footer2x from "../../../models/exampleBooking.pass/footer@2x.png";
+import background2x from "../../../models/examplePass.pass/background@2x.png";
+
+// ************************** //
+// *** END ASSETS LOADING *** //
+// ************************** //
+
+declare global {
+	/**
+	 * "var" (instead of let and cost) is required here
+	 * to make typescript mark that these global variables
+	 * are available also in globalThis.
+	 *
+	 * These are secrets we have defined through `wrangler secret put <var name>`.
+	 * @see https://developers.cloudflare.com/workers/platform/environment-variables
+	 */
+
+	/** Pass signerCert */
+	var SIGNER_CERT: string;
+	/** Pass signerKey */
+	var SIGNER_KEY: string;
+	var SIGNER_PASSPHRASE: string;
+	var WWDR: string;
+}
+
+/**
+ * Request entry point
+ */
+
+globalThis.addEventListener("fetch", async (event: FetchEvent) => {
+	event.respondWith(generatePass(event.request));
+});
+
+async function generatePass(request: Request) {
+	const pass = new PKPass(
+		/**
+		 * Buffer is polyfilled by Webpack. Files must be
+		 * imported raw by webpack. See webpack.config.js
+		 */
+		{
+			"icon.png": Buffer.from(icon),
+			"icon@2x.png": Buffer.from(icon2x),
+			"footer.png": Buffer.from(footer),
+			"footer@2x.png": Buffer.from(footer2x),
+			"background@2x.png": Buffer.from(background2x),
+		},
+		{
+			signerCert: SIGNER_CERT,
+			signerKey: SIGNER_KEY,
+			signerKeyPassphrase: SIGNER_PASSPHRASE,
+			wwdr: WWDR,
+		},
+		{
+			description: "Example Pass generated through a cloudflare worker",
+			serialNumber: "81592CQ7838",
+			passTypeIdentifier: "pass.com.passkitgenerator",
+			teamIdentifier: "F53WB8AE67",
+			organizationName: "Apple Inc.",
+			foregroundColor: "rgb(255, 255, 255)",
+			backgroundColor: "rgb(60, 65, 76)",
+		},
+	);
+
+	pass.setBarcodes("1276451828321");
+	pass.type = "boardingPass";
+	pass.transitType = "PKTransitTypeAir";
+
+	pass.headerFields.push(
+		{
+			key: "header1",
+			label: "Data",
+			value: "25 mag",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+		{
+			key: "header2",
+			label: "Volo",
+			value: "EZY997",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+	);
+
+	pass.primaryFields.push(
+		{
+			key: "IATA-source",
+			value: "NAP",
+			label: "Napoli",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "IATA-destination",
+			value: "VCE",
+			label: "Venezia Marco Polo",
+			textAlignment: "PKTextAlignmentRight",
+		},
+	);
+
+	pass.secondaryFields.push(
+		{
+			key: "secondary1",
+			label: "Imbarco chiuso",
+			value: "18:40",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+		{
+			key: "sec2",
+			label: "Partenze",
+			value: "19:10",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+		{
+			key: "sec3",
+			label: "SB",
+			value: "Sì",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+		{
+			key: "sec4",
+			label: "Imbarco",
+			value: "Anteriore",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+	);
+
+	pass.auxiliaryFields.push(
+		{
+			key: "aux1",
+			label: "Passeggero",
+			value: "MR. WHO KNOWS",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "aux2",
+			label: "Posto",
+			value: "1A*",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+	);
+
+	pass.backFields.push(
+		{
+			key: "document number",
+			label: "Numero documento:",
+			value: "- -",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "You're checked in, what next",
+			label: "Hai effettuato il check-in, Quali sono le prospettive",
+			value: "",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "Check In",
+			label: "1. check-in✓",
+			value: "",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "checkIn",
+			label: "",
+			value: "Le uscite d'imbarco chiudono 30 minuti prima della partenza, quindi sii puntuale. In questo aeroporto puoi utilizzare la corsia Fast Track ai varchi di sicurezza.",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "2. Bags",
+			label: "2. Bagaglio",
+			value: "",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "Require special assistance",
+			label: "Assistenza speciale",
+			value: "Se hai richiesto assistenza speciale, presentati a un membro del personale nell'area di Consegna bagagli almeno 90 minuti prima del volo.",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "3. Departures",
+			label: "3. Partenze",
+			value: "",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "photoId",
+			label: "Un documento d’identità corredato di fotografia",
+			value: "è obbligatorio su TUTTI i voli. Per un viaggio internazionale è necessario un passaporto valido o, dove consentita, una carta d’identità.",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "yourSeat",
+			label: "Il tuo posto:",
+			value: "verifica il tuo numero di posto nella parte superiore. Durante l’imbarco utilizza le scale anteriori e posteriori: per le file 1-10 imbarcati dalla parte anteriore; per le file 11-31 imbarcati dalla parte posteriore. Colloca le borse di dimensioni ridotte sotto il sedile davanti a te.",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "Pack safely",
+			label: "Bagaglio sicuro",
+			value: "Fai clic http://easyjet.com/it/articoli-pericolosi per maggiori informazioni sulle merci pericolose oppure visita il sito CAA http://www.caa.co.uk/default.aspx?catid=2200",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "Thank you for travelling easyJet",
+			label: "Grazie per aver viaggiato con easyJet",
+			value: "",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+	);
+
+	return new Response(pass.getAsBuffer(), {
+		headers: { "content-type": pass.mimeType },
+	});
+}
--- a/examples/cloudflare-worker/wrangler/tsconfig.json
+++ b/examples/cloudflare-worker/wrangler/tsconfig.json
@@ -0,0 +1,19 @@
+{
+	"compilerOptions": {
+		"target": "es2016",
+		"module": "commonjs",
+		"types": ["@cloudflare/workers-types"],
+		"outDir": "lib",
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"noImplicitAny": true,
+		"strictFunctionTypes": true,
+		"noImplicitThis": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedIndexedAccess": true,
+		"noImplicitOverride": true,
+		"noPropertyAccessFromIndexSignature": true,
+		"skipLibCheck": true
+	}
+}
--- a/examples/cloudflare-worker/wrangler/webpack.config.js
+++ b/examples/cloudflare-worker/wrangler/webpack.config.js
@@ -0,0 +1,80 @@
+const path = require("path");
+
+/**
+ * @see https://developers.cloudflare.com/workers/cli-wrangler/webpack
+ */
+
+module.exports = {
+	context: __dirname,
+	entry: "./src/index.ts",
+	target: "webworker",
+
+	/**
+	 * "development" mode does not support the usage of eval
+	 * @see https://github.com/cloudflare/wrangler/issues/1268
+	 */
+
+	mode: "production",
+	module: {
+		rules: [
+			{
+				test: /\.tsx?$/,
+				use: "ts-loader",
+				exclude: /node_modules/,
+			},
+			{
+				test: /\.png$/i,
+				use: [
+					{
+						/**
+						 * These settings seems necessary
+						 * so we can import our model inside
+						 * the final output, just like we are
+						 * importing assets as esm modules.
+						 *
+						 * url-loader uses a generator to wrap
+						 * output with mimetype, encodign, etc.
+						 * but we just need the un-encoded content.
+						 */
+
+						loader: "url-loader",
+						options: {
+							encoding: false,
+							generator: (
+								content,
+								mimetype,
+								encoding,
+								resourcePath,
+							) => {
+								return content;
+							},
+						},
+					},
+				],
+			},
+		],
+	},
+	resolve: {
+		extensions: [".ts", ".js", ".png"],
+	},
+	output: {
+		filename:
+			"worker.js" /** This name is required to be "worker.js" for wrangler */,
+		path: path.resolve(__dirname, "dist"),
+	},
+
+	/**
+	 * Passkit-generator uses `fs` module, but
+	 * cloudflare worker is a browser-like environment
+	 * or an hybrid system between browser and node
+	 * that doesn't allow using file system because
+	 * workers should be single files (and modules
+	 * support it still beta as now), plus assets.
+	 *
+	 * We are going to import our model as single assets
+	 */
+
+	node: {
+		fs: "empty",
+	},
+};
--- a/examples/cloudflare-worker/wrangler/wrangler.toml
+++ b/examples/cloudflare-worker/wrangler/wrangler.toml
@@ -0,0 +1,15 @@
+name = "pg-cw-example"
+type = "webpack"
+
+account_id = ""
+workers_dev = true
+route = ""
+zone_id = ""
+compatibility_date = "2022-01-31"
+webpack_config = "webpack.config.js"
+
+[env.dev]
+IS_OFFLINE = true
+
+[env.production]
+IS_OFFLINE = false