Wasp Has a Free API: Build Full-Stack React Apps with a Single Config File

#react #webdev #tutorial #fullstack

What is Wasp?

Wasp is a full-stack web framework that uses a simple DSL (domain-specific language) to define your entire app — routes, pages, auth, database, jobs, APIs — in a single .wasp config file. It generates React + Node.js + Prisma code.

Quick Start

curl -sSL https://get.wasp-lang.dev/installer.sh | sh
wasp new my-app
cd my-app
wasp start

The .wasp Config

app MyApp {
  wasp: { version: "^0.14.0" },
  title: "My SaaS App",
  auth: {
    userEntity: User,
    methods: {
      email: {},
      google: {},
      github: {}
    },
    onAuthFailedRedirectTo: "/login"
  },
  db: { system: PostgreSQL }
}

// Routes
route HomeRoute { path: "/", to: HomePage }
route DashboardRoute { path: "/dashboard", to: DashboardPage }

// Pages
page HomePage {
  component: import { HomePage } from "@src/pages/Home"
}
page DashboardPage {
  authRequired: true,
  component: import { DashboardPage } from "@src/pages/Dashboard"
}

// Database entities
entity User {=psl
  id    Int     @id @default(autoincrement())
  email String  @unique
  tasks Task[]
psl=}

entity Task {=psl
  id          Int     @id @default(autoincrement())
  description String
  isDone      Boolean @default(false)
  userId      Int
  user        User    @relation(fields: [userId], references: [id])
psl=}

// Operations
query getTasks {
  fn: import { getTasks } from "@src/queries",
  entities: [Task]
}

action createTask {
  fn: import { createTask } from "@src/actions",
  entities: [Task]
}

// Background jobs
job emailReport {
  executor: PgBoss,
  perform: {
    fn: import { sendReport } from "@src/jobs/emailReport"
  },
  schedule: {
    cron: "0 9 * * 1" // Every Monday at 9 AM
  }
}

// API routes
api stripeWebhook {
  fn: import { stripeWebhook } from "@src/apis/stripe",
  httpRoute: (POST, "/api/stripe-webhook"),
  auth: false
}

That single file defines: auth, database, routes, queries, jobs, and API endpoints.

Server Operations

// src/queries.ts
export const getTasks = async (args, context) => {
  return context.entities.Task.findMany({
    where: { userId: context.user.id },
    orderBy: { id: "desc" },
  });
};

// src/actions.ts
export const createTask = async ({ description }, context) => {
  return context.entities.Task.create({
    data: {
      description,
      userId: context.user.id,
    },
  });
};

React Components

import { useQuery, useAction } from "wasp/client/operations";
import { getTasks, createTask } from "wasp/client/operations";

export function DashboardPage() {
  const { data: tasks, isLoading } = useQuery(getTasks);
  const createTaskFn = useAction(createTask);

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <h1>My Tasks</h1>
      <button onClick={() => createTaskFn({ description: "New task" })}>
        Add Task
      </button>
      {tasks?.map(task => (
        <div key={task.id}>{task.description}</div>
      ))}
    </div>
  );
}

Built-in Auth

import { LoginForm, SignupForm } from "wasp/client/auth";

export function LoginPage() {
  return <LoginForm />;
}

export function SignupPage() {
  return <SignupForm />;
}

Full auth with email/password, Google, GitHub — zero code.

Deploy

wasp deploy fly launch my-app mia

One command deploys to Fly.io with database.

Wasp vs Alternatives

Feature	Wasp	Next.js	Remix	T3 Stack
Full-stack config	.wasp file	Manual	Manual	Manual
Auth	Built-in	Manual	Manual	NextAuth
Database	Prisma (auto)	Manual	Manual	Prisma (manual)
Background jobs	Built-in	Manual	Manual	Manual
Deploy	One command	Manual	Manual	Manual