Skip to main content

Overview

Wasp is a declarative language that recognizes web application-specific terms (e.g. page or route) as words (types) 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.

The basic structure of a Wasp project is:

  • *.wasp file
  • The src/ folder

The src/ folder contains non-Wasp code (JS, CSS, ...). You can structure it however you want, as long as you put it somewhere inside the correct subfolder:

  • The src/server folder - Contains your server code (i.e., executed by Node JS).
  • The src/client folder - Contains your client code (i.e., executed in the browser).
  • The src/shared folder - Contains the code you want to share between the server and the client (e.g., utility functions).

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

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

You can't reference shared code inside the Wasp file, but you can import and use it in all code that lives in src/client or src/server. Use a relative import to do this. For example, the file src/server/something.js can import a shared function from src/shared/utilities.js like this:

import someFunction from '../shared/utilities.js'

// ...

Simple example

We're omitting all pre-generated none-code files Wasp needs to function (e.g., tsconfig.json and .wasproot) and are focusing only on the files you would write yourself:

TodoApp/
  - main.wasp
  - src/
      - server/
        - operations.js
      - client/
        - pages/
          - Main.jsx
      - shared/
main.wasp
app todoApp {
  wasp: {
    version: "^0.6.0"
  },

  title: "ToDo App"
}

route RootRoute { path: "/", to: MainPage }
page MainPage {
  component: import Main from "@client/pages/Main"
}

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

action createTask {
  fn: import { createTask } from "@server/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.

Each of the basic language features is explained in the following sections.