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
andcontract
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
Publish the contract
Run the below command to publish the contract on-chain:
This command will:
- Publish the contract to chain.
- Setting the
VITE_MODULE_ADDRESS
in the.env
file to set the contract object address.
Run the app
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
- Change the
APP_NETWORK
value tomainnet
- Update the
MODULE_PUBLISHER_ACCOUNT_ADDRESS
to be the existing account address - Update the
MODULE_PUBLISHER_PRIVATE_KEY
to be the existing account private key - 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
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:
- Run
npm run build
to build a static site - Run
npm run preview
to see how your dapp would look like on a live server - 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