Creating 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 TodoAppwasp start
You have just run your app in the development mode!
note
wasp start
might take a little bit longer, due to the first time 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 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 see how it looks like!
#
Taking a closer look at the codeLet's inspect Wasp project that we just created:
TodoApp/โโโ main.wasp # Here goes our Wasp code.โโโ ext/ # Here goes our (external) JS/CSS/HTML/... code.โ โโโ MainPage.jsโ โโโ Main.cssโ โโโ waspLogo.pngโโโ .gitignoreโโโ .wasproot
Let's start with the main.wasp
file, which introduces 3 new concepts:
app,
page and
route.
app TodoApp { // Main declaration, defines a new web app. 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 `ext/MainPage.js` as a default export (uses standard // js import syntax). component: import Main from "@ext/MainPage.js"}
And now to that React component we referenced in the page MainPage { ... }
declaration in main.wasp
:
import React from 'react'import waspLogo from './waspLogo.png'import './Main.css'
const MainPage = () => { ...}export default MainPage
As we can see, this is just a simple functional React component, using the CSS and Wasp logo files that are next to it.
This is all the code! Wasp in the background takes care of everything else needed 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 upLet's make our first changes!
To prepare the clean slate for building the TodoApp, delete all the files from ext/
dir except for MainPage.js
, and let's also make MainPage
component much simpler:
import React from 'react'
const MainPage = () => { return <div> Hello world! </div>}export default MainPage
At this point, you should be seeing something like

Ok, next step, some real Todo app features!