Create Aptos Dapp NFT Minting Dapp Template

Digital Assets are the NFT standard for Aptos. The NFT minting dapp template provides an end-to-end NFT minting dapp.

With this dapp, you can:

1. Create a NFT collection on Aptos.
2. Modify a pre-made UI to build a NFT minting dapp users can quickly adjust.
3. Learn how to write a Move contract and front end connected to that contract.

You can read more about the Aptos Digital Asset Standard here.

Template Pages

The NFT minting dapp template provides 3 pages:

1. “Public Mint” Page - A page for the public to mint NFTs.
2. “Create Collection” Page - A page for creating new NFT collections. This page is not accessible in production.
3. “My Collections” Page - A page to view all the collections created with the template Move module. This page is also not accessible in production.

Quick Start

• Create assets for a collection of NFTs
• Create a collection on chain
• Customizing the frontend
• Deploy to a live server

Generate the NFT minting dapp template

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

npx create-aptos-dapp@latest

Follow the CLI prompts.

Create Collection Assets

In order to create a Collection using create-dapp-app, you will need to create a folder with the following information in it.

The following steps will break down how to do that.

{
  "name": "Aptos NFTs",
  "description": "My NFT Collection on Aptos.",
  "image": "",
  "external_url": "https://your_project_url.io"
}
 

{
  "description": "nft 1 in collection",
  "image": "",
  "name": "NFT 1",
  "external_url": "https://your_project_url.io/1",
  "attributes": [
    {
      "trait_type": "optional_trait",
      "value": "1"
    }
  ]
}

Publish the Move Contract

VITE_APP_NETWORK=testnet
VITE_COLLECTION_CREATOR_ADDRESS=0xC0FEE

npm run move:publish

Publishing the collection on-chain

After you have published the Move contract to chain

npm run dev

Customizing the Front-End

Most data on the front end is customizable in frontend/config.ts.

Set the collection_address config

In order to add a collection to the public mint page, set collection_address in .env with the collection address.

You can use a collection that you have minted using the tool by going to the “My Collections” page and copying its address.

Modify static content

Once the collection address has been configured, view the frontend/config.ts file to change any static content on the page. You can also modify the code itself as you wish.

How to add static images?

The public mint page uses static images in the UI. Initially, the images are imported from the frontend/assets/placeholder folder. To use custom images, you should add the image you want to use to the frontend/assets folder (under any new folder you want to create) and then import the image as seen below in the frontend/config.ts file and add it under the section you want to have it.

import MyImage from "@/assets/<my-new-folder>/my-image.png";

For example, to update an image in the “Our Team” section - add the image under the frontend/assets/<my-new-folder> folder, import the image as import MyImage from "@/assets/<my-new-folder>/my-image.png"; and change theimgproperty in the ourTeam section with MyImage.

My Collections Page

This page displays all the collections that have been created under the current Move module. You can click on the contract address, which redirects you to the Aptos Explorer site where you can see your collection.

When you are ready to allow others to mint NFTs from your collection, you will need to copy the collection address into frontend/config.ts’s collection_id variable. This will then allow that collection to be used on the “Public Mint” page that anyone can access.

Some stats are available on this page, like the amount of minted NFTs and Max Supply of the NFTs.

How can I take it from here?

Remember, one of the goals of this template is to educate and provide a real life example on how a NFT minting dapp can be on Aptos. We provide some basic concepts and features but there is much more you can do for your dapp.

Some ideas you can try are:

1. Adding Allowlist mint stages.
2. Building custom flows for after someone mints a NFT (or even token gated experiences).

Check out our TS SDK to see what other API queries you can use to add more features and fetch other types of data.

Ready for Mainnet

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

Creating a collection on mainnet follows the same flow as creating a collection on testnet. But, we need to change some configuration.

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

1. Change the VITE_APP_NETWORK value to mainnet on the .env file
2. Update the VITE_MODULE_PUBLISHER_ACCOUNT_ADDRESS to be the existing account address on the .env file
3. Update the VITE_MODULE_PUBLISHER_PRIVATE_KEY to be the existing account private key on the .env file
4. Create or get the account you want to create a collection with, open the .env file and assign the account address as the VITE_COLLECTION_CREATOR_ADDRESS value.
5. Finally, run npm run move:publish to publish your move module on Aptos mainnet.
6. The next step would be to create a collection using the account you set as the VITE_COLLECTION_CREATOR_ADDRESS. Simply follow the instructions here

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

Update the look and feel of the dapp

This template is styled with Tailwind CSS and shadcn/ui. These libraries provide the app with a neutral and clean look and feel while leaving it open to a lot of customization so that you can make the app truly yours.

Please refer to the following questions in the FAQ to learn about how to customize the UI of your dapp:

• What is Tailwind CSS?
• What is shadcn/ui?
• How to modify the theme?
• How to add components?
• How to add colors?
• How to add dark mode?