mirror of
https://github.com/wasp-lang/wasp.git
synced 2024-11-29 12:53:32 +03:00
66 lines
2.2 KiB
Markdown
66 lines
2.2 KiB
Markdown
|
---
|
||
|
|
title: 1. Creating a New Project
|
||
|
|
---
|
||
|
|
|
||
|
|
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||
|
|
|
||
|
|
:::info
|
||
|
|
You'll need to have the latest version of Wasp installed locally to follow this tutorial. If you haven't installed it yet, check out the [QuickStart](/docs/quick-start) guide!
|
||
|
|
:::
|
||
|
|
|
||
|
|
In this section, we'll guide you through the process of creating a simple Todo app with Wasp. In the process, we'll take you through the most important and useful features of Wasp.
|
||
|
|
|
||
|
|
<img alt="How Todo App will work once it is done"
|
||
|
|
src={useBaseUrl('img/todo-app-tutorial-intro.gif')}
|
||
|
|
style={{ border: "1px solid black" }}
|
||
|
|
/>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
If you get stuck at any point (or just want to chat), reach out to us on [Discord](https://discord.gg/rzdnErX) and we will help you!
|
||
|
|
|
||
|
|
You can find the complete code of the app we're about to build [here](https://github.com/wasp-lang/wasp/tree/release/examples/tutorials/TodoApp).
|
||
|
|
|
||
|
|
:::tip See Wasp In Action
|
||
|
|
Prefer videos? We have a YouTube tutorial whick walks you through building this Todo app step by step. [Check it out here!](https://youtu.be/R8uOu6ZEr5s).
|
||
|
|
|
||
|
|
We've also set up an in-browser dev environment for you on Gitpod which allows you to view and edit the completed app with no installation required.
|
||
|
|
|
||
|
|
<p align="center">
|
||
|
|
<a href="https://gitpod.io/#https://github.com/wasp-lang/gitpod-template">
|
||
|
|
<img src="https://gitpod.io/button/open-in-gitpod.svg" />
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
:::
|
||
|
|
|
||
|
|
## Creating a Project
|
||
|
|
|
||
|
|
To setup a new Wasp project, run the following command in your terminal
|
||
|
|
|
||
|
|
```sh
|
||
|
|
$ wasp new TodoApp
|
||
|
|
```
|
||
|
|
|
||
|
|
Enter the newly created directory and start the development server:
|
||
|
|
|
||
|
|
```sh
|
||
|
|
$ cd TodoApp
|
||
|
|
$ wasp start
|
||
|
|
```
|
||
|
|
|
||
|
|
:::note
|
||
|
|
`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:
|
||
|
|
|
||
|
|
<img alt="Screenshot of new Wasp app"
|
||
|
|
src={useBaseUrl('img/wasp-new-screenshot.png')}
|
||
|
|
height="400px"
|
||
|
|
style={{ border: "1px solid black" }}
|
||
|
|
/>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
Wasp has generated for you the full front-end and back-end code the app! Next, we'll take a closer look at how the project is structured.
|