Getting Started

Getting Started with wexts

Everything you need to build your first full-stack application with wexts. Get up and running in minutes.

Prerequisites

Before you begin, make sure you have Node.js 18+ and pnpm installed on your system.

Installation

The fastest way to get started is using the create-wexts-app CLI. This will scaffold a complete full-stack application with all the best practices built-in.

terminalbash

npx wexts my-app
cd my-app
pnpm install
pnpm dev

Project Created!

Your wexts application is now running at http://localhost:3000 (frontend) and http://localhost:5050 (backend).

Project Structure

After installation, your project will have the following structure:

plaintext

1my-app/
2├── apps/
3│   ├── web/                  # Next.js frontend
4│   │   ├── app/
5│   │   ├── components/
6│   │   ├── features/
7│   │   └── lib/
8│   └── api/                  # NestJS backend
9│       ├── src/
10│       ├── prisma/
11│       └── test/
12├── packages/
13│   ├── ui/                   # Shared UI components
14│   ├── shared/               # Shared types & DTOs
15│   └── config/               # Shared config
16├── package.json
17└── turbo.json

Key Features Overview

RPC Auto-Linking

Call backend functions from your frontend with full type safety. No manual API definitions needed.

Powerful CLI

Generate components, services, and modules with a single command. Boost your productivity.

Type Safety

End-to-end TypeScript from database to UI. Catch errors at compile time, not runtime.

Modern Stack

Built with Next.js 16, React 19, NestJS 10. Always using the latest and greatest.

Creating Your First Endpoint

Let's create a simple endpoint to see how RPC auto-linking works. First, create a new service in your backend:

terminalbash

npx wexts generate service hello

This will create a new service file. Update it with your logic:

apps/api/src/hello/hello.service.tstypescript

1import { Injectable } from '@nestjs/common';
2
3@Injectable()
4export class HelloService {
5  async sayHello(name: string): Promise<string> {
6    return `Hello, ${name}! Welcome to wexts.`;
7  }
8}

Now you can call this from your frontend with full type safety:

apps/web/app/page.tsxtypescript

1'use client';
2
3import { useWexts } from '@/lib/wexts-client';
4
5export default function Page() {
6  const wexts = useWexts();
7
8  const handleClick = async () => {
9    // Fully typed! Your IDE knows about sayHello
10    const result = await wexts.hello.sayHello('World');
11    console.log(result); // "Hello, World! Welcome to wexts."
12  };
13
14  return <button onClick={handleClick}>Say Hello</button>;
15}

Magic! ✨

Notice how you didn't need to define any API routes or fetch logic. wexts automatically generates a type-safe SDK for your backend services.

Next Steps

Now that you have a basic understanding, explore these topics:

Need help? Join our Discord community or open an issue on GitHub.