Sui dApp Starter Template

This dApp was created using @mysten/create-dapp that sets up a basic React Client dApp using the following tools:

• React as the UI framework
• TypeScript for type checking
• Vite for build tooling
• Radix UI for pre-built UI components
• ESLint for linting
• @mysten/dapp-kit for connecting to wallets and loading data
• pnpm for package management

Deploying your Move code

Install Sui cli

Before deploying your move code, ensure that you have installed the Sui CLI. You can follow the Sui installation instruction to get everything set up.

This template uses devnet by default, so we'll need to set up a devnet environment in the CLI:

sui client new-env --alias devnet --rpc https://fullnode.devnet.sui.io:443
sui client switch --env devnet

If you haven't set up an address in the sui client yet, you can use the following command to get a new address:

sui client new-address secp256k1

This well generate a new address and recover phrase for you. You can mark a newly created address as you active address by running the following command with your new address:

sui client switch --address 0xYOUR_ADDRESS...

We can ensure we have some Sui in our new wallet by requesting Sui from the faucet (make sure to replace the address with your address):

curl --location --request POST 'https://faucet.devnet.sui.io/gas' \
--header 'Content-Type: application/json' \
--data-raw '{
    "FixedAmountRequest": {
        "recipient": "<YOUR_ADDRESS>"
    }
}'

Publishing the move package

The move code for this template is located in the move directory. To publish it, you can enter the move directory, and publish it with the Sui CLI:

cd move
sui client publish --gas-budget 100000000 counter

In the output there will be an object with a "packageId" property. You'll want to save that package ID to the src/constants.ts file as PACKAGE_ID:

export const DEVNET_COUNTER_PACKAGE_ID = "<YOUR_PACKAGE_ID>";

Now that we have published the move code, and update the package ID, we can start the app.

Starting your dApp

To install dependencies you can run

pnpm install

To start your dApp in development mode run

pnpm dev

Building

To build your app for deployment you can run

pnpm build