JStack + Appwrite: A Match Made in Heaven for Modern Web Development

If I had a penny for each time a youtuber has launched his own tech stack, I would have 2 pennies, which isn't much but its weird that it happened twice.

I am talking about T3 Stack launched a while back by everyone's favourite Theo, but recently a new player has entered the market called JStack, by Josh who is the lead Devrel at Upstash. To be fair, its not even that recent, but as always I am late to the party I try to give a framework time to mature and gather feedback from community before giving it a shot.

So, did I prefer JStack over T3 stack? Did it have more compatibility with Appwrite, my favourite backend provider? Can it be hosted on Appwrite Sites? Let's find out.

Getting Started

Let's start with initialising the project:

1bunx create-jstack-app@latest

Options selected:

1┌   jStack CLI
2│
3◇  What will your project be called?
4│  testing-jstack-appwrite
5│
6◇  Which database ORM would you like to use?
7│  None
8│
9◇  Should we run 'bun install' for you?
10│  Yes
11
12Using: bun
13
14✔ testing-jstack-appwrite scaffolded successfully!

Let's just quickly run a dev server to see what we get out of the box:

1cd cd testing-jstack-appwrite
2bun dev

Initialising Project

On skipping the ORM option, the stack still sets up a /src/server folder with an example posts router. But it only mocks the DB using an array which does not persist:

1// Mocked DB
2interface Post {
3  id: number;
4  name: string;
5}
6
7const posts: Post[] = [
8  {
9    id: 1,
10    name: "Hello World",
11  },
12];

We skipped the ORM option because Appwrite provides built-in schema management through its SDK, eliminating the need for a separate ORM layer. To get started, let's head over to https://cloud.appwrite.io to set up our project.

If you are using Appwrite for the first time, I highly recommend you check out our Start with Web docs.

Here is a quick setup guide:

• Create a new project -

• Add a new web platform and select Next.js -

• Go to project overview and grab your project's ID and region-specific endpoint:

• Create a new .env file in your project directory and paste in those values:

1NEXT_PUBLIC_APPWRITE_PROJECT_ID=686a271700323696d223
2NEXT_PUBLIC_APPWRITE_ENDPOINT=https://fra.cloud.appwrite.io/v1
3NEXT_PUBLIC_APP_DOMAIN=localhost # we will change it later

• Now, let's initialise the Appwrite SDK in the project using:

1bun add appwrite

This covers up on how to initialize Appwrite in normal Next.js project. Now we need to configure our Appwrite databases according to the project. For this demo, let's create a Posts collection to shift the mock database JStack uses as an example to Appwrite.

Defining Schema

• Go to the Appwrite Console > Databases > Create Database. We will call it main , and keep it' ID as main as well:

• Similarly, create a collection posts and keep its ID as posts.
• Each document in Appwrite already has an unique ID attached to it, so the only attribute we need is name for now:

• Lastly, you will need to define who can access your collection. To learn more about it, check out the docs for Appwrite Permissions. For now, we will set it to any:

Syncing Types

That's it, we are all set with configuration on the Appwrite Console. Now let's set it up in our project. I will also take the help of the Appwrite CLI to help me set up things faster. You can learn more about how to install it by following the installation docs.

Once done, run:

1testing-jstack-appwrite appwrite init project
2
3? How would you like to start? Link directory to an existing project
4? Choose your organization 67610b8ee51f147ca943
5? Choose your Appwrite project. [object Object]
6✓ Success: Project successfully linked. Details are now stored in appwrite.json file.
7Would you like to pull all resources from project you just linked? Yes

Once done, let's utilize the last Types Generation feature to sync our defined types:

1appwrite types src/types
2
3ℹ Info: Detected language: ts
4ℹ Info: Directory: src/types does not exist, creating...
5ℹ Info: Found 1 collections: posts
6ℹ Info: Found 1 attributes across all collections
7ℹ Info: Added types to src/types/appwrite.d.ts
8✓ Success: Generated types for all the listed collections

Result will look something like this:

1import { type Models } from 'appwrite';
2
3/**
4 * This file is auto-generated by the Appwrite CLI.
5 * You can regenerate it by running `appwrite types -l ts src/types`.
6 */
7
8export type Posts = Models.Document & {
9  name: string;
10}

Obviously pretty small for now, but a really helpful feature once the project expands and more collections are defined.

Configuring Code

Final steps are to connect the Appwrite backend with our tech stack. For that let's create a simple appwrite.ts file in src/lib folder:

1import { Client, Databases, ID } from "appwrite";
2
3const client = new Client()
4    .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT!)
5    .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID!);
6
7const databases = new Databases(client);
8
9export { client, databases };

Now, we can modify the original post-router.ts file to use the defined database:

1import { z } from "zod";
2import { j, publicProcedure } from "../jstack";
3import { databases } from "@/lib/appwrite";
4import { type Posts } from "@/types/appwrite";
5import { ID } from "appwrite";
6
7const DATABASE_ID = "main";
8const POSTS_COLLECTION_ID = "posts";
9
10export const postRouter = j.router({
11  recent: publicProcedure.query(async ({ c }) => {
12    const posts = await databases.listDocuments<Posts>(
13      DATABASE_ID,
14      POSTS_COLLECTION_ID,
15    );
16    return c.superjson(posts.documents.at(-1) ?? null);
17  }),
18
19  create: publicProcedure
20    .input(z.object({ name: z.string().min(1) }))
21    .mutation(async ({ c, input }) => {
22      const post = await databases.createDocument<Posts>(
23        DATABASE_ID,
24        POSTS_COLLECTION_ID,
25        ID.unique(),
26        {
27          name: input.name,
28        },
29      );
30
31      return c.superjson(post);
32    }),
33});

And done! Now your JStack application is using Appwrite as its backend provider.

Testing

• Start the dev server if not already by running:

1bun run dev

• Your application should have started on: http://localhost:3000/
• Create a new post.
• You should be able to see it in recent posts:

• Also, the data should be visible in your Appwrite Console:

Deploying your application

Until recently, to deploy your Next.js application, you had pretty low choices. But no more Appwrite Sites. Now, you can have your backend and frontend hosted on Appwrite.

Check out these docs on how to get started with Sites - https://appwrite.io/docs/advanced/self-hosting/sites

Let's deploy your application using Sites:

• Go to Appwrite Console > Sites > Create Site.
• You can upload a tar file directly, or connect to a GitHub repository (I prefer the GitHub option for automatic deployments).
• Select the repository:

• You can keep all the settings as the default ones, just make sure to upload the environment variables we defined earlier:

• Depending on the domain you are assigned / plan to use, you also need to update the APP_DOMAIN variable we defined earlier. For me I will keep it:

1NEXT_PUBLIC_APP_DOMAIN = jstack - appwrite - template.appwrite.network;

• Click on deploy.

And done! Your application should be live 🎉

You can checkout the demo application here - https://jstack-appwrite-template.appwrite.network/

Conclusion

Let's start by answering the question the blog began with: Do I prefer JStack over T3 Stack? I'm sorry, Theo, but I do.

JStack solves the fundamental problems I have always had with Next.js:

• Using Hono instead of Next.js's inbuilt convention for defining API routes.
• Using TanStack query out of the box. Trust me, you should start now if you are not using it.
• Type safe and uses Zod.

The most noticeable difference between T3 Stack and JStack is how light they are, mainly due to the inclusion of the TRPC protocol in T3 Stack. Most projects do not require it, and it makes the code 10x more complicated to maintain, in my opinion.

So, give JStack a shot if you are starting with a new project (or want to spend a weekend migrating your existing stack to it). Huge shoutout to Josh for creating this wonderful stack. And lastly, give Appwrite a chance to be your next all in one cloud platform, both for your backend and frontend needs.

Sources:

• JStack - https://jstack.app/
• Appwrite Docs - https://appwrite.io/docs
• Github repository - https://github.com/ChiragAgg5k/jstack-appwrite-template