Skip to content

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

@la-niina

Description

@la-niina

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions