DEV Community

Alex Spinov
Alex Spinov

Posted on

Wasp Has a Free Full-Stack Framework API That Generates React and Node Code

Wasp is a full-stack framework that uses a declarative DSL to generate React + Node.js + Prisma apps. Define your app in a .wasp file, get authentication, CRUD, and deployment for free.

Define Your App

// main.wasp
app TodoApp {
  wasp: { version: "^0.14.0" },
  title: "Todo App",
  auth: {
    userEntity: User,
    methods: { usernameAndPassword: {} }
  }
}

entity User {=psl
  id    Int    @id @default(autoincrement())
  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=}

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

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

route MainRoute { path: "/", to: MainPage }
page MainPage { component: import { MainPage } from "@src/pages/Main" }
Enter fullscreen mode Exit fullscreen mode

Server Logic

// 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 }
  });
};
Enter fullscreen mode Exit fullscreen mode

React Components

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

export function MainPage() {
  const { data: tasks } = useQuery(getTasks);
  const [desc, setDesc] = useState('');

  const handleSubmit = async () => {
    await createTask({ description: desc });
    setDesc('');
  };

  return (
    <div>
      <input value={desc} onChange={e => setDesc(e.target.value)} />
      <button onClick={handleSubmit}>Add Task</button>
      {tasks?.map(t => <div key={t.id}>{t.description}</div>)}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

What You Get for Free

  • Auth (username/password, Google, GitHub OAuth)
  • Type-safe client-server communication
  • Prisma ORM integration
  • One-command deployment to Fly.io
  • Email sending, cron jobs, WebSocket support

Why This Matters

  • 10x less boilerplate: DSL generates the boring parts
  • Full-stack type safety: Server types flow to client
  • Built-in auth: No more rolling your own
  • Deploy in minutes: wasp deploy fly

Need custom full-stack tools or rapid prototyping? I build developer tools. Check out my web scraping actors on Apify or reach out at spinov001@gmail.com for custom solutions.

Top comments (0)