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

Getting started

npm run move:init

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.

1. Change the VITE_APP_NETWORK value to mainnet in the .env file
2. Run npm run move:init to initialize an account to work against Mainnet
3. If you already have an account you would like to use to publish the contract under, you can pass its private key when the prompt asks for that.
4. If you are generating a new account, you need to transfer this account some APT on Aptos Mainnet since the tool can’t fund the account when it is against Mainnet.
5. Check: open .aptos/config.yaml file and see that you have a profile under the {PROJECT_NAME}-mainnet name (where PROJECT_NAME is specified in your .env file). In addition, open the .env file and check the VITE_MODULE_ADDRESS value is the same as the new profile’s account account address.
6. Finally, 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