DEV Community

Alex Spinov
Alex Spinov

Posted on

Wasp Has a Free Full-Stack Framework That Builds SaaS Apps in Hours

#wasp #saas #react #fullstack

Building a SaaS from scratch means auth, database, email, payments, deployment, and 3 months of boilerplate. Wasp gives you all of this in a declarative config file + React + Node.js.

What Wasp Gives You for Free

  • Auth — email/password, Google, GitHub OAuth (one line each)
  • Database — Prisma + PostgreSQL, auto-migrated
  • Full-stack type safety — operations are typed end-to-end
  • Email sending — built-in with SMTP, SendGrid, Mailgun
  • Jobs — background tasks with retry logic
  • Deployment — one-command deploy to Fly.io
  • SaaS template — Stripe, admin dashboard, landing page included

Quick Start 

curl -sSL https://get.wasp-lang.dev/installer.sh | sh
wasp new my-saas
cd my-saas
wasp start
Enter fullscreen mode Exit fullscreen mode

The Wasp Config File 

// main.wasp — your entire app config
app MySaaS {
  wasp: { version: "^0.14.0" },
  title: "My SaaS",
  auth: {
    userEntity: User,
    methods: {
      email: {},
      google: {},
      gitHub: {}
    },
    onAuthFailedRedirectTo: "/login"
  },
  db: { system: PostgreSQL },
  emailSender: {
    provider: SendGrid
  }
}

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

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

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

Server Operations (Type-Safe) 

// src/queries.ts
import { type GetTasks } from 'wasp/server/operations';

export const getTasks: GetTasks<void, Task[]> = async (args, context) => {
  return context.entities.Task.findMany({
    where: { userId: context.user.id },
    orderBy: { createdAt: 'desc' }
  });
};

// src/actions.ts
import { type CreateTask } from 'wasp/server/operations';

export const createTask: CreateTask<{ title: string }, Task> = async ({ title }, context) => {
  return context.entities.Task.create({
    data: {
      title,
      userId: context.user.id
    }
  });
};
Enter fullscreen mode Exit fullscreen mode

React Client (Auto-Generated Hooks) 

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

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

  return (
    <div>
      <button onClick={() => createTaskFn({ title: 'New task' })}>
        Add Task
      </button>
      {tasks?.map(task => <TaskCard key={task.id} task={task} />)}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

One-Command Deploy 

wasp deploy fly launch my-saas-app mia
Enter fullscreen mode Exit fullscreen mode

Deploys your app + PostgreSQL database to Fly.io.

SaaS Starter Template 

wasp new my-saas -t saas
Enter fullscreen mode Exit fullscreen mode

Includes: Stripe payments, admin dashboard, landing page, blog, analytics, email templates.

Wasp vs Next.js + Auth + Prisma

Feature Wasp DIY (Next.js stack)
Auth setup 3 lines in config NextAuth + hours
Database Declarative Prisma setup manual
Type safety Automatic Manual wiring
Email Built-in Choose + configure
Background jobs Built-in BullMQ + Redis
Deploy 1 command Dockerfile + config
Time to MVP Hours Weeks

The Verdict

Wasp is the fastest path from idea to SaaS. Declare what you need (auth, database, email, jobs), write your React + Node.js logic, deploy in one command. If you're building a SaaS, Wasp saves you weeks of boilerplate.

Need help building production web scrapers or data pipelines? I build custom solutions. Reach out: spinov001@gmail.com

Check out my awesome-web-scraping collection — 400+ tools for extracting web data.

Top comments (0)