jstack icon indicating copy to clipboard operation
jstack copied to clipboard

This isn't an issue just a show and tell using Jstack

Open la-niina opened this issue 5 months ago • 0 comments

I used Jstack of recent and I have to say it worked like a champ, I built my start up company website using it https://pherus.org/

TECH STACK

  • Jstack - The current nextjs 15+ structure
  • Opennextjs - for Cloudflare node runtime support
  • bun or pnpm - I switch between both not big differences

Structure

  • Using D1 database with drizzle - but had to change to better-sqlite3 to support D1 in drizzle orm
  • Used R2 bucket - This one is pretty much simple to implement & just added it to D1 but more as a reference
  • Used other Cloudflare features but the two are the most important for my case - I have kv and ai

Conclusion

I think this is the stack have truly been looking for and it just fits like a glove, It simplifies the implementations it took me 8 hours to get everything up and running.

Hosting

The website is fully hosted on Cloudflare workers everything is basically on Cloudflare workers the domain, web, database and storage. I will definitely add the Jstack reference for the credits because I am very grateful.

Plans

I do plan to contribute but as well also wish to make a branch out of it, I have features am planning to add to the current website It's still lucking a number of CMS structures that I need on it. I also plan to create an entire hosting platform, like vercel for studies purposes or actual products using jstack.

Folder structure

VS CODE

import { jstack } from "jstack"
import * as schema from "./db/schema"
import { drizzle } from "drizzle-orm/d1"
import { getCloudflareContext } from "@opennextjs/cloudflare"

interface Env {
  Bindings: CloudflareEnv // This is mostly pointless It wont work for some reason
}

export const j = jstack.init<Env>()

/**
 * Type-safely injects database into all procedures
 * @see https://jstack.app/docs/backend/middleware
 * 
 * For deployment to Cloudflare Workers
 * @see https://developers.cloudflare.com/workers/tutorials/postgres/
 */
const databaseMiddleware = j.middleware(async ({ c, next }) => {
  const { env } = await getCloudflareContext({ async: true }) // replacement for the above binding 
  const db = drizzle(env.DB, {
    schema: { ...schema }
  })
  return await next({ db, env }) // pass it to your ctx publicProcedure eg ({ ctx: { env }, c, input })
})

/**
 * Public (unauthenticated) procedures
 *
 * This is the base piece you use to build new queries and mutations on your API.
 */
export const publicProcedure = j.procedure.use(databaseMiddleware)

la-niina avatar Jul 09 '25 20:07 la-niina