├── .gitignore
├── .dev.vars.example
├── wrangler.toml
├── src
    ├── index.ts
    ├── app.ts
    └── page.ts
├── package.json
├── .github
    └── workflows
    │   └── deploy.yaml
├── README.md
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
1 | /.dev.vars
2 | /.wrangler/


--------------------------------------------------------------------------------
/.dev.vars.example:
--------------------------------------------------------------------------------
1 | QSTASH_URL=
2 | QSTASH_TOKEN=


--------------------------------------------------------------------------------
/wrangler.toml:
--------------------------------------------------------------------------------
1 | #:schema node_modules/wrangler/config-schema.json
2 | name = "qstash-workflow"
3 | main = "src/index.ts"
4 | compatibility_date = "2024-08-15"
5 | compatibility_flags = ["nodejs_compat"]


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import app from "./app";
 3 | 
 4 | export type Env = {
 5 |   QSTASH_URL: string;
 6 |   QSTASH_TOKEN: string;
 7 |   QSTASH_CURRENT_SIGNING_KEY: string;
 8 |   QSTASH_NEXT_SIGNING_KEY: string;
 9 | };
10 | 
11 | export default {
12 |   async fetch(request: Request, environment: Env, context: ExecutionContext): Promise<Response> {
13 |     return app.fetch(request, environment, context);
14 |   },
15 | };
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cloudflare-workers",
 3 |   "version": "0.0.0",
 4 |   "dependencies": {
 5 |     "@upstash/qstash": "^2.7.0-workflow-alpha.4",
 6 |     "hono": "^4.5.8"
 7 |   },
 8 |   "devDependencies": {
 9 |     "@cloudflare/workers-types": "^4.20240815.0",
10 |     "typescript": "^5.5.2",
11 |     "vitest": "1.5.0",
12 |     "wrangler": "^3.60.3"
13 |   },
14 |   "private": true,
15 |   "scripts": {
16 |     "dev": "wrangler dev --port 3001 --var UPSTASH_WORKFLOW_URL:$UPSTASH_WORKFLOW_URL",
17 |     "deploy": "wrangler publish"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy.yaml:
--------------------------------------------------------------------------------
 1 | name: Deploy Worker
 2 | on:
 3 |   push:
 4 |   pull_request:
 5 |   repository_dispatch:
 6 | jobs:
 7 |   deploy:
 8 |     runs-on: ubuntu-latest
 9 |     timeout-minutes: 60
10 |     steps:
11 |       - uses: actions/checkout@v2
12 |       - name: Build & Deploy Worker
13 |         uses: cloudflare/wrangler-action@v3
14 |         with:
15 |           apiToken: ${{ secrets.CF_API_TOKEN }}
16 |           accountId: ${{ secrets.CF_ACCOUNT_ID }}
17 |         env:
18 |           QSTASH_URL: ${{ secrets.QSTASH_URL }}
19 |           QSTASH_TOKEN: ${{ secrets.QSTASH_TOKEN }}
20 | 


--------------------------------------------------------------------------------
/src/app.ts:
--------------------------------------------------------------------------------
 1 | import { Hono } from "hono";
 2 | import { serve, WorkflowBindings } from "@upstash/qstash/hono"
 3 | import { landingPage } from "./page";
 4 | 
 5 | const app = new Hono<{ Bindings: WorkflowBindings }>();
 6 | 
 7 | app.get("/", (c) => {
 8 |   return c.html(landingPage);
 9 | });
10 | 
11 | const someWork = (input: string) => {
12 |   return `processed '${JSON.stringify(input)}'`
13 | }
14 | 
15 | app.post("/workflow", serve<{text: string}>(
16 |   async context => {
17 |     const input = context.requestPayload.text
18 |     const result1 = await context.run("step1", async () => {
19 |       const output = someWork(input)
20 |       console.log("step 1 input", input, "output", output)
21 |       return output
22 |     });
23 | 
24 |     const result2 = await context.run("step2", async () => {
25 |       const output = someWork(result1)
26 |       console.log("step 2 input", result1, "output", output)
27 |     });
28 |   },
29 |   {
30 |     receiver: undefined,
31 |   }
32 | ))
33 | 
34 | export default app


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # QStash Workflow Cloudflare Workers Example (with Hono)
 2 | 
 3 | This is an example of how to use QStash Workflow with Cloudflare Workers with Hono router. You can learn more in [Workflow documentation for Hono](https://upstash.com/docs/qstash/workflow/quickstarts/hono).
 4 | 
 5 | [![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://deploy.workers.cloudflare.com/?url=https://github.com/upstash/qstash-workflow-example-cloudflare-workers-hono)
 6 | 
 7 | ## Development
 8 | 
 9 | > [!TIP]
10 | > You can use [the `bootstrap.sh` script](https://github.com/upstash/qstash-js/tree/main/examples/workflow) to run this example with a local tunnel.
11 | >
12 | > Simply set the environment variables as explained below and run the following command in the `qstash-js/examples/workflow` directory:
13 | >
14 | > ```
15 | > bash bootstrap.sh cloudflare-workers-hono
16 | > ```
17 | 
18 | 1. Install the dependencies
19 | 
20 | ```bash
21 | npm install
22 | ```
23 | 
24 | 2. Get the credentials from the [Upstash Console](https://console.upstash.com/qstash) and add them to the `.dev.vars` file.
25 | 
26 | ```bash
27 | QSTASH_URL=
28 | QSTASH_TOKEN=
29 | ```
30 | 
31 | 3. Open a local tunnel to port of the development server
32 | 
33 | ```bash
34 | ngrok http 3001
35 | ```
36 | 
37 | Also, set the `UPSTASH_WORKLFOW_URL` environment variable to the public url provided by ngrok.
38 | 
39 | 4. Run the development server
40 | 
41 | ```bash
42 | npm run dev
43 | ```
44 | 
45 | 5. Send a `POST` request to the `/workflow` endpoint.
46 | 
47 | ```bash
48 | curl -X POST "http:localhost:3001/workflow" -d '{"text": "hello world!"}'
49 | ```
50 | 
51 | ## Deployment
52 | 
53 | You can use wrangler to deploy the project to Cloudflare Workers.
54 | 
55 | ```bash
56 | npm run deploy
57 | ```
58 | 


--------------------------------------------------------------------------------
/src/page.ts:
--------------------------------------------------------------------------------
  1 | export const landingPage = `
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Workflow Form</title>
  8 |   <style>
  9 |     /* Center the form on the page */
 10 |     body, html {
 11 |       font-family: Arial, sans-serif;
 12 |       height: 100%;
 13 |       margin: 0;
 14 |       display: flex;
 15 |       justify-content: center;
 16 |       align-items: center;
 17 |       background-color: #f0f0f0; /* Background color for the page */
 18 |     }
 19 | 
 20 |     /* Outer wrapper with rounded edges */
 21 |     .form-container {
 22 |       background-color: white;
 23 |       padding: 20px;
 24 |       border-radius: 15px; /* Rounded edges */
 25 |       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow for effect */
 26 |       width: 400px; /* Adjust this width as needed */
 27 |     }
 28 | 
 29 |     /* Form elements */
 30 |     #workflowForm {
 31 |       display: flex;
 32 |       flex-direction: column;
 33 |       align-items: center;
 34 |     }
 35 | 
 36 |     #workflowForm input[type="text"] {
 37 |       padding: 10px;
 38 |       width: 100%;
 39 |       max-width: 400px;
 40 |       border-radius: 5px;
 41 |       border: 1px solid #ccc;
 42 |       font-size: 12px;
 43 |       box-sizing: border-box; 
 44 |     }
 45 | 
 46 |     /* Button default style */
 47 |     #submitBtn {
 48 |       background-color: #3b82f6; /* Default color */
 49 |       color: white;
 50 |       padding: 10px 20px;
 51 |       border: none;
 52 |       border-radius: 5px;
 53 |       cursor: pointer;
 54 |       font-size: 12px;
 55 |       width: 100%;
 56 |       max-width: 400px;
 57 |     }
 58 | 
 59 |     /* Button hover state */
 60 |     #submitBtn:hover {
 61 |       background-color: #2563eb; /* Hover color */
 62 |     }
 63 | 
 64 |     /* Button focus state */
 65 |     #submitBtn:focus {
 66 |       background-color: #6366f1; /* Focus color */
 67 |       outline: none;
 68 |     }
 69 | 
 70 |     /* Button pending state (when the request is being sent) */
 71 |     #submitBtn.pending {
 72 |       background-color: #6b7280; /* Pending color */
 73 |       cursor: not-allowed;
 74 |     }
 75 |   </style>
 76 | </head>
 77 | <body>
 78 | 
 79 |   <div class="form-container">
 80 |     <form id="workflowForm" action="/workflow" method="POST">
 81 |       <label for="inputText">Enter Request Body:</label><br><br>
 82 |       <input type="text" id="inputText" name="text"><br><br>
 83 |       <button type="submit" id="submitBtn">Trigger "/workflow" Endpoint</button>
 84 |     </form>
 85 |   </div>
 86 | 
 87 |   <script>
 88 |     document.getElementById('workflowForm').addEventListener('submit', function(event) {
 89 |       event.preventDefault(); // Prevent the form from submitting immediately
 90 | 
 91 |       var submitBtn = document.getElementById('submitBtn');
 92 |       submitBtn.classList.add('pending'); // Add the pending class
 93 | 
 94 |       var textValue = document.getElementById('inputText').value;
 95 | 
 96 |       fetch('/workflow', {
 97 |         method: 'POST',
 98 |         headers: {
 99 |           'Content-Type': 'application/json' // Sending as JSON
100 |         },
101 |         body: JSON.stringify({ text: textValue }) // Converting form data to JSON
102 |       }).then(function(response) {
103 |         submitBtn.classList.remove('pending'); // Remove the pending class
104 |       }).catch(function(error) {
105 |         submitBtn.classList.remove('pending'); // Remove the pending class
106 |         alert('Error: ' + error.message);
107 |       });
108 |     });
109 |   </script>
110 | 
111 | </body>
112 | </html>
113 | `


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "compilerOptions": {
  3 |     /* Visit https://aka.ms/tsconfig.json to read more about this file */
  4 | 
  5 |     /* Projects */
  6 |     // "incremental": true,                              /* Enable incremental compilation */
  7 |     // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
  8 |     // "tsBuildInfoFile": "./",                          /* Specify the folder for .tsbuildinfo incremental compilation files. */
  9 |     // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects */
 10 |     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
 11 |     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 12 | 
 13 |     /* Language and Environment */
 14 |     "target": "es2021", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
 15 |     "lib": [
 16 |       "es2021"
 17 |     ], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
 18 |     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
 19 |     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 20 |     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 21 |     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
 22 |     // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
 23 |     // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
 24 |     // "reactNamespace": "",                             /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
 25 |     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
 26 |     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 27 | 
 28 |     /* Modules */
 29 |     "module": "es2022", /* Specify what module code is generated. */
 30 |     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
 31 |     "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
 32 |     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
 33 |     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
 34 |     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
 35 |     // "typeRoots": [],                                  /* Specify multiple folders that act like `./node_modules/@types`. */
 36 |     "types": [
 37 |       "@cloudflare/workers-types"
 38 |     ], /* Specify type package names to be included without being referenced in a source file. */
 39 |     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
 40 |     "resolveJsonModule": true, /* Enable importing .json files */
 41 |     // "noResolve": true,                                /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
 42 | 
 43 |     /* JavaScript Support */
 44 |     "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
 45 |     "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
 46 |     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
 47 | 
 48 |     /* Emit */
 49 |     // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
 50 |     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
 51 |     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
 52 |     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
 53 |     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
 54 |     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
 55 |     // "removeComments": true,                           /* Disable emitting comments. */
 56 |     "noEmit": true, /* Disable emitting files from a compilation. */
 57 |     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
 58 |     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
 59 |     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
 60 |     // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
 61 |     // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
 62 |     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
 63 |     // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
 64 |     // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
 65 |     // "newLine": "crlf",                                /* Set the newline character for emitting files. */
 66 |     // "stripInternal": true,                            /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
 67 |     // "noEmitHelpers": true,                            /* Disable generating custom helper functions like `__extends` in compiled output. */
 68 |     // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
 69 |     // "preserveConstEnums": true,                       /* Disable erasing `const enum` declarations in generated code. */
 70 |     // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
 71 |     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 72 | 
 73 |     /* Interop Constraints */
 74 |     "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
 75 |     "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
 76 |     // "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
 77 |     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
 78 |     "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
 79 | 
 80 |     /* Type Checking */
 81 |     "strict": true, /* Enable all strict type-checking options. */
 82 |     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
 83 |     // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
 84 |     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
 85 |     // "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
 86 |     // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
 87 |     // "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
 88 |     // "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
 89 |     // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
 90 |     // "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
 91 |     // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
 92 |     // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
 93 |     // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
 94 |     // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
 95 |     // "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
 96 |     // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
 97 |     // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
 98 |     // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
 99 |     // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
100 | 
101 |     /* Completeness */
102 |     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
103 |     "skipLibCheck": true /* Skip type checking all .d.ts files. */
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------