NFT Minting 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:
- Create a NFT collection on Aptos.
- Modify a pre-made UI to build a NFT minting dapp users can quickly adjust.
- 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:
- "Public Mint" Page - A page for the public to mint NFTs.
- "Create Collection" Page - A page for creating new NFT collections. This page is not accessible in production.
- "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:
Follow the CLI prompts.
Create Collection Assets
In order to create a Collection
using create-aptos-app
, you will need to create a folder with the following information in it.
The following steps will break down how to do that.
Create an assets
folder for your collection.
Make a collection.json
file.
All collections are required to have the following fields:
The image
field of collection.json
above will be filled in automatically when we upload the images, so we can
leave it empty.
Add an image for the collection itself in the assets
folder.
Create a folder called images
in the assets
folder.
Add all potential NFT images to the images
folder.
All images must have the same file extension for this template app to work.
Create a folder called metadata
in the assets
folder.
Add a metadata json file for each NFT image in the images
folder.
The metadata files should match the names of the images in the images
folder. Ex. 1.jpeg
-> 1.json
.
All fields in the example below other than attributes
are required.
The attributes
section is optional, and can contain any key-value pairs.
The name
field of the metadata.json must be unique for this collection.
Here is an example of what each metadata file should look like:
We recommend the developers follow the ERC-1155 off-chain data schema to format their JSON files.
The image
field of the metadata.json files above will be filled in automatically when we upload the images, so we
can leave it empty.
The file structure should now look something like this:
Publish the Move Contract
In the .env
file, set VITE_COLLECTION_CREATOR_ADDRESS
to be the same as your account address.
This determines which account is allowed to create collections using the dapp.
If you haven't set up an account, you can create one with an Aptos wallet like Petra. Make sure to set up the account on the same network as your template project.
For example:
On the project root folder, run the below command to publish the contract.
You will have to confirm the gas fee in the console.
This command will:
- Publish the contract to chain.
- Setting the
VITE_MODULE_ADDRESS
in the.env
file to set the contract object address.
Publishing the collection on-chain
After you have published the Move contract to chain
Run the app and open the preview.
In the top-right corner, click "Connect a Wallet".
Use the same account that you set in .env
for the VITE_COLLECTION_CREATOR_ADDRESS
.
Or, if you use a different account, set the VITE_COLLECTION_CREATOR_ADDRESS
to the account you sign in with and
republish the contract.
Do not use the "Google Account" option if it is available. The account generated from that will not work as the
VITE_COLLECTION_CREATOR_ADDRESS
. Use a wallet created with an Aptos wallet provider such as
Petra.
In the app, go to the "Create Collection" page (if not on that page already)
Upload the assets
folder you created previously.
If you do not have an assets
folder or other properly formatted collection data, see the beginning of these
steps for how to make one.
Choose the required fields.
- Choose the mint start date to determine when users can start minting NFTs.
- Choose a mint limit per account.
The rest are optional fields to help customize your mint.
- (Optional) Choose the mint end date to determine when users can no longer mint NFTs. If no date selected, the mint is open forever.
- (Optional) Royalty Percentage for each NFT - this defines the royalties marketplaces should send you when users trade these NFTs.
- (Optional) Mint fee per NFT - this defines the cost public users pay to mint this NFT.
- (Optional) Mint for myself - this defines how many NFTs you would want to mint for yourself once the collection is created.
Click "Create Collection"
When adding the folder, it submits the files to Irys, a decentralized asset server, that will store your files.
During the upload process, you will need to sign two messages to approve file uploading to Irys. Additionally, you may need to fund an Irys node. Read more about the process here.
Once you approve the transaction, you have successfully created a Collection on Aptos!
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.
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 theimg
property 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:
- Adding Allowlist mint stages.
- 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
- Change the
VITE_APP_NETWORK
value tomainnet
on the.env
file - Update the
VITE_MODULE_PUBLISHER_ACCOUNT_ADDRESS
to be the existing account address on the.env
file - Update the
VITE_MODULE_PUBLISHER_PRIVATE_KEY
to be the existing account private key on the.env
file - Create or get the account you want to create a collection with, open the
.env
file and assign the account address as theVITE_COLLECTION_CREATOR_ADDRESS
value. - Finally, run
npm run move:publish
to publish your move module on Aptos mainnet. - 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
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
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: