wasp/web/docs/tutorial/02-project-structure.md

title
2. Project Structure

import useBaseUrl from '@docusaurus/useBaseUrl'; import { ShowForTs } from '@site/src/components/TsJsHelpers';

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

.
├── .gitignore
├── main.wasp          # Your Wasp code goes here.
├── package.json       # Your dependencies and project info go here.
├── package-lock.json
├── public             # Your static files (e.g., images, favicon) go here.
├── src                # Your source code (TS/JS/CSS/HTML) goes here.
│   ├── Main.css
│   ├── MainPage.jsx
│   ├── vite-env.d.ts
│   └── waspLogo.png
├── tsconfig.json
├── vite.config.ts
├── .waspignore
└── .wasproot

By your code, we mean the "the code you write", as opposed to the code generated by Wasp. Wasp allows you to organize and structure your code however you think is best - there's no need to separate client files and server files into different directories.

:::note We'd normally recommend organizing code by features (i.e., vertically).

However, since this tutorial contains only a handful of files, there's no need for fancy organization. We'll keep it simple by placing everything in the root src directory. :::

Many other files (e.g., tsconfig.json, vite-env.d.ts, .wasproot, etc.) help Wasp and the IDE improve your development experience with autocompletion, IntelliSense, and error reporting.

The vite.config.ts file 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.

There's no need to spend more time discussing all the helper files. They'll silently do their job in the background and let you focus on building your app.

:::note 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 take a closer look at main.wasp

main.wasp

main.wasp is your app's definition file. It defines the app's central components and helps Wasp to do a lot of the legwork for you.

The file is a list of declarations. Each declaration defines a part of your app.

The default main.wasp file generated with wasp new on the previous page looks like this:

app TodoApp {
  wasp: {
    version: "^0.12.0" // Pins the version of Wasp to use.
  },
  title: "TodoApp" // 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 exported from
  // `src/MainPage.jsx`. This statement uses standard JS import syntax.
  // Use `@src` to reference files inside the `src` folder.
  component: import { MainPage } from "@src/MainPage"
}

app TodoApp {
  wasp: {
    version: "^0.12.0" // Pins the version of Wasp to use.
  },
  title: "TodoApp" // 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 exported from
  // `src/MainPage.tsx`. This statement uses standard JS import syntax.
  // Use `@src` to reference files inside the `src` folder.
  component: import { MainPage } from "@src/MainPage"
}

:::caution Using TypeScript The default project uses JavaScript. To use TypeScript, you must rename the file src/MainPage.jsx to src/MainPage.tsx.

No updates to the main.wasp file are necessary - it stays the same regardless of the language you use. :::

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 gets rendered when the page is loaded.

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