Deploy to Cloudflare Workers

JStack can be deployed to Cloudflare Workers, providing a globally distributed, serverless runtime for your API. This guide will walk you through the deployment process.


Prerequisites

  1. Install the Wrangler CLI

    Terminal

    npm install wrangler@latest -g
  2. Make sure you have an account at Cloudflare


Deployment Steps

  1. Deploy your backend to Cloudflare Workers using wrangler deploy. Enter the path to your appRouter file, by default this is:

    Terminal

    wrangler deploy src/server/index.ts

    The console output will look like this:

    Deploy JStack to Cloudflare Workers
  2. Add the deployment URL to the client:

    lib/client.ts

    import type { AppRouter } from "@/server"
    import { createClient } from "jstack"
     
    export const client = createClient<AppRouter>({
      baseUrl: `${getBaseUrl()}/api`,
    })
     
    function getBaseUrl() {
      // 👇 In production, use the production worker
      if (process.env.NODE_ENV === "production") {
        return "https://<YOUR_DEPLOYMENT>.workers.dev"
      }
     
      // 👇 Locally, use wrangler backend
      return `http://localhost:8080`
    }

Environment Variables

Make sure your Worker has the necessary environment variables configured. Either enter one at a time or update them in bulk:

Terminal

wrangler secret put <KEY>

Production Deployment

When you deploy your front-end application:

  • Deploy to your preferred hosting platform (Vercel, Netlify, etc.)
  • After adding the deployment URL to your lib/client.ts file, your frontend will automatically connect to your Worker

Common Problems

CORS Configuration

If you are experiencing CORS problems, make sure your Worker is configured correctly:

server/index.ts

import { InferRouterInputs, InferRouterOutputs } from "jstack"
import { postRouter } from "./routers/post-router"
import { j } from "./jstack"
 
const api = j
  .router()
  .basePath("/api")
  .use(j.defaults.cors)
  .onError(j.defaults.errorHandler)
 
const appRouter = j.mergeRouters(api, {
  post: postRouter,
})
 
export type AppRouter = typeof appRouter
 
export default appRouter

→ More about CORS in JStack