fix: add bootstrap script and fix examples

examples/README.md

@@ -1,6 +1,6 @@
 # Workflow Examples
 
-This directory has example projects for Upstash Workflows with different frameworks.
+This directory has example projects for Upstash Workflow with different frameworks.
 
 Each project has an interface where you can enter the deployment URL, pick a workflow endpoint, enter a payload and finally call the picked workflow endpoint.
 

examples/astro/README.md

@@ -1,4 +1,4 @@
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fupstash%2Fqstash-js%2Ftree%2Fmain%2Fexamples%2Fworkflow%2Fastro&env=QSTASH_TOKEN&envDescription=You%20can%20access%20this%20variable%20from%20Upstash%20Console%2C%20under%20QStash%20page.%20&project-name=qstash-workflow-astro&repository-name=qstash-workflow-astro&demo-title=Upstash%20QStash%20Workflow%20Example&demo-description=A%20Astro%20application%20utilizing%20QStash%20Workflows)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fupstash%2Fworkflow-js%2Ftree%2Fmain%2Fexamples%2Fastro&env=QSTASH_TOKEN&envDescription=You%20can%20access%20this%20variable%20from%20Upstash%20Console%2C%20under%20QStash%20page.%20&project-name=workflow-astro&repository-name=workflow-astro&demo-title=Upstash%20Workflow%20Example&demo-description=A%20Astro%20application%20utilizing%20Upstash%20Workflows)
 
 # Upstash Workflow Astro Example
 
@@ -8,9 +8,9 @@ This is an example of how to use Upstash Workflow with Astro. You can learn more
 ## Development
 
 > [!TIP]
-> 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.
+> You can use [the `bootstrap.sh` script](https://github.com/upstash/workflow-js/tree/main/examples/workflow) to run this example with a local tunnel.
 >
-> Simply set the environment variables as explained below and run the following command in the `qstash-js/examples/workflow` directory:
+> Simply set the environment variables as explained below and run the following command in the `workflow-js/examples/workflow` directory:
 >
 > ```
 > bash bootstrap.sh astro

examples/astro/src/pages/api/env.ts

@@ -0,0 +1,6 @@
+
+
+export const GET = async () => {
+  console.log(import.meta.env);
+  return new Response("what", { status: 200 })
+}

examples/bootstrap.sh

@@ -0,0 +1,63 @@
+#!/bin/bash
+
+set -e
+
+# Check if an argument is provided
+if [ $# -eq 0 ]; then
+    echo "Please provide a path argument."
+    echo "Usage: $0 <path>"
+    exit 1
+fi
+
+# store project argument
+project_arg="$1"
+
+
+# create dist
+cd ..
+bun install
+bun run build
+cd examples
+
+# install dependencies
+cd "$project_arg"
+pnpm install
+cd ..
+
+# Start ngrok and capture the public URL
+ngrok http localhost:3001 --log=stdout > ngrok.log &
+NGROK_PID=$!
+sleep 5  # Allow some time for ngrok to start
+
+# Extract the ngrok URL from the logs
+ngrok_url=$(grep -o 'url=https://[a-zA-Z0-9.-]*\.ngrok-free\.app' ngrok.log | cut -d '=' -f 2 | head -n1)
+export UPSTASH_WORKFLOW_URL=$ngrok_url
+
+final_path=$ngrok_url
+echo "Setup complete. Full URL: $final_path"
+echo "ngrok is running. Press Ctrl+C to stop it."
+
+
+# Open the URL in Chrome
+if [[ "$OSTYPE" == "darwin"* ]]; then
+    open "$final_path"
+elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+    xdg-open "$final_path"
+elif [[ "$OSTYPE" == "cygwin" ]]; then
+    cygstart "$final_path"
+elif [[ "$OSTYPE" == "msys" ]]; then
+    start "$final_path"
+elif [[ "$OSTYPE" == "win32" ]]; then
+    start "$final_path"
+else
+    echo "Unsupported OS type: $OSTYPE"
+fi
+
+# go to project directory
+cd "$project_arg"
+# pnpm install @upstash/workflow@file:../../dist
+
+# Start next.js server
+pnpm dev
+# Wait for ngrok to be manually stopped
+wait $NGROK_PID

examples/cloudflare-workers-hono/README.md

@@ -8,9 +8,9 @@ This is an example of how to use Upstash Workflow with Cloudflare Workers with H
 ## Development
 
 > [!TIP]
-> 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.
+> You can use [the `bootstrap.sh` script](https://github.com/upstash/workflow-js/tree/main/examples/workflow) to run this example with a local tunnel.
 >
-> Simply set the environment variables as explained below and run the following command in the `qstash-js/examples/workflow` directory:
+> Simply set the environment variables as explained below and run the following command in the `workflow-js/examples/workflow` directory:
 >
 > ```
 > bash bootstrap.sh cloudflare-workers-hono

examples/cloudflare-workers-hono/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "dependencies": {
     "@upstash/qstash": "latest",
-    "@upstash/workflow": "0.1.1-canary-2",
+    "@upstash/workflow": "latest",
     "hono": "^4.5.8"
   },
   "devDependencies": {

examples/cloudflare-workers-hono/src/app.ts

@@ -1,5 +1,5 @@
 import { Hono } from "hono";
-import { serve, WorkflowBindings } from "@upstash/qstash/hono";
+import { serve, WorkflowBindings } from "@upstash/workflow/hono";
 import { landingPage } from "./page";
 
 const app = new Hono<{ Bindings: WorkflowBindings }>();

examples/cloudflare-workers-hono/wrangler.toml

@@ -1,5 +1,5 @@
 #:schema node_modules/wrangler/config-schema.json
-name = "qstash-workflow"
+name = "upstash-workflow-cf-hono"
 main = "src/index.ts"
 compatibility_date = "2024-08-15"
 compatibility_flags = ["nodejs_compat"]

examples/cloudflare-workers/README.md

@@ -8,9 +8,9 @@ This is an example of how to use Upstash Workflow with Cloudflare Workers. You c
 ## Development
 
 > [!TIP]
-> 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.
+> You can use [the `bootstrap.sh` script](https://github.com/upstash/workflow-js/tree/main/examples/workflow) to run this example with a local tunnel.
 >
-> Simply set the environment variables as explained below and run the following command in the `qstash-js/examples/workflow` directory:
+> Simply set the environment variables as explained below and run the following command in the `workflow-js/examples/workflow` directory:
 >
 > ```
 > bash bootstrap.sh cloudflare-workers

examples/cloudflare-workers/package.json

@@ -18,6 +18,6 @@
 	},
 	"dependencies": {
 		"@upstash/qstash": "latest",
-		"@upstash/workflow": "0.1.1-canary-2"
+		"@upstash/workflow": "latest"
 	}
 }

examples/cloudflare-workers/wrangler.toml

@@ -1,5 +1,5 @@
 #:schema node_modules/wrangler/config-schema.json
-name = "qstash-workflow"
+name = "upstash-workflow-cf"
 main = "src/index.ts"
 compatibility_date = "2024-08-15"
 compatibility_flags = ["nodejs_compat"]

examples/hono/README.md

@@ -5,9 +5,9 @@ This is an example of how to use Upstash Workflow in a Hono project. You can lea
 ## Development
 
 > [!TIP]
-> 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.
+> You can use [the `bootstrap.sh` script](https://github.com/upstash/workflow-js/tree/main/examples/workflow) to run this example with a local tunnel.
 >
-> Simply set the environment variables as explained below and run the following command in the `qstash-js/examples/workflow` directory:
+> Simply set the environment variables as explained below and run the following command in the `workflow-js/examples/workflow` directory:
 >
 > ```
 > bash bootstrap.sh hono

examples/hono/package.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@upstash/qstash": "latest",
-    "@upstash/workflow": "0.1.1-canary-2",
+    "@upstash/workflow": "latest",
     "hono": "^4.5.8"
   },
   "devDependencies": {

examples/image-gen-with-workflow/README.md

@@ -1,4 +1,4 @@
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fupstash%2Fqstash-js%2Ftree%2Fmain%2Fexamples%2Fworkflow%2Fimage-gen-with-workflow&env=UPSTASH_REDIS_REST_URL,UPSTASH_REDIS_REST_TOKEN,QSTASH_TOKEN,IDEOGRAM_API_KEY&envDescription=You%20can%20access%20the%20QSTASH_TOKEN%20env%20variable%20from%20Upstash%20Console%2C%20under%20QStash%20page.%20You%20can%20get%20Redis%20keys%20after%20creating%20a%20Redis%20database%20from%20Upstash%20Console.&project-name=upstash-workflow-image-gen&repository-name=upstash-workflow-image-gen&demo-title=Optimizing%20Vercel%20Functions%20With%20Upstash%20Workflow&demo-description=This%20demo%20shows%20the%20cost-saving%20benefits%20of%20using%20Upstash%20Workflow%20for%20Vercel%20functions.&demo-url=https%3A%2F%2Fimage-gen-with-workflow.vercel.app%2F&demo-image=https%3A%2F%2Fimage-gen-with-workflow.vercel.app%2Flanding.png)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fupstash%2Fworkflow-js%2Ftree%2Fmain%2Fworkflow%2Fimage-gen-with-workflow&env=UPSTASH_REDIS_REST_URL,UPSTASH_REDIS_REST_TOKEN,QSTASH_TOKEN,IDEOGRAM_API_KEY&envDescription=You%20can%20access%20the%20QSTASH_TOKEN%20env%20variable%20from%20Upstash%20Console%2C%20under%20QStash%20page.%20You%20can%20get%20Redis%20keys%20after%20creating%20a%20Redis%20database%20from%20Upstash%20Console.&project-name=upstash-workflow-image-gen&repository-name=upstash-workflow-image-gen&demo-title=Optimizing%20Vercel%20Functions%20With%20Upstash%20Workflow&demo-description=This%20demo%20shows%20the%20cost-saving%20benefits%20of%20using%20Upstash%20Workflow%20for%20Vercel%20functions.&demo-url=https%3A%2F%2Fimage-gen-with-workflow.vercel.app%2F&demo-image=https%3A%2F%2Fimage-gen-with-workflow.vercel.app%2Flanding.png)
 
 # Upstash Workflow - Vercel Function Cost Comparison Example
 

examples/image-gen-with-workflow/app/api/workflow-simple/route.ts

@@ -9,23 +9,25 @@ export const { POST } = serve<{ prompt: string }>(async (context) => {
   const { prompt } = context.requestPayload
 
   // make the call to Idogram through QStash
-  const result = await context.call<ImageResponse>(
+  const { body: result } = await context.call(
     'call Ideogram',
-    'https://api.ideogram.ai/generate',
-    'POST',
     {
-      image_request: {
-        model: 'V_2',
-        prompt,
-        aspect_ratio: 'ASPECT_1_1',
-        magic_prompt_option: 'AUTO',
+      url: 'https://api.ideogram.ai/generate',
+      method: 'POST',
+      body: {
+        image_request: {
+          model: 'V_2',
+          prompt,
+          aspect_ratio: 'ASPECT_1_1',
+          magic_prompt_option: 'AUTO',
+        },
       },
-    },
-    {
-      'Content-Type': 'application/json',
-      'Api-Key': process.env.IDEOGRAM_API_KEY!,
-    },
-  )
+      headers: {
+        'Content-Type': 'application/json',
+        'Api-Key': process.env.IDEOGRAM_API_KEY!,
+      },
+    }
+  ) as { body: ImageResponse };
 
   // save the image url in redis
   // so that UI can access it

examples/image-gen-with-workflow/app/api/workflow/route.ts

@@ -74,13 +74,11 @@ const { POST: serveMethod } = serve<CallPayload>(async (context) => {
   if (parameters) {
     // if the parameters are present, make context.call request
     // to call Ideogram through QStash
-    result = await context.call<ImageResponse>(
+    const { body } = await context.call(
       'call Ideogram',
-      parameters.url,
-      parameters.method,
-      parameters.body,
-      parameters.headers,
-    )
+      parameters
+    );
+    result = body as ImageResponse
   } else {
     // Exists for development purposes.
     // if the parameters are not present, return a mock image

examples/image-gen-with-workflow/app/page.tsx

@@ -35,7 +35,7 @@ export default function Page() {
             variant="secondary"
             onClick={() => {
               window.open(
-                'https://github.com/upstash/qstash-js/tree/master/examples/workflow/image-gen-with-workflow',
+                'https://github.com/upstash/workflow-js/tree/master/examples/workflow/image-gen-with-workflow',
                 '_blank',
               )
             }}

examples/image-gen-with-workflow/components/call-workflow.tsx

@@ -108,50 +108,47 @@ export default function CallWorkflow({
       <details className="mt-4 bg-zinc-800 text-white" open={showCode}>
         <summary className="select-none block px-2 py-1 text-sm">Workflow Function</summary>
         <CodeBlock>
-          {`import { serve } from "@upstash/workflow/nextjs"
-import { Redis } from "@upstash/redis"
-import { ImageResponse } from "utils/types"
+          {`import { serve } from '@upstash/workflow/nextjs'
+import { Redis } from '@upstash/redis'
+import { ImageResponse } from 'utils/types'
 
 const redis = Redis.fromEnv()
 
-export const POST = serve<{ prompt: string }>(
-  async (context) => {
-    // get prompt from request
-    const { prompt } = context.requestPayload
-
-    // make the call to Idogram through QStash
-    const result = await context.call<ImageResponse>(
-      'call Ideogram',
-      "https://api.ideogram.ai/generate",
-      "POST",
-      {
+export const { POST } = serve<{ prompt: string }>(async (context) => {
+  // get prompt from request
+  const { prompt } = context.requestPayload
+
+  // make the call to Idogram through QStash
+  const { body: result } = await context.call(
+    'call Ideogram',
+    {
+      url: 'https://api.ideogram.ai/generate',
+      method: 'POST',
+      body: {
         image_request: {
           model: 'V_2',
           prompt,
           aspect_ratio: 'ASPECT_1_1',
           magic_prompt_option: 'AUTO',
         },
       },
-      {
+      headers: {
         'Content-Type': 'application/json',
         'Api-Key': process.env.IDEOGRAM_API_KEY!,
       },
+    }
+  ) as { body: ImageResponse };
+
+  // save the image url in redis
+  // so that UI can access it
+  await context.run('save results in redis', async () => {
+    await redis.set<string>(
+      context.headers.get('callKey')!,
+      result.data[0].url,
+      { ex: 120 }, // expire in 120 seconds
     )
-
-    // save the image url in redis
-    // so that UI can access it
-    await context.run(
-      'save results in redis',
-      async () => {
-        await redis.set<string>(
-          context.headers.get('callKey')!,
-          result.data[0].url,
-          { ex: 120 }, // expire in 120 seconds
-        )
-      }
-    )
-  }
-)`}
+  })
+})`}
         </CodeBlock>
       </details>
     </>

examples/image-gen-with-workflow/package.json

@@ -14,7 +14,7 @@
     "@upstash/qstash": "^2.7.8",
     "@upstash/ratelimit": "^2.0.3",
     "@upstash/redis": "^1.34.0",
-    "@upstash/workflow": "link:../../dist",
+    "@upstash/workflow": "latest",
     "@vercel/functions": "^1.4.1",
     "clsx": "^2.1.1",
     "next": "14.2.13",

examples/nextjs-pages/README.md

@@ -1,4 +1,4 @@
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fupstash%2Fqstash-js%2Ftree%2Fmain%2Fexamples%2Fworkflow%2Fnextjs-pages&env=QSTASH_TOKEN&envDescription=You%20can%20access%20this%20variable%20from%20Upstash%20Console%2C%20under%20QStash%20page.%20&project-name=qstash-workflow-nextjs&repository-name=qstash-workflow-nextjs&demo-title=Upstash%20QStash%20Workflow%20Example&demo-description=A%20Next.js%20application%20utilizing%20QStash%20Workflows)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fupstash%2Fworkflow-js%2Ftree%2Fmain%2Fworkflow%2Fnextjs-pages&env=QSTASH_TOKEN&envDescription=You%20can%20access%20this%20variable%20from%20Upstash%20Console%2C%20under%20QStash%20page.%20&project-name=workflow-nextjs&repository-name=workflow-nextjs&demo-title=Upstash%20Workflow%20Example&demo-description=A%20Next.js%20application%20utilizing%20Upstash%20Workflow)
 
 # Upstash Workflow Nextjs (Pages Router) Example
 
@@ -9,9 +9,9 @@ In the `src/pages/api/path.sh` file, you can find out how one can define endpoin
 ## Development
 
 > [!TIP]
-> 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.
+> You can use [the `bootstrap.sh` script](https://github.com/upstash/workflow-js/tree/main/examples/workflow) to run this example with a local tunnel.
 >
-> Simply set the environment variables as explained below and run the following command in the `qstash-js/examples/workflow` directory:
+> Simply set the environment variables as explained below and run the following command in the `workflow-js/examples/workflow` directory:
 >
 > ```
 > bash bootstrap.sh cloudflare-workers-hono

examples/nextjs-pages/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@upstash/qstash": "latest",
-    "@upstash/workflow": "0.1.1-canary-2",
+    "@upstash/workflow": "latest",
     "clsx": "^2.1.1",
     "next": "14.2.8",
     "react": "^18",

examples/nextjs-pages/src/pages/index.tsx

@@ -84,7 +84,7 @@ function Home() {
               </a>
               <a
                 className="inline-flex items-center gap-1 px-3 py-2 bg-gray-100 rounded-md hover:bg-emerald-100"
-                href="https://github.com/upstash/qstash-js/tree/main/examples/workflow/nextjs"
+                href="https://github.com/upstash/workflow-js/tree/main/examples/workflow/nextjs"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"

examples/nextjs/README.md

@@ -1,4 +1,4 @@
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fupstash%2Fqstash-js%2Ftree%2Fmain%2Fexamples%2Fworkflow%2Fnextjs&env=QSTASH_TOKEN&envDescription=You%20can%20access%20this%20variable%20from%20Upstash%20Console%2C%20under%20QStash%20page.%20&project-name=qstash-workflow-nextjs&repository-name=qstash-workflow-nextjs&demo-title=Upstash%20QStash%20Workflow%20Example&demo-description=A%20Next.js%20application%20utilizing%20QStash%20Workflows)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fupstash%2Fworkflow-js%2Ftree%2Fmain%2Fworkflow%2Fnextjs&env=QSTASH_TOKEN&envDescription=You%20can%20access%20this%20variable%20from%20Upstash%20Console%2C%20under%20QStash%20page.%20&project-name=workflow-nextjs&repository-name=workflow-nextjs&demo-title=Upstash%20Workflow%20Example&demo-description=A%20Next.js%20application%20utilizing%20Upstash%20Workflow)
 
 # Upstash Workflow Nextjs Example
 

examples/nextjs/app/page.tsx

@@ -108,7 +108,7 @@ const Page = () => {
             </a>
             <a
               className="inline-flex items-center gap-1 px-3 py-2 bg-gray-100 rounded-md hover:bg-emerald-100"
-              href="https://github.com/upstash/qstash-js/tree/main/examples/workflow/nextjs"
+              href="https://github.com/upstash/workflow-js/tree/main/examples/workflow/nextjs"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"