IPFS hosting your NFT art and metadata in the MetaVerse
I've covered IPFS a few times on the blog before, you can read those articles here:
https://bits.jeremyschroeder.net/blockfrost-io-script-example/
https://bits.jeremyschroeder.net/mr-pinners-pinning-lab/
https://bits.jeremyschroeder.net/building-a-nft-minting-bot-with-cardano-telegram-and-python-part-3/
This time we will use NFTport's API via the repo we cloned in the last article. We will be using the commands to upload our images and their metadata to IPFS.
For a refresh:
Clone the CodeSTACKr Minter Dapp repo to your machine.
From your terminal cd into the repo and then the backend directory and the run the following npm command to install all the dependencies:
npm install
For this part you will need a API key from NFTport.xyz to move forward. Create a file in the backend directory called .env and put your key in like this:
NFTPORT_API_KEY=my_super_secret
Uploading the images
Upload Files/Images:
npm run upload_files
This command uploads all files in the /backend/build/images folder to IPFS via NFTport.
Example Output:
Starting upload of images...
0.png uploaded & 0.json updated!
1.png uploaded & 1.json updated!
2.png uploaded & 2.json updated!
3.png uploaded & 3.json updated!
4.png uploaded & 4.json updated!
5.png uploaded & 5.json updated!
6.png uploaded & 6.json updated!
7.png uploaded & 7.json updated!
8.png uploaded & 8.json updated!
9.png uploaded & 9.json updated!
You will notice that the JSON file was also updated with the IPFS hash of the image. Now that is pretty slick, talk about saving time!
Your images and metadate are ready, so let's put the metadata in the metaverse!
Uploading metadata to NFTport
Upload the metadata:
npm run upload_metadata
This command uploads all .json files in both the /backend/build/json folder and, if it exists, the /backend/build/genericJson folder as well.
Example Output:
Starting upload of metadata...
Metadata uploaded!
Not as exciting, but just as important. In the build/ipfsMetas there will be a file called _ipfsMetasResponse.json if everything worked.
Mainly you'd like to see the "response": "OK", line. You can open the metadata_directory_ipfs_url in Brave, but it is the root directory and should have a bunch of files there depending on the number of images for your project.
Super sweet, you have data in the MetaVerse, let's deploy a smart contract so you can use it.
