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](https://vitejs.dev/guide/), 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](../project/custom-vite-config.md).

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:

<Tabs groupId="js-ts">
<TabItem value="js" label="JavaScript">

```wasp title="main.wasp"
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"
}
```

</TabItem>
<TabItem value="ts" label="TypeScript">

```wasp title="main.wasp"
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"
}
```

</TabItem>
</Tabs>

<ShowForTs>

:::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.
:::

</ShowForTs>

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.