Getting Started

Getting Started with wexts

Build from the verified Wexts 4 starter with generated RPC, a production runtime, and explicit release checks.

Prerequisites

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

Installation

The fastest path is the published Wexts CLI. It creates the verified Hello RPC starter.

terminalbash

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

Project Created!

Development mode starts separate web/API processes. The single-port server is the production wexts start runtime path.

Project Structure

After installation, your project will have the following structure:

plaintext

1my-app/
2├── apps/
3│   ├── web/                  # Next.js frontend
4│   │   ├── app/
5│   │   └── lib/
6│   └── api/                  # NestJS backend
7│       ├── src/
8│       └── tsconfig.json
9├── wexts.runtime.js
10├── pnpm-workspace.yaml
11├── package.json
12└── README.md

Key Features Overview

RPC Auto-Linking

Call backend functions from your frontend with full type safety. Generated from explicit RPC metadata and committed manifest output.

Powerful CLI

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

Type Safety

TypeScript across backend service signatures and frontend calls.

Modern Stack

Built with Next.js 16, React 19, NestJS 11, Fastify 5, and TypeScript 5.9.

Creating Your First Endpoint

Let's create a simple explicitly decorated RPC service. First, create a new service in your backend:

terminalbash

npx wexts generate rpc 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';
2import { RpcMethod, RpcService } from 'wexts/nest';
3
4@Injectable()
5@RpcService({ name: 'hello', requireAuth: false })
6export class HelloService {
7  @RpcMethod()
8  async sayHello(name: string): Promise<string> {
9    return `Hello, ${name}! Welcome to wexts.`;
10  }
11}

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! ✨

The generated client is produced from explicit Wexts RPC metadata. Run wexts generate after adding or changing RPC 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.