mirror of
https://github.com/marcogll/passkit-generator.git
synced 2026-03-15 16:25:21 +00:00
Merge branch 'example/cloudflare_worker'
This commit is contained in:
10
examples/cloudflare-worker/webpack5.x/.gitignore
vendored
Normal file
10
examples/cloudflare-worker/webpack5.x/.gitignore
vendored
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
/target
|
||||||
|
/dist
|
||||||
|
**/*.rs.bk
|
||||||
|
Cargo.lock
|
||||||
|
bin/
|
||||||
|
pkg/
|
||||||
|
wasm-pack.log
|
||||||
|
worker/
|
||||||
|
node_modules/
|
||||||
|
.cargo-ok
|
||||||
62
examples/cloudflare-worker/webpack5.x/README.md
Normal file
62
examples/cloudflare-worker/webpack5.x/README.md
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
# Cloudflare Workers example (wrangler + Webpack 5)
|
||||||
|
|
||||||
|
This is a sample project for showing passkit-generator working on a Cloudflare Worker.
|
||||||
|
|
||||||
|
Cloudflare Workers are serverless function based on Browser's V8 (instead of Node). For this reason several APIs require to be polyfilled.
|
||||||
|
|
||||||
|
Cloudflare Workers have a tool, wrangler, which comes out with Webpack 4 to bundle things and polyfill those missing Node.JS APIs (e.g. Buffer).
|
||||||
|
|
||||||
|
**In this example aims, instead, to show how to build with Webpack 5 instead of Webpack 4.**
|
||||||
|
|
||||||
|
This example offers just the generation of a single static `boardingPass`.
|
||||||
|
|
||||||
|
> Please note that creating and publishing a Cloudflare Workers with passkit-generator, might require you to buy a plan.
|
||||||
|
> Cloudflare limits are pretty low.
|
||||||
|
|
||||||
|
## Setting up
|
||||||
|
|
||||||
|
Install all the dependencies through `npm install`.
|
||||||
|
Configure wrangler and your account [according to the guide](https://developers.cloudflare.com/workers/get-started/guide).
|
||||||
|
|
||||||
|
### Secrets and certificates
|
||||||
|
|
||||||
|
This example uses some environmental variables (secrets), which can be set through Wrangler CLI or through Dashboard, as per [this official guide](https://developers.cloudflare.com/workers/platform/environment-variables#adding-secrets-via-wrangler):
|
||||||
|
|
||||||
|
- `SIGNER_CERT`
|
||||||
|
- `SIGNER_KEY`
|
||||||
|
- `SIGNER_PASSPHRASE`
|
||||||
|
- `WWDR`
|
||||||
|
|
||||||
|
So, assuming you have `certificates` folder in the root of passkit-generator, you'll be able to do such:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
$ cat ../../../certificates/signerKey.pem | npx wrangler secret put SIGNER_KEY
|
||||||
|
```
|
||||||
|
|
||||||
|
These variables are exposed on `globalThis`.
|
||||||
|
|
||||||
|
### Running locally
|
||||||
|
|
||||||
|
To run the worker locally, run `npm run example`. This command will run the webserver on `0.0.0.0`, so it can also be accessed from other devices on the network.
|
||||||
|
|
||||||
|
### Publishing
|
||||||
|
|
||||||
|
To publish the worker, you'll need to run `npx wrangler whoami` to get the Account ID. Set it to `account_id` in `wrangler.toml`.
|
||||||
|
|
||||||
|
## Example details
|
||||||
|
|
||||||
|
Since our project is made in Typescript, we needed a way to compile it. The way shown, uses `ts-loader`.
|
||||||
|
|
||||||
|
As per `ts-loader` dependencies, it required webpack to be `*`, so v5 would automatically get download. We added webpack explicitly, so we don't leave anything undetailed.
|
||||||
|
|
||||||
|
Along with this, we needed to setup a different `webpack.config.js` and tell wrangler where to find it, through `wrangler.toml`.
|
||||||
|
|
||||||
|
`webpack.config.js` will detail several things for us:
|
||||||
|
|
||||||
|
- how to handle module assets, through [Asset Modules](https://webpack.js.org/guides/asset-modules/), in a way we can still import them with ES Modules syntax;
|
||||||
|
- Node.JS modules that will get polyfilled;
|
||||||
|
- Modules that [will be provided everywhere without the need to import them explicitly](https://webpack.js.org/plugins/provide-plugin/). This is the case of Node.js APIs and modules, like Buffer, which is available on both `global` and through `Buffer` module. Since Buffer must be polyfilled "manually", this allows us to tell modules Buffer should be imported in for compatibility (e.g. do-not-zip);
|
||||||
|
|
||||||
|
Another detail you should pay attention to, is that `package.json`'s `main` field **should be your worker entry-point**, as per [cloudflare documentation (paragraph)](https://developers.cloudflare.com/workers/cli-wrangler/configuration#:~:text=ensure%20the%20main%20field%20in%20your%20package.json%20references%20the%20worker%20script%20you%20want%20to%20publish)
|
||||||
|
|
||||||
|
Lastly, we needed to set `type = "javascript"` on the top of `wrangler.toml`, as per [the documentation](https://developers.cloudflare.com/workers/cli-wrangler/webpack) and set a custom build command as per the documentation as well (same link as above).
|
||||||
3473
examples/cloudflare-worker/webpack5.x/package-lock.json
generated
Normal file
3473
examples/cloudflare-worker/webpack5.x/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
examples/cloudflare-worker/webpack5.x/package.json
Normal file
32
examples/cloudflare-worker/webpack5.x/package.json
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "cloudflare-worker",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"description": "",
|
||||||
|
"main": "dist/worker.js",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"service:link-pg": "cd ../../.. && npm run build && npm link",
|
||||||
|
"preinstall": "npm run clear:deps",
|
||||||
|
"postinstall": "npm run service:link-pg && npm link passkit-generator",
|
||||||
|
"clear:deps": "rm -rf node_modules",
|
||||||
|
"example": "npx wrangler dev --ip 0.0.0.0",
|
||||||
|
"build": "npx webpack --config webpack.config.mjs"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"peerDependencies": {
|
||||||
|
"passkit-generator": "*"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@cloudflare/workers-types": "^3.3.1",
|
||||||
|
"@cloudflare/wrangler": "^1.19.7",
|
||||||
|
"stream-browserify": "^3.0.0",
|
||||||
|
"ts-loader": "^9.2.6",
|
||||||
|
"typescript": "^4.5.5",
|
||||||
|
"webpack": "^5.68.0",
|
||||||
|
"webpack-cli": "^4.9.2",
|
||||||
|
"buffer": "^6.0.3",
|
||||||
|
"os-browserify": "^0.3.0",
|
||||||
|
"path-browserify": "^1.0.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
4
examples/cloudflare-worker/webpack5.x/src/files.d.ts
vendored
Normal file
4
examples/cloudflare-worker/webpack5.x/src/files.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
declare module "*.png" {
|
||||||
|
const content: string;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
220
examples/cloudflare-worker/webpack5.x/src/index.ts
Normal file
220
examples/cloudflare-worker/webpack5.x/src/index.ts
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
import { Buffer } from "buffer";
|
||||||
|
import { PKPass } from "passkit-generator";
|
||||||
|
|
||||||
|
/** Assets are handled by Webpack */
|
||||||
|
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";
|
||||||
|
|
||||||
|
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", (event: FetchEvent) => {
|
||||||
|
event.respondWith(generatePass(event.request));
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Respond with hello worker text
|
||||||
|
* @param {Request} 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 },
|
||||||
|
});
|
||||||
|
}
|
||||||
21
examples/cloudflare-worker/webpack5.x/tsconfig.json
Normal file
21
examples/cloudflare-worker/webpack5.x/tsconfig.json
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es2016",
|
||||||
|
"module": "commonjs",
|
||||||
|
"types": ["@cloudflare/workers-types"],
|
||||||
|
"outDir": "lib",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"strictFunctionTypes": true,
|
||||||
|
"noImplicitThis": true,
|
||||||
|
"exactOptionalPropertyTypes": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedIndexedAccess": true,
|
||||||
|
"noImplicitOverride": true,
|
||||||
|
"noPropertyAccessFromIndexSignature": true,
|
||||||
|
"skipLibCheck": true
|
||||||
|
}
|
||||||
|
}
|
||||||
69
examples/cloudflare-worker/webpack5.x/webpack.config.mjs
Normal file
69
examples/cloudflare-worker/webpack5.x/webpack.config.mjs
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
import path from "path";
|
||||||
|
import { fileURLToPath } from "url";
|
||||||
|
import { createRequire } from "module";
|
||||||
|
import webpack from "webpack";
|
||||||
|
|
||||||
|
const require = createRequire(import.meta.url);
|
||||||
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @see https://developers.cloudflare.com/workers/cli-wrangler/webpack
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
context: __dirname,
|
||||||
|
entry: "./src/index.ts",
|
||||||
|
target: "webworker",
|
||||||
|
|
||||||
|
/**
|
||||||
|
* "development" mode does not support the usage of eval
|
||||||
|
* If you want to run in dev mode and not use eval, add
|
||||||
|
* to the configuration:
|
||||||
|
*
|
||||||
|
* ```
|
||||||
|
* devtool: "inline-source-map",
|
||||||
|
* ```
|
||||||
|
*
|
||||||
|
* @see https://github.com/cloudflare/wrangler/issues/1268
|
||||||
|
*/
|
||||||
|
|
||||||
|
mode: "production",
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.tsx?$/,
|
||||||
|
use: "ts-loader",
|
||||||
|
exclude: /node_modules/,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.png/,
|
||||||
|
type: "asset/inline",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: [".ts", ".js", ".png"],
|
||||||
|
fallback: {
|
||||||
|
fs: false /* Do not include a polyfill for fs */,
|
||||||
|
stream: require.resolve("stream-browserify"),
|
||||||
|
buffer: require.resolve("buffer/"),
|
||||||
|
os: require.resolve("os-browserify/browser"),
|
||||||
|
path: require.resolve("path-browserify"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
filename: "worker.js" /** This name is required */,
|
||||||
|
path: path.resolve(__dirname, "dist"),
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This is required because some passkit-generator dependencies
|
||||||
|
* use Buffer on global instead of importing it explictly
|
||||||
|
*/
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
new webpack.ProvidePlugin({
|
||||||
|
Buffer: ["buffer", "Buffer"],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
14
examples/cloudflare-worker/webpack5.x/wrangler.toml
Normal file
14
examples/cloudflare-worker/webpack5.x/wrangler.toml
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
name = "pg-cw-example-webpack5"
|
||||||
|
type = "javascript"
|
||||||
|
|
||||||
|
account_id = ""
|
||||||
|
workers_dev = true
|
||||||
|
route = ""
|
||||||
|
zone_id = ""
|
||||||
|
compatibility_date = "2022-01-31"
|
||||||
|
|
||||||
|
[build]
|
||||||
|
command = "npm run build"
|
||||||
|
|
||||||
|
[build.upload]
|
||||||
|
format = "service-worker"
|
||||||
10
examples/cloudflare-worker/wrangler/.gitignore
vendored
Normal file
10
examples/cloudflare-worker/wrangler/.gitignore
vendored
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
/target
|
||||||
|
/dist
|
||||||
|
**/*.rs.bk
|
||||||
|
Cargo.lock
|
||||||
|
bin/
|
||||||
|
pkg/
|
||||||
|
wasm-pack.log
|
||||||
|
worker/
|
||||||
|
node_modules/
|
||||||
|
.cargo-ok
|
||||||
56
examples/cloudflare-worker/wrangler/README.md
Normal file
56
examples/cloudflare-worker/wrangler/README.md
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
# Cloudflare Workers example (wrangler)
|
||||||
|
|
||||||
|
This is a sample project for showing passkit-generator working on a Cloudflare Worker.
|
||||||
|
|
||||||
|
Cloudflare Workers are serverless function based on Browser's V8 (instead of Node). For this reason several APIs require to be polyfilled.
|
||||||
|
|
||||||
|
Cloudflare Workers have a tool, wrangler, which comes out with Webpack 4 to bundle things and polyfill those missing Node.JS APIs (e.g. Buffer).
|
||||||
|
|
||||||
|
This example offers just the generation of a single static `boardingPass`.
|
||||||
|
|
||||||
|
> Please note that creating and publishing a Cloudflare Workers with passkit-generator, might require you to buy a plan.
|
||||||
|
> Cloudflare limits are pretty low.
|
||||||
|
|
||||||
|
## Setting up
|
||||||
|
|
||||||
|
Install all the dependencies through `npm install`.
|
||||||
|
Configure wrangler and your account [according to the guide](https://developers.cloudflare.com/workers/get-started/guide).
|
||||||
|
|
||||||
|
### Secrets and certificates
|
||||||
|
|
||||||
|
This example uses some environmental variables (secrets), which can be set through Wrangler CLI or through Dashboard, as per [this official guide](https://developers.cloudflare.com/workers/platform/environment-variables#adding-secrets-via-wrangler):
|
||||||
|
|
||||||
|
- `SIGNER_CERT`
|
||||||
|
- `SIGNER_KEY`
|
||||||
|
- `SIGNER_PASSPHRASE`
|
||||||
|
- `WWDR`
|
||||||
|
|
||||||
|
So, assuming you have `certificates` folder in the root of passkit-generator, you'll be able to do such:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
$ cat ../../../certificates/signerKey.pem | npx wrangler secret put SIGNER_KEY
|
||||||
|
```
|
||||||
|
|
||||||
|
These variables are exposed on `globalThis`.
|
||||||
|
|
||||||
|
### Running locally
|
||||||
|
|
||||||
|
To run the worker locally, run `npm run example`. This command will run the webserver on `0.0.0.0`, so it can also be accessed from other devices on the network.
|
||||||
|
|
||||||
|
### Publishing
|
||||||
|
|
||||||
|
To publish the worker, you'll need to run `npx wrangler whoami` to get the Account ID. Set it to `account_id` in `wrangler.toml`.
|
||||||
|
|
||||||
|
## Example details
|
||||||
|
|
||||||
|
Since our project is made in Typescript, we needed a way to compile it. The way shown, uses `ts-loader`.
|
||||||
|
|
||||||
|
As per `ts-loader` dependencies, it required webpack to be `*`, so v5 would automatically get download.
|
||||||
|
|
||||||
|
For this reason we also needed to add Webpack 4 (the one provided with Wrangler) as a dev dependency.
|
||||||
|
|
||||||
|
Along with this, we needed to setup a different `webpack.config.js` and tell wrangler where to find it, through `wrangler.toml`.
|
||||||
|
|
||||||
|
Also, we needed to install `url-loader` to load static assets (model files from models folder).
|
||||||
|
|
||||||
|
Lastly, we needed to set `type = "webpack"` on the top of `wrangler.toml`, as per [the documentation](https://developers.cloudflare.com/workers/cli-wrangler/webpack).
|
||||||
10223
examples/cloudflare-worker/wrangler/package-lock.json
generated
Normal file
10223
examples/cloudflare-worker/wrangler/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
examples/cloudflare-worker/wrangler/package.json
Normal file
32
examples/cloudflare-worker/wrangler/package.json
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "cloudflare-worker",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"description": "",
|
||||||
|
"main": "src/index.ts",
|
||||||
|
"scripts": {
|
||||||
|
"service:link-pg": "cd ../../.. && npm run build && npm link",
|
||||||
|
"preinstall": "npm run clear:deps",
|
||||||
|
"postinstall": "npm run service:link-pg && npm link passkit-generator",
|
||||||
|
"clear:deps": "rm -rf node_modules",
|
||||||
|
"example": "npx wrangler dev --ip 0.0.0.0",
|
||||||
|
"build": "npx tsc"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"peerDependencies": {
|
||||||
|
"passkit-generator": "latest"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@cloudflare/workers-types": "^3.3.1",
|
||||||
|
"@cloudflare/wrangler": "^1.19.7",
|
||||||
|
"terser-webpack-plugin": "^4.2.3",
|
||||||
|
"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
|
||||||
|
}
|
||||||
|
}
|
||||||
4
examples/cloudflare-worker/wrangler/src/files.d.ts
vendored
Normal file
4
examples/cloudflare-worker/wrangler/src/files.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
declare module "*.png" {
|
||||||
|
const content: Buffer;
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
219
examples/cloudflare-worker/wrangler/src/index.ts
Normal file
219
examples/cloudflare-worker/wrangler/src/index.ts
Normal file
@@ -0,0 +1,219 @@
|
|||||||
|
import { Buffer } from "buffer";
|
||||||
|
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 },
|
||||||
|
});
|
||||||
|
}
|
||||||
19
examples/cloudflare-worker/wrangler/tsconfig.json
Normal file
19
examples/cloudflare-worker/wrangler/tsconfig.json
Normal file
@@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
97
examples/cloudflare-worker/wrangler/webpack.config.js
Normal file
97
examples/cloudflare-worker/wrangler/webpack.config.js
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
const path = require("path");
|
||||||
|
const TerserPlugin = require("terser-webpack-plugin");
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @see https://developers.cloudflare.com/workers/cli-wrangler/webpack
|
||||||
|
*/
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
context: __dirname,
|
||||||
|
entry: "./src/index.ts",
|
||||||
|
target: "webworker",
|
||||||
|
|
||||||
|
/** Adding more minifization (for what it can apply... ) */
|
||||||
|
optimization: {
|
||||||
|
minimize: true,
|
||||||
|
minimizer: [
|
||||||
|
new TerserPlugin({
|
||||||
|
parallel: true,
|
||||||
|
terserOptions: {
|
||||||
|
format: {
|
||||||
|
comments: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
extractComments: false,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* "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",
|
||||||
|
},
|
||||||
|
};
|
||||||
9
examples/cloudflare-worker/wrangler/wrangler.toml
Normal file
9
examples/cloudflare-worker/wrangler/wrangler.toml
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
name = "pg-cw-example"
|
||||||
|
type = "webpack"
|
||||||
|
|
||||||
|
account_id = ""
|
||||||
|
workers_dev = true
|
||||||
|
route = ""
|
||||||
|
zone_id = ""
|
||||||
|
compatibility_date = "2022-01-31"
|
||||||
|
webpack_config = "webpack.config.js"
|
||||||
593
examples/self-hosted/package-lock.json
generated
593
examples/self-hosted/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user