Version: 0.11.8

2. Project Structure

After creating a new Wasp project, you'll get a file structure that looks like this:

.
├── .gitignore
├── main.wasp              # Your Wasp code goes here.
├── src
│   ├── client             # Your client code (JS/CSS/HTML) goes here.
│   │   ├── Main.css
│   │   ├── MainPage.jsx
│   │   ├── tsconfig.json
│   │   ├── vite.config.ts
│   │   ├── vite-env.d.ts
│   │   └── waspLogo.png
│   ├── server             # Your server code (Node JS) goes here.
│   │   └── tsconfig.json
│   ├── shared             # Your shared (runtime independent) code goes here.
│   │   └── tsconfig.json
│   └── .waspignore
└── .wasproot

By your code, we mean the "the code you write", as opposed to the code generated by Wasp. Wasp expects you to separate all of your code—which we call external code—into three folders to make it obvious how each file is executed:

src/client: Contains the code executed on the client, in the browser.
src/server: Contains the code executed on the server, with Node.
src/shared: Contains code that may be executed on both the client and server.

Many of the other files (tsconfig.json, vite-env.d.ts, etc.) are used by your IDE to improve your development experience with tools like autocompletion, intellisense, and error reporting. The file vite.config.ts is used to configure Vite, Wasp's build tool of choice. We won't be configuring Vite in this tutorial, so you can safely ignore the file. Still, if you ever end up wanting more control over Vite, you'll find everything you need to know in custom Vite config docs.

TypeScript Support

Wasp supports TypeScript out of the box, but you are free to choose between or mix JavaScript and TypeScript as you see fit.

We'll provide you with both JavaScript and TypeScript code in this tutorial. Code blocks will have a toggle to switch between vanilla 🍦 JavaScript and TypeScript.

The most important file in the project is main.wasp. Wasp uses the configuration within it to perform its magic. Based on what you write, it generates a bunch of code for your database, server-client communication, React routing, and more.

Let's look a bit closer at main.wasp.

`main.wasp`

This file, written in our Wasp configuration language, defines your app and lets Wasp take care a ton of features to your app for you. The file contains several declarations which, together, describe all the components of your app.

The default Wasp file generated via wasp new on the previous page looks like:

JavaScript
TypeScript

main.wasp
app TodoApp {
  wasp: {
    version: "^0.11.6" // Pins the version of Wasp to use.
  },
  title: "Todo app" // Used as the browser tab title. Note that all strings in Wasp are double quoted!
}

route RootRoute { path: "/", to: MainPage }

page MainPage {
  // We specify that the React implementation of the page is the default export
  // of `src/client/MainPage.jsx`. This statement uses standard JS import syntax.
  // Use `@client` to reference files inside the `src/client` folder.
  component: import Main from "@client/MainPage.jsx"
}

main.wasp
app TodoApp {
  wasp: {
    version: "^0.11.6" // Pins the version of Wasp to use.
  },
  title: "Todo app" // Used as the browser tab title. Note that all strings in Wasp are double quoted!
}

route RootRoute { path: "/", to: MainPage }

page MainPage {
  // We specify that the React implementation of the page is the default export
  // of `src/client/MainPage.tsx`. This statement uses standard JS import syntax.
  // Use `@client` to reference files inside the `src/client` folder.
  component: import Main from "@client/MainPage.tsx"
}

This file uses three declaration types:

app: Top-level configuration information about your app.
route: Describes which path each page should be accessible from.
page: Defines a web page and the React component that will be rendered when the page is loaded.

In the next section, we'll explore how route and page work together to build your web app.

main.wasp​

`main.wasp`