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:

Follow the CLI prompts.

Getting started

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.

The boilerplate template supports PWA out of the box. PWA lets users to install the web app on their mobile devices as the app is native, providing a better user experience comparing to regular web app. Once you host the web app on a cloud provdier like Vercel, users visiting the app on mobile will see the option to add the app to home screen.

If you want to learn more about the configuration of PWA such as logo, you can visit vite-pwa if you are using vite, and next-pwa if you are using next.

By default, PWA is enabled, you can disable it by setting the disable flag to true in next config or vite config.

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.

API Key

1. If you are using an API Key, make sure to update the APTOS_API_KEY with your MAINNET API Key.
2. If you are not using an API Key, make sure to create one and update the APTOS_API_KEY with your API Key.

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

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