Quick Start

Quick Start Guide

Build your first wexts application in under 5 minutes.

1. Create New Project

bash
npx create-wexts-app my-blog-app
cd my-blog-app
pnpm install

2. Start Development Servers

bash
pnpm dev
✅ Frontend: http://localhost:3000
✅ Backend: http://localhost:5050

3. Create Your First Model

Edit apps/api/prisma/schema.prisma:

schema.prismaprisma
1model Post {
2  id        String   @id @default(cuid())
3  title     String
4  content   String
5  published Boolean  @default(false)
6  authorId  String
7  createdAt DateTime @default(now())
8  updatedAt DateTime @updatedAt
9}

4. Run Migration

bash
cd apps/api
npx prisma migrate dev --name add_posts

5. Generate Service

bash
npx wexts generate service posts

6. Implement Business Logic

apps/api/src/posts/posts.service.tstypescript
1import { Injectable } from '@nestjs/common';
2import { PrismaService } from '../prisma/prisma.service';
3
4@Injectable()
5export class PostsService {
6  constructor(private prisma: PrismaService) {}
7
8  async create(title: string, content: string) {
9    return this.prisma.post.create({
10      data: { title, content, authorId: 'user-1' },
11    });
12  }
13
14  async findAll() {
15    return this.prisma.post.findMany({
16      where: { published: true },
17      orderBy: { createdAt: 'desc' },
18    });
19  }
20}

7. Use in Frontend

apps/web/app/page.tsxtypescript
1'use client';
2
3import { useEffect, useState } from 'react';
4import { useWexts } from '@/lib/wexts-client';
5
6export default function Home() {
7  const [posts, setPosts] = useState([]);
8  const wexts = useWexts();
9
10  useEffect(() => {
11    loadPosts();
12  }, []);
13
14  const loadPosts = async () => {
15    const data = await wexts.posts.findAll();
16    setPosts(data);
17  };
18
19  const createPost = async () => {
20    await wexts.posts.create('My First Post', 'Hello wexts!');
21    loadPosts();
22  };
23
24  return (
25    <div className="p-8">
26      <button onClick={createPost} className="btn">
27        Create Post
28      </button>
29      {posts.map(post => (
30        <div key={post.id} className="mt-4">
31          <h2>{post.title}</h2>
32          <p>{post.content}</p>
33        </div>
34      ))}
35    </div>
36  );
37}

🎉 Congratulations!

You've just built a full-stack application with wexts! Notice how you didn't write any API routes or fetch logic – it's all handled automatically by wexts RPC.

Next Steps