Getting started

The TypeScript templates (opens in a new tab) are provided by Lattice (opens in a new tab).

Prerequisites

To install the TypeScript templates you need:

• Node.js v18 (opens in a new tab)
• git (opens in a new tab)
• Foundry (opens in a new tab)
• pnpm (opens in a new tab)

  sudo npm install -g pnpm

Installation

To run any of the TypeScript templates:

1. Create the template with pnpm. If you need, replace tutorial with your application name.

   pnpm create mud@next tutorial

   Note: The @next is only necessary until MUD v2.0 is officially released.

2. Select the template:

   • Vanilla
   • React-ECS
   • React
   • Phaser
   • Three.js

3. Start the development server, which updates automatically when you modify files.

   cd tutorial
   pnpm dev

   You may receive this error message:

   [vite] Internal server error: Failed to resolve import "contracts/out/IWorld.sol/IWorld.abi.json" from "src/mud/setupNetwork.ts"

   If so, ignore it. It simply means the contracts package hasn't created the IWorld.abi.json file, which the client package needs, yet. As soon as it is created, the client package will use it.

Using the templates

Code organization

Other than a few utility files, most of the code is in two packages:

• packages/contracts contains the onchain part of the application.
• packages/client contains the offchain part of the application, the user interface. The app runs in the user's browser, in development it is served from a vite (opens in a new tab) server. The content of this package varies based on the template used.

Vanilla and react-ecs

The applications in these two templates is the same. You have an onchain counter and you can press Increment to increment it.

Three.js

In this application the position of an object, the big green cube, is stored onchain. In the user interface you can move that cube using the arrow keys, space, and ctrl.