Wasp Has a Free Full-Stack Framework — Here's How to Use It

#fullstack #react #webdev #framework

Building a full-stack app means wiring up React, Express, Prisma, auth, email, cron — separately. Wasp does it all in a single config file.

What Is Wasp?

Wasp is a full-stack web framework for React + Node.js. You describe your app in a simple configuration language — Wasp generates the boilerplate (auth, CRUD, jobs, deployment) automatically.

Quick Start

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

The Wasp File

// main.wasp — this IS your app configuration
app MyApp {
  wasp: { version: "^0.14.0" },
  title: "My SaaS",
  auth: {
    userEntity: User,
    methods: {
      email: {},
      google: {},
      github: {},
    },
  },
}

// Database models
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=}

// API routes
route DashboardRoute { path: "/dashboard", to: DashboardPage }
page DashboardPage {
  authRequired: true,
  component: import { Dashboard } from "@src/pages/Dashboard"
}

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

// Cron jobs
job dailyReport {
  executor: PgBoss,
  perform: {
    fn: import { sendReport } from "@src/jobs/report"
  },
  schedule: {
    cron: "0 9 * * *"  // Every day at 9 AM
  }
}

What You Get Automatically

Authentication — email/password, Google, GitHub OAuth
Database — Prisma ORM with PostgreSQL
API layer — type-safe client-server communication
Email — sending via any provider
Cron jobs — background tasks with pg-boss
Deployment — one-command deploy to Fly.io

React Components (Your Code)

// src/pages/Dashboard.tsx
import { useQuery } from 'wasp/client/operations';
import { getTasks } from 'wasp/client/operations';

export function Dashboard() {
  const { data: tasks, isLoading } = useQuery(getTasks);

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

  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>{task.description}</li>
      ))}
    </ul>
  );
}

Why Wasp

Feature	Wasp	Next.js + Prisma	Rails
Auth setup	3 lines	100+ lines	Generator
Type-safe API	Automatic	Manual	No
Cron jobs	Built-in	Manual setup	Built-in
Email	Built-in	Manual	Built-in
Full-stack types	Automatic	Manual	No
Deploy	One command	Manual	Manual