Skip to main content
Version: 0.14.0

1. Creating a New Project

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 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.

How Todo App will work once it is done

If you get stuck at any point (or just want to chat), reach out to us on Discord and we will help you!

You can find the complete code of the app we're about to build here.

Creating a Project

To setup a new Wasp project, run the following command in your terminal

$ wasp new TodoApp

Enter the newly created directory and start the development server:

$ cd TodoApp
$ 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 page:

Screenshot of new Wasp app

Wasp has generated for you the full front-end and back-end code of the app! Next, we'll take a closer look at how the project is structured.

A note on supported languages

Wasp supports both JavaScript and TypeScript out of the box, but you are free to choose between or mix JavaScript and TypeScript as you see fit.

We'll provide you with both JavaScript and TypeScript code in this tutorial. Code blocks will have a toggle to switch between vanilla JavaScript and TypeScript.

Try it out:

Welcome to JavaScript!

You are now reading the JavaScript version of the docs. The site will remember your preference as you switch pages.

You'll have a chance to change the language on every code snippet - both the snippets and the text will update accordingly.