Skip to content

Commit

Permalink
Correct errors in tutorial
Browse files Browse the repository at this point in the history
  • Loading branch information
sodic committed Feb 23, 2024
1 parent a5f8c5d commit e023a68
Show file tree
Hide file tree
Showing 6 changed files with 22 additions and 19 deletions.
2 changes: 1 addition & 1 deletion web/docs/tutorial/01-create.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ $ wasp start
`wasp start` will take a bit of time to start the server the first time you run it in a new project.
:::

You will see log messages from the client, server, and database setting themselves up. When everything is ready, a new tab should open in your browser at `http://localhost:3000` with a simple placeholder plage:
You will see log messages from the client, server, and database setting themselves up. When everything is ready, a new tab should open in your browser at `http://localhost:3000` with a simple placeholder page:

<img alt="Screenshot of new Wasp app"
src={useBaseUrl('img/wasp-new-screenshot.png')}
Expand Down
19 changes: 11 additions & 8 deletions web/docs/tutorial/02-project-structure.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,16 @@ After creating a new Wasp project, you'll get a file structure that looks like t
```

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 frontend files and server files into different directories.
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 keept it simple by placing everything in the root `src` directory.
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.
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).
Expand All @@ -54,11 +54,12 @@ Let's take a closer look at `main.wasp`

## `main.wasp`

This file, written in our Wasp configuration language, defines your app and allows Wasp to do _a lot_ of the legwork for you.
`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 `main.wasp` contains _declarations_ defining the components of your app.
The file is a list of _declarations_. Each declaration defines a part of your app.

The default Wasp file generated via `wasp new` on the previous page looks like this:
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">
Expand Down Expand Up @@ -107,7 +108,9 @@ page 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).
`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>
Expand All @@ -118,6 +121,6 @@ This file uses three declaration types:

- **route**: Describes which path each page should be accessible from.

- **page**: Defines a web page and the React component that will gets rendered when the page is loaded.
- **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.
4 changes: 2 additions & 2 deletions web/docs/tutorial/03-pages.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const MainPage = () => {
</TabItem>
</Tabs>

Since Wasp uses React for the frontend, this is a normal functional React component. It also uses the CSS and logo image that sit next to it in the `src` folder.
This is a regular functional React component. It also uses the CSS file and a logo image that sit next to it in the `src` folder.

That is all the code you need! Wasp takes care of everything else necessary to define, build, and run the web app.

Expand Down Expand Up @@ -178,7 +178,7 @@ style={{ border: "1px solid black" }}
/>


You can now delete redundant files: `src/Main.css`, `src/waspLogo.png`, and `src/HelloPage.{jsx,tsx}` (we won't be needing it).
You can now delete redundant files: `src/Main.css`, `src/waspLogo.png`, and `src/HelloPage.{jsx,tsx}` (we won't need this page for the rest of the tutorial).

Since `src/HelloPage.{jsx,tsx}` no longer exists, remove its `route` and `page` declarations from the `main.wasp` file.

Expand Down
2 changes: 1 addition & 1 deletion web/docs/tutorial/04-entities.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Wasp uses [Prisma](https://www.prisma.io) as a way to talk to the database. You
Read more in the [Entities](../data-model/entities) section of the docs.
:::

To update the database schema to include this entity, stop the `wasp start` process, if its running, and run:
To update the database schema to include this entity, stop the `wasp start` process, if it's running, and run:

```sh
wasp db migrate-dev
Expand Down
6 changes: 3 additions & 3 deletions web/docs/tutorial/05-queries.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,10 +99,10 @@ export const getTasks: GetTasks<void, Task[]> = async (args, context) => {
}
```

Wasp automatically generates the types `GetTasks` and `Task` based the contents of `main.wasp`:
Wasp automatically generates the types `GetTasks` and `Task` based on the contents of `main.wasp`:

- `Task` is a type corresponding to the `Task` entity we've defined in `main.wasp`.
- `GetTasks` is a generic type Wasp automatically generated based the `getTasks` Query we've defined in `main.wasp`.
- `GetTasks` is a generic type Wasp automatically generated based on the `getTasks` Query we've defined in `main.wasp`.

You can use these types to specify the Query's input and output types. This Query doesn't expect any arguments (its input type is `void`), but it does return an array of tasks (its output type is `Task[]`).

Expand All @@ -127,7 +127,7 @@ Queries and Actions are NodeJS functions executed on the server.

## Invoking the Query On the Frontend

While we implement Queries on the server, Wasp generates client-side functions that automatically takes care of serialization, network calls, and chache invalidation, allowing you to call the server code like it's a regular function.
While we implement Queries on the server, Wasp generates client-side functions that automatically take care of serialization, network calls, and cache invalidation, allowing you to call the server code like it's a regular function.

This makes it easy for us to use the `getTasks` Query we just created in our React component:

Expand Down
8 changes: 4 additions & 4 deletions web/docs/tutorial/06-actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ Unlike Queries, you can call Actions directly (i.e., without wrapping it with a

<ShowForTs>

Finally, because we've previously annotated the Action's backend implementation with the correct type, Wasp knows that the `createTask` Action expects a value of type `{ description: string }` (try changing the argument and reading the error message). Wasp also knows that a call to the `createTask` Action returns a `Task` but are not using it in this example.
Finally, because we've previously annotated the Action's server implementation with the correct type, Wasp knows that the `createTask` Action expects a value of type `{ description: string }` (try changing the argument and reading the error message). Wasp also knows that a call to the `createTask` Action returns a `Task` but are not using it in this example.

</ShowForTs>

Expand Down Expand Up @@ -265,7 +265,7 @@ style={{ border: "1px solid black" }}
<br />

:::note Automatic Query Invalidation
When you create a new task, the list of tasks is automatically updated to display the new task, even though we have not written any code that would do that! Wasp handles these automatic updates under the hood .
When you create a new task, the list of tasks is automatically updated to display the new task, even though we have not written any code that would do that! Wasp handles these automatic updates under the hood.

When you declared the `getTasks` and `createTask` operations, you specified that they both use the `Task` entity. So when `createTask` is called, Wasp knows that the data `getTasks` fetches may have changed and automatically updates it in the background. This means that **out of the box, Wasp keeps all your queries in sync with any changes made through Actions**.

Expand All @@ -274,11 +274,11 @@ This behavior is convenient as a default but can cause poor performance in large

## A Second Action

Our Todo app isn't finished if you can't mark a task as done!
Our Todo app isn't finished if you can't mark a task as done.

We'll create a new Action to update a task's status and call it from React whenever a task's checkbox is toggled.

Since we've already created one task together, try to create this one yourself. It should be an Action named `updateTask` receives the task's `id` and its `isDone` status. You can see our implementation below.
Since we've already created one task together, try to create this one yourself. It should be an Action named `updateTask` that receives the task's `id` and its `isDone` status. You can see our implementation below.

<Collapse title="Solution">

Expand Down

0 comments on commit e023a68

Please sign in to comment.