fix: use UPSTASH_WORKFLOW_URL in workflow examples

examples/workflow/bootstrap.sh

@@ -20,36 +20,7 @@ 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)
-
-# Append the path argument to the ngrok URL
-if [ "$project_arg" == "nuxt" ]; then
-    full_url="${ngrok_url}/api/${path_arg}"
-else
-    full_url="${ngrok_url}/${path_arg}"
-fi
-
-# Navigate to the parent directory
-cd ../..
-
-
-# Update the URL in the context.ts file
-if [[ "$OSTYPE" == "darwin"* ]]; then
-    sed -i '' "s|this\.url = .*|this.url = '$full_url';|" src/client/workflow/context.ts
-else
-    sed -i "s|this\.url = .*|this.url = '$full_url';|" src/client/workflow/context.ts
-fi
-
-# Install dependencies
-bun install
-
-# Build the project
-bun run build
-
-# Navigate to the examples/workflow directory
-cd examples/workflow/${project_arg}
-
-# Install the local package
-npm install @upstash/qstash@file:../../../dist
+export UPSTASH_WORKFLOW_URL=$ngrok_url
 
 final_path=$ngrok_url?function=$path_arg
 echo "Setup complete. Full URL: $final_path"

examples/workflow/nextjs/app/-call-qstash/route.ts

@@ -8,7 +8,7 @@ export const POST = async (request: NextRequest) => {
 
   try {
     const {messageId} = await client.publishJSON({
-      url: `${baseUrl}/${route}`,
+      url: `${process.env.UPSTASH_WORKFLOW_URL}/${route}`,
       body: payload
     });
 

examples/workflow/nuxt/pages/index.vue

@@ -3,15 +3,6 @@
     <div class="bg-white p-6 rounded shadow-md w-full max-w-md">
       <h1 class="text-xl font-bold mb-4">Send Request</h1>
 
-      <div class="mb-4">
-        <label class="block text-gray-700">Base URL deployment URL:</label>
-        <input
-          v-model="baseUrl"
-          type="text"
-          class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-        />
-      </div>
-
       <div class="mb-4">
         <label class="block text-gray-700">Route:</label>
         <select
@@ -48,32 +39,23 @@
 <script setup>
 import { ref } from 'vue';
 
-const baseUrl = ref('http://localhost:3000');
 const requestBody = ref('{"date":123,"email":"[email protected]","amount":10}');
 const loading = ref(false);
 const route = ref('path');
 const routes = ['path', 'sleep', 'sleepWithoutAwait', 'northStarSimple', 'northStar'];
 
-// Ensure baseUrl doesn't have a trailing slash
-watch(baseUrl, (newVal) => {
-  if (newVal.endsWith('/')) {
-    baseUrl.value = newVal.replace(/\/$/, '');
-  }
-});
-
 const handleSend = async () => {
   loading.value = true;
-  const url = `${baseUrl.value}/api/callQstash`;
+  const url = "/api/callQstash";
   try {
     const response = await fetch(url, {
       headers: {
         'Content-Type': 'application/json'
       },
       method: "POST",
         body: JSON.stringify({
-          baseUrl: baseUrl.value,
           route: route.value,
-          payload: requestBody.value
+          payload: JSON.parse(requestBody.value)
         })
     });
     console.log('Response:', await response.json());

examples/workflow/nuxt/server/api/callQstash.ts

@@ -5,11 +5,11 @@ import { defineEventHandler, readBody } from "h3";
 const client = new Client({ baseUrl: process.env.QSTASH_URL!, token: process.env.QSTASH_TOKEN! });
 
 export default defineEventHandler(async (event: H3Event) => {
-  const { baseUrl, route, payload } = await readBody(event) as { baseUrl: string, route: string, payload: unknown };
+  const { route, payload } = await readBody(event) as { route: string, payload: unknown };
 
   try {
     const { messageId } = await client.publishJSON({
-      url: `${baseUrl}/api/${route}`,
+      url: `${process.env.UPSTASH_WORKFLOW_URL}/api/${route}`,
       body: payload,
     });
 

examples/workflow/solidjs/src/routes/-call-qstash.ts

@@ -5,10 +5,10 @@ const client = new Client({ baseUrl: process.env.QSTASH_URL!, token: process.env
 
 export const POST: APIHandler = async (event: APIEvent) => {
   try {
-    const { baseUrl, route, payload } = await event.request.json();
+    const { route, payload } = await event.request.json();
 
     const { messageId } = await client.publishJSON({
-      url: `${baseUrl}/${route}`,
+      url: `${process.env.UPSTASH_WORKFLOW_URL}/${route}`,
       body: payload
     });
 

examples/workflow/solidjs/src/routes/index.tsx

@@ -1,34 +1,24 @@
 import { createSignal, createEffect } from 'solid-js';
 
 const LandingPage = () => {
-  const [baseUrl, setBaseUrl] = createSignal("http://localhost:3000");
   const [requestBody, setRequestBody] = createSignal('{"date":123,"email":"[email protected]","amount":10}');
   const [route, setRoute] = createSignal("path");
   const [loading, setLoading] = createSignal(false);
 
-  // Ensure baseUrl doesn't have a trailing slash
-  createEffect(() => {
-    const url = baseUrl();
-    if (url.endsWith('/')) {
-      setBaseUrl(url.replace(/\/$/, ''));
-    }
-  });
-
   const routes = ['path', 'sleep', 'sleepWithoutAwait', 'northStarSimple', 'northStar'];
 
   const handleSend = async () => {
     setLoading(true);
-    const url = `${baseUrl()}/-call-qstash`;
+    const url = "/-call-qstash";
     try {
       const response = await fetch(url, {
         headers: {
           'Content-Type': 'application/json'
         },
         method: "POST",
         body: JSON.stringify({
-          baseUrl: baseUrl(),
           route: route(),
-          payload: requestBody(),
+          payload: JSON.parse(requestBody()),
         })
       });
       console.log('Response:', await response.json());
@@ -44,16 +34,6 @@ const LandingPage = () => {
       <div className="bg-white p-6 rounded shadow-md w-full max-w-md">
         <h1 className="text-xl font-bold mb-4">Send Request</h1>
 
-        <div className="mb-4">
-          <label className="block text-gray-700">Base URL (replace with deployment URL):</label>
-          <input
-            type="text"
-            value={baseUrl()}
-            onInput={(e) => setBaseUrl(e.currentTarget.value)}
-            className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-          />
-        </div>
-
         <div className="mb-4">
           <label className="block text-gray-700">Route:</label>
           <select

examples/workflow/sveltekit/src/routes/+page.svelte

@@ -3,33 +3,24 @@
   import { page } from '$app/stores';
   import { writable } from 'svelte/store';
 
-  let baseUrl = writable("http://localhost:3000");
   let requestBody = writable('{"date":123,"email":"[email protected]","amount":10}');
   let loading = writable(false);
   let route = writable('path');
 
-  // Ensure baseUrl doesn't have a trailing slash
-  baseUrl.subscribe(value => {
-    if (value.endsWith('/')) {
-      baseUrl.set(value.replace(/\/$/, ''));
-    }
-  });
-
   const routes = ['path', 'sleep', 'sleepWithoutAwait', 'northStarSimple', 'northStar'];
 
   const handleSend = async () => {
     loading.set(true);
-    const url = `${$baseUrl}/-call-qstash`;
+    const url = "/-call-qstash";
     try {
       const response = await fetch(url, {
         headers: {
           'Content-Type': 'application/json'
         },
         method: "POST",
         body: JSON.stringify({
-          baseUrl: $baseUrl,
           route: $route,
-          payload: $requestBody
+          payload: JSON.parse($requestBody)
         })
       });
       console.log('Response:', await response.json());
@@ -45,15 +36,6 @@
   <div class="bg-white p-6 rounded shadow-md w-full max-w-md">
     <h1 class="text-xl font-bold mb-4">Send Request</h1>
 
-    <div class="mb-4">
-      <label class="block text-gray-700">Base URL (replace with deployment URL):</label>
-      <input
-        type="text"
-        bind:value={$baseUrl}
-        class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-      />
-    </div>
-
     <div class="mb-4">
       <label class="block text-gray-700">Route:</label>
       <select

examples/workflow/sveltekit/src/routes/-call-qstash/+server.ts

@@ -9,11 +9,11 @@ const client = new Client({
 });
 
 export const POST: RequestHandler = async ({ request }) => {
-  const { baseUrl, route, payload } = await request.json() as { baseUrl: string, route: string, payload: unknown };
+  const { route, payload } = await request.json() as { route: string, payload: unknown };
 
   try {
     const { messageId } = await client.publishJSON({
-      url: `${baseUrl}/${route}`,
+      url: `${env.UPSTASH_WORKFLOW_URL}/${route}`,
       body: payload
     });
 

src/client/workflow/serve.ts

@@ -128,6 +128,15 @@ export const serve = <
         })
       : initialWorkflowUrl;
 
+    // log workflow url change
+    if (workflowUrl !== initialWorkflowUrl) {
+      await debug?.log("WARN", "ENDPOINT_START", {
+        warning: `QStash Workflow: replacing the base of the url with "${baseUrl}" and using it as workflow endpoint.`,
+        originalURL: initialWorkflowUrl,
+        updatedURL: workflowUrl,
+      });
+    }
+
     // set url to call in case of failure
     const workflowFailureUrl = failureFunction ? workflowUrl : failureUrl;
 

src/client/workflow/workflow-requests.ts

@@ -97,7 +97,8 @@ export const recreateUserHeaders = (headers: Headers): Headers => {
     const headerLowerCase = header.toLowerCase();
     if (
       !headerLowerCase.startsWith("upstash-workflow-") &&
-      !headerLowerCase.startsWith("x-vercel-")
+      !headerLowerCase.startsWith("x-vercel-") &&
+      !headerLowerCase.startsWith("x-forwarded-")
     ) {
       filteredHeaders.append(header, value);
     }
@@ -324,8 +325,8 @@ export const verifyRequest = async (
   } catch (error) {
     throw new QstashWorkflowError(
       `Failed to verify that the Workflow request comes from QStash: ${error}\n\n` +
-        "Either disable request verification or start the workflow by publishing your request to QStash.\n\n" +
-        "If you want to disable request verification, you should clear env variables QSTASH_CURRENT_SIGNING_KEY and QSTASH_NEXT_SIGNING_KEY"
+        "Trigger the workflow endpoint by publishing your request to QStash instead of calling it directly.\n\n" +
+        "If you want to disable QStash Verification, you should clear env variables QSTASH_CURRENT_SIGNING_KEY and QSTASH_NEXT_SIGNING_KEY"
     );
   }
 };