5.3 KiB
| title |
|---|
| 2. Project Structure |
import useBaseUrl from '@docusaurus/useBaseUrl';
After creating a new Wasp project, you'll get a file structure that looks like this:
.
├── .gitignore
├── main.wasp # Your Wasp code goes here.
├── schema.prisma # Your Prisma schema goes here.
├── package.json # Your dependencies and project info go here.
├── 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
The default project uses JavaScript. To use TypeScript, you must manually rename the file
src/MainPage.jsx to src/MainPage.tsx. Restart wasp start after you do this.
No updates to the main.wasp file are necessary - it stays the same regardless of the language you use.
After creating a new Wasp project and renaming the src/MainPage.jsx file, your project should look like this:
.
├── .gitignore
├── main.wasp # Your Wasp code goes here.
├── schema.prisma # Your Prisma schema goes here.
├── package.json # Your dependencies and project info go here.
├── public # Your static files (e.g., images, favicon) go here.
├── src # Your source code (TS/JS/CSS/HTML) goes here.
│ ├── Main.css
// highlight-next-line
│ ├── MainPage.tsx # Renamed from 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.
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.
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. 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.14.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.14.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"
}
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.