Skip to main content
Version: Next

2. Project Structure

By default, Wasp will create a TypeScript project. We recommend using TypeScript in new projects, and you can always mix-and-match TypeScript and JavaScript files.

To use JavaScript in the main page, you must manually rename the file src/MainPage.tsx to src/MainPage.jsx. Restart wasp start after you do this.

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

After creating a new Wasp project and renaming the src/MainPage.tsx file, your project should look like this:

.
├── main.wasp.ts  # Your Wasp Spec goes here.
├── package.json  # Your dependencies and project info go here.
├── public        # Your static files (e.g., images, favicon) go here.
│   └── favicon.ico
├── schema.prisma # Your database models go here.
├── src           # Your source code (JS/React/Node.js) goes here.
│   ├── Main.css
│   ├── MainPage.jsx
│   ├── assets
│   │   └── logo.svg
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.src.json
├── tsconfig.wasp.json
└── vite.config.ts

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.

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, tsconfig.src.json, tsconfig.wasp.json, vite-env.d.ts, 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 customizing the Vite setup 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.

The schema.prisma file is where you define your database schema using Prisma. We'll cover this a bit later in the tutorial.

The most important file in the project is main.wasp.ts. 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.ts

main.wasp.ts​

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

The file exports your app's top-level configuration and a collection of specifications. Each one defines a Route, Page, Query, Action, or other features provided by Wasp.

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

main.wasp.ts
import { app, page, route } from "@wasp.sh/spec"
// This is a reference to your MainPage component.
// Read more about how Wasp references your code in the section below.
import { MainPage } from "./src/MainPage" with { type: "ref" }

export default app({
  name: "TodoApp",
  wasp: {
    version: "^0.24", // Pins the version of Wasp to use.
  },
  title: "TodoApp", // Used as the browser tab title.
  head: [
    "<link rel='icon' href='/favicon.ico' />",
  ],
  // Add your specs here so Wasp knows to register them.
  spec: [
    route("RootRoute", "/", page(MainPage)),
  ],
})

Referencing code from src​

When main.wasp.ts needs to point to your React components or Node.js functions, it uses imports like this:

import { MainPage } from "./src/MainPage" with { type: "ref" }

Notice the with { type: "ref" } part at the end of the import statement. This tells Wasp to treat the import as a reference to your app's code, without running the imported code. For more details and examples, see reference imports.

Specifications​

This Wasp app uses three specifications:

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