Create Aptos Dapp Boilerplate Template

The Boilerplate template provides a starter dapp with all necessary dapp infrastructure and a simple wallet info implementation.

The Boilerplate template provides:

• Folder structure - A pre-made dapp folder structure with frontend and contract folders.
• Dapp infrastructure - All required dependencies a dapp needs to start building on the Aptos network.
• Wallet Info implementation - Pre-made WalletInfo components to demonstrate how one can use to read a connected Wallet info.
• Trasnfer APT implementation - Pre-made transfer component to send APT to an address.
• Message board functionality implementation - Pre-made message component to send and read a message on chain

Generate the Boilerplate template

On your terminal, navigate to the directory you want to work in and run:

npx create-aptos-dapp@latest

Follow the CLI prompts.

Getting started

npm run move:publish

npm run dev

Building the frontend

The boilerplate template utilizes React as the frontend framework and Vite as the development tool, and is styled with Tailwind CSS and shadcn/ui. All dapp components should be added into the components folder and it is recommended to create a page folder to hold all future pages in your project.

Writing a Move contract

The boilerplate template comes with a contract folder that holds all Move smart contract related files. Under the sources folder you will find a *.move file with a super basic implementation of a Move module that stores a message and updates it. This is to help you get started with writing your own Smart Contract.

Smart contract and frontend communication

For a frontend to submit a transaction to a smart contract, it needs to call an entry function. The boilerplate provides you with an entry-functions folder to hold all your dapp entry function requests. Additionaly, for a frontend to fetch data from a smart contract, it needs to submit a request to a view function. The boilerplate provides you with a view-functions folder to hold all your dapp view function requests.

Ready for Mainnet

If you started your dapp on testnet, and you are happy with your testing, you will want to get the dapp on mainnet.

To publish the smart contract on mainnet, we need to change some configuration.

Open the .env file and:

Note: Make sure you have created an existing account on the Aptos mainnet

1. Change the APP_NETWORK value to mainnet
2. Update the MODULE_PUBLISHER_ACCOUNT_ADDRESS to be the existing account address
3. Update the MODULE_PUBLISHER_PRIVATE_KEY to be the existing account private key
4. Run npm run move:publish to publish your move module on Aptos mainnet.

Deploy to a live server

create-aptos-dapp provides an npm command to easily deploy the static site to Vercel.

At the root of the folder, simply run

npm run deploy

Then, follow the prompts. Please refer to Vercel docs to learn more about the Vercel CLI

If you are looking for different services to deploy the static site to, create-aptos-dapp utilizes Vite as the development tool, so you can follow the Vite deployment guide. In a nutshell, you would need to:

1. Run npm run build to build a static site
2. Run npm run preview to see how your dapp would look like on a live server
3. Next, all you need is to deploy your static site to a live server, there are some options for you to choose from and can follow this guide on how to use each