Creating a new project

Run the following command in your terminal to create a new Wasp project:

wasp new TodoApp

Enter the created directory and run:

cd TodoApp
wasp start

You have just run your app in the development mode!

note

wasp start might take a little bit longer due to the initial setup.

You will be seeing a lot of different output from the client, server and database setting themselves up. Once ready, a new tab should open in your browser at http://localhost:3000, with a simple placeholder page:

We just set the foundations of our app! We don't have yet the features to show it, but Wasp has already generated for us the full front-end and back-end code of the app. Take a peek at TodoApp/.wasp/out if you are curious and want to see what it looks like!

Taking a closer look at the code

Let's inspect the Wasp project we just created:

.
├── .gitignore
├── main.wasp             # Your wasp code goes here.
├── src
│   ├── client            # Your client code (JS/CSS/HTML) goes here.
│   │   ├── Main.css
│   │   ├── MainPage.jsx
│   │   ├── vite-env.d.ts
│   │   ├── tsconfig.json
│   │   └── waspLogo.png
│   ├── server            # Your server code (Node JS) goes here.
│   │   └── tsconfig.json
│   ├── shared            # Your shared (runtime independent) code goes here .
│   │   └── tsconfig.json
│   └── .waspignore
└── .wasproot

By your code, we mean "the code you write" (as opposed to the code generated by Wasp). Wasp expects you to separate all external code into three folders to make it clear which runtime executes what:

src/server - Contains the code executed on the server (i.e., in Node)
src/client - Contains the code executed on the client (i.e., JS in the browser)
src/shared - Contains the code you want to use on both the client and the server (e.g., runtime-independent utility functions)

You may be wondering what about the rest of the generated files (tsconfig.json and vite-env.d.ts? Your IDE needs them to improve your development experience (i.e., autocompletion, intellisense, etc.), so it's best to leave them alone (for now).

Typescript Support

We've introduced Typescript support in Beta version 0.7.0, but you are free to use JavaScript (js/jsx) or TypeScript (ts/tsx) as you see fit, on a file-by-file basis.

For this tutorial, we will simply use vanilla Javascript and JSX syntax 🍦

If you'd prefer to follow along using TypeScript:

Start by changing MainPage.jsx to MainPage.tsx
For the rest of the tutorial, whenever you want to use TypeScript in a file, just make sure to use the appropriate extensions.

No extra configuration is needed!

To see how to get the most out of Wasp and TypeScript, take a look at our TypeScript doc. It contains a list of all TypeScript features Wasp currently supports.

Let's start with the main.wasp file, which introduces 3 new concepts: app, page and route.

main.wasp
app TodoApp { // Main declaration, defines a new web app.
  wasp: {
    version: "^0.7.0"
  },
  title: "Todo app" // Used as a browser tab title.
}

route RootRoute { path: "/", to: MainPage } // Render page MainPage on url `/` (default url).

page MainPage {
  // We specify that ReactJS implementation of our page can be found in
  // `src/client/MainPage.jsx` (the extension is not important) as a default
  // export (uses standard js import syntax). Use '@client' to reference files
  // inside the src/client folder.
  component: import Main from "@client/MainPage"
}

Let's now take a look at that React component we referenced in the page MainPage { ... } declaration in main.wasp:

src/client/MainPage.jsx
import waspLogo from './waspLogo.png'
import './Main.css'

const MainPage = () => {
  ...
}
export default MainPage

As we can see, this is simply a functional React component that uses the CSS and Wasp logo files sitting next to it in the src/client dir.

This is all the code we need! Wasp quietly takes care of everything else necessary to define, build, and run a web app.

tip

wasp start automatically picks up the changes you make and restarts the app, so keep it running.

Cleaning up

Let's make our first changes!

To prepare the clean slate for building the TodoApp, delete the files Main.css and waspLogo.png from the src/client/ folder (src/shared and src/server are already clean). Wasp needs the tsconfig.json and vite-env.d.ts for IDE support, so it's important to keep them.

Now that src/client contains only tsconfig.json, vite-env.d.ts, and MainPage.jsx let's start by making the MainPage component much simpler:

src/client/MainPage.jsx
const MainPage = () => {
  return <div> Hello world! </div>
}

export default MainPage

At this point, you should see something like this:

Ok, time to take the next step - implementing some real Todo app features!

Taking a closer look at the code​

Cleaning up​

Taking a closer look at the code

Cleaning up