/mvx-dapp-template

dApp template for MultiversX

Primary LanguageTypeScriptMIT LicenseMIT

MultiversX dApp Template

This template makes it easy to quickly get started building dApps on MultiversX, providing the basics for MultiversX authentication and transaction signing.

See Dapp Template for a live demo.

Getting Started

The dapp is a client side only project built using React + Vite and it uses the ping-pong smart contract created and maintained by the MultiversX team.

1. Requirements

Before starting, make sure you have the minimum requirements on your workstation.

Minimum

  • An up-to-date version Yarn (or npm)
  • An up-to-date version of NodeJS (tested on v18.10.0)

Optional

2. Setup

2.1 Install the dependencies

From a terminal, navigate to the project folder and run:

$ yarn

2.2. Configure your environment variables (optional)

For quickly testing the app on devnet, you can use the default environment values.

In case you want to test the app on testnet or mainnet, you will have to deploy the ping-pong contract there and update the environment files accordingly.

The environment files are located in the /src/app/environment/env folder.

You can generate a WalletConnect projectId here for free, and you can find the code for the ping-pong smart contract here.

3. Run the app

3.1. For development

From a terminal, navigate to the project folder and run one of the following commands, depending on which environment you want to use:

#Devnet
$ yarn run start:devnet

#Testnet
$ yarn run start:testnet

#Mainnet
$ yarn run start:mainnet

This will start the React app in development mode, using the configs found in the environment files. Open http://localhost:3000 to view it in the browser.

3.2 Build for testing and production use

From a terminal, navigate to the project folder and run one of the following commands, depending on which environment you want to build for:

#Devnet
$ yarn run build:devnet

#Testnet
$ yarn run build:testnet

#Mainnet
$ yarn run build:mainnet

4. Build something awesome ⚡️

5.️ Stay in touch