Overview

Wasp is a declarative language that recognizes web application-specific terms (e.g. page or route) as words of the language.

The basic idea is that the higher-level overview of an app (e.g. pages, routes, database model, ...) is defined in *.wasp files (for now just one), while the specific parts (web components, back-end queries, ...) are implemented in specific non-wasp technologies (React, NodeJS, Prisma) and then referenced in the *.wasp files.

Basic structure of a Wasp project is:

*.wasp file
ext/ directory -> Contains non-wasp code (JS, CSS, ...) structured in any way you want.

When referencing code from ext/ in your *.wasp file, you do it as @ext/relative/path/of/file/in/ext/dir.

Simple example

TodoApp/
  - main.wasp
  - ext/
    - operations.js
    - pages/
      - Main.js

main.wasp

app todoApp {
  title: "ToDo App"
}

route "/" -> page Main
page Main {
  component: import Main from "@ext/pages/Main"
}

query getTasks {
  fn: import { getTasks } from "@ext/operations.js",
  entities: [Task]
}

action createTask {
  fn: import { createTask } from "@ext/operations.js",
  entities: [Task]
}

entity Task {=psl
  id          Int     @id @default(autoincrement())
  description String
  isDone      Boolean @default(false)
psl=}

You can check out a full working example here.

In the following sections each of these basic language elements is explained.

Simple example#

Simple example