mirror of
https://github.com/wasp-lang/wasp.git
synced 2024-12-29 03:53:14 +03:00
142 lines
5.3 KiB
Markdown
142 lines
5.3 KiB
Markdown
---
|
||
title: 2. Project Structure
|
||
---
|
||
|
||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||
|
||
<Tabs groupId="js-ts">
|
||
<TabItem value="js" label="JavaScript">
|
||
|
||
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
|
||
|
||
```
|
||
|
||
</TabItem>
|
||
<TabItem value="ts" label="TypeScript">
|
||
|
||
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:
|
||
|
||
```css
|
||
.
|
||
├── .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
|
||
|
||
```
|
||
|
||
</TabItem>
|
||
</Tabs>
|
||
|
||
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](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).
|
||
|
||
The `schema.prisma` file is where you define your database schema using [Prisma](https://www.prisma.io/). 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:
|
||
|
||
<Tabs groupId="js-ts">
|
||
<TabItem value="js" label="JavaScript">
|
||
|
||
```wasp title="main.wasp"
|
||
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"
|
||
}
|
||
```
|
||
|
||
</TabItem>
|
||
<TabItem value="ts" label="TypeScript">
|
||
|
||
```wasp title="main.wasp"
|
||
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"
|
||
}
|
||
```
|
||
|
||
</TabItem>
|
||
</Tabs>
|
||
|
||
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.
|