DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Hector Bardales
Hector Bardales

Posted on • Updated on

Solana NFTs: Everything you need

I have moved all of this and more here--> https://hackmd.io/@hnbl/hector

Sol Addy: 3vFhAmSSnQUJxhWxaw6jh5J8Uc6oDPWgP6VxSsFmPMih

What is this guide?

The purpose of this guide to teach anyone, even if you have no knowledge of coding, to create and generate a collection of NFTs and upload them for people to mint them on your own website.

Important

I did this on MacOs, but you can use this guide and follow similar steps if you're on Linux or Windows.

How to navigate

I will have five main sections here to make navigation easier:

Quick Navigation

  1. Create a Collection The first one will cover everything from how to make your images all the way to generating thousands of images with their json files.
  2. Upload to Website: The second will teach you everything about uploading that collection to the blockchain and be able to mint your NFT.
  3. Website Appearance: Edit the appearance of your website.
  4. Host WebsiteThe third will teach you how to host this website.
  5. ResourcesInformation about costs, importing wallet to phantom and other resources.
  6. Common Errors

Create a Collection

(Back to Quick Navigation)
Here you will learn how to make images, json files and generate thousands of them.

Artwork

To generate hundreds or thousands of NFTs you will want use layers. You can make these images using any software you like. This includes: Photoshop, Procreate, MSPaint and many more.
A popular type of NFT is the pfp (profile picture) such as the one below.

PFP Example

To do this you will need to use layers. For a pfp type NFT, you can begin by creating the body of your character and then other things such as clothing and accessories.

Free Pngs to use for testing

I created a file with examples and you can download them from here to test out NFT generation.
Now that you have your layers ready let's generate a few NFTs.

If you are using this guide, after the name of each layer add "# + a number from 1-100". For example: "Hair Long#90.png". The higher numbers make the trait more common the lower numbers less common.

Generate NFTs

Here you'll learn how to generate images and their json files.
Install:

  1. Visual Studio Code
  2. Node.js(I suggest the "current" version)

We will now use the Haslips Art Egine. Open Visual Studio Code. Click Terminal->New Terminal:

git clone https://github.com/HashLips/hashlips_art_engine.git
Enter fullscreen mode Exit fullscreen mode

In Visual Studio click open folder and open the hashlips art engine folder. Click Terminal->New Terminal. Click the src folder and then the config.js file

Here we will change several things:

  1. Description - The description of your collection.
  2. I suggest changing this line to looks like this:
const baseUri = "image.png";
Enter fullscreen mode Exit fullscreen mode
  1. growEditionSizeTo - The number of NFTs you want. (For testing I suggest starting with 10-100 max)
  2. layerOrders - Here you will choose the properties of you NFT. The name of each property should match the folder created for each one. Like this: Layers' Names You can always add more layers with this line
{ name: "Name of you layer" }
Enter fullscreen mode Exit fullscreen mode

Adding Metadata

Look for this:

const extraMetadata = {"You will add it here"}
Enter fullscreen mode Exit fullscreen mode

You can copy/paste this metadata and edit it or go here for more info:

{
  "name": "The Name of your Collection",
  "symbol": "",
  "description": "The description of your collection",
  "seller_fee_basis_points": 0,
  "image": "image.png",
  "external_url": "You can put the link to your website here",
  "attributes": [
    {
      "trait_type": "attribute#1 ex: Background",
      "value": "Simple"
    },
    {
      "trait_type": "attribute#2 ex: Clothes",
      "value": "Green"
   },
   {
      "trait_type": "attribute#3 ex: Hair",
      "value": "Long Hair"
    }
  ],
  "collection": {
     "name": "Collection Name",
     "family": "Family Name" 
  },
  "properties": {
    "files": [
      {
        "uri": "image.png",
        "type": "image/png"
      }
    ],
    "category": "image",
    "creators": [
      {
        "address": "Solana address where you'll receive SOL",
        "share": 100
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

Look for the main.js file and click on it. Now look for this part:
Image main.js
I suggest leaving the image line like this:

image: ``,
Enter fullscreen mode Exit fullscreen mode

Open a new terminal. Type:

yarn install
Enter fullscreen mode Exit fullscreen mode
  1. Json files starting with 0(be careful this is not fully tested): Go to src folder->main.js file. Scroll down until you see this section and add the "-1" as you see in the image: 0.json file
  2. Png files starting with 0: Go to to src folder->main.js file. Scroll down until you see this section and add the "-1" as you see in the image: 0.png file Now generate the images and json files:
node index.js
Enter fullscreen mode Exit fullscreen mode

Look for the folder called hashlips_art_engine, then build. Here you will see these two folders with your images and json files:
Images and Json files

Upload to Website

(Back to Quick Navigation)

Installing Dependencies

Once you have your collection of images and json files you can now upload them to your own website and mint them for free on the devnet (to test out everything) or the mainnet-beta (to allow others to mint them).

We will begin by installing the following:

Visual Studio Code

Visual Studio (This will facilitate viewing some files.)

Node.js

Node.js (I suggest dowloading the "Current" version)

To check you did it: open Visual Studio Code and click on Terminal followed by New Terminal. Type in the following:

node -v
Enter fullscreen mode Exit fullscreen mode

Solana Cli

Solana Cli (If you're not on MacOs click on the link and follow the steps there)
For Mac users type the following into you terminal.

sh -c "$(curl -sSfL https://release.solana.com/v1.8.0/install)"
Enter fullscreen mode Exit fullscreen mode

To confirm you did it right type the following into you terminal and click enter.

solana --version
Enter fullscreen mode Exit fullscreen mode

Metaplex

Open Visual Studio Code and click Terminal->New Terminal.
Here is the link to their github page: Metaplex
In your terminal type the following a click enter:

git clone https://github.com/metaplex-foundation/metaplex.git
Enter fullscreen mode Exit fullscreen mode

If you are in Visual Studio Code, click on File->Open Folder and choose the Metaplex folder.
Click on Terminal->New Terminal.

yarn install
Enter fullscreen mode Exit fullscreen mode

We want to change directory so in the terminal type the following:

cd js/packages/cli
Enter fullscreen mode Exit fullscreen mode

Inside the cli folder we will do two things. Click enter after each line:

yarn build
Enter fullscreen mode Exit fullscreen mode

We are done with this part.

Solana File System Wallet

Open a new terminal. Now we will change to the Solana devnet.

solana config set --url https://api.devnet.solana.com
Enter fullscreen mode Exit fullscreen mode

Then make a file system wallet

solana-keygen new --outfile ~/config/solana/devnet.json
Enter fullscreen mode Exit fullscreen mode

Copy and save the pubkey and seedphrase somewhere safe.
Now set a keypair

solana config set --keypair ~/config/solana/devnet.json
Enter fullscreen mode Exit fullscreen mode

Check your balance

solana balance
Enter fullscreen mode Exit fullscreen mode

It should be 0Sol. Let's add some:

solana airdrop 3
Enter fullscreen mode Exit fullscreen mode

Uploading to Devnet

We are now ready to upload our collection to the devnet. If this is your first time I suggest starting with just two NFTs to test everything.
If you followed the guide you should have some images and json files ready. Create a folder called "assets". Insert two images and their respective json files. The image and json file names should start with 0 and count upwards. For example: 0.png, 0.json, 1.png, 1.json and so on. Move this folder into the Metaplex folder. Like this:
File Names
Now lets upload everything. Open a New Terminal:

~/metaplex/js/packages/cli/src/candy-machine-cli.ts upload ~/metaplex/assets --env devnet --keypair ~/config/solana/devnet.json
Enter fullscreen mode Exit fullscreen mode

Copy and save the numbers and letters after "started at:" and "initialized config for a candy machine with publickey: "
You should now have a file name .cache. Copy the contents, create a new file in visual studio code and paste. Right click and choose formate document.

Website Creation

For this part we will use the Exiled Apes Candy Machine
Open a new terminal type in the following and click enter:

git clone https://github.com/exiled-apes/candy-machine-mint.git
Enter fullscreen mode Exit fullscreen mode

You should now have a folder called "candy-machine-mint"
Install yarn:

cd candy-machine-mint
yarn install
Enter fullscreen mode Exit fullscreen mode

Open the candy-machine-mint folder with Visual Studio Code. Rename the .env.example folder to .env Inside the .env file you should see this

REACT_APP_CANDY_MACHINE_CONFIG=__PLACEHOLDER__
REACT_APP_CANDY_MACHINE_ID=__PLACEHOLDER__
REACT_APP_TREASURY_ADDRESS=__PLACEHOLDER__
REACT_APP_CANDY_START_DATE=__PLACEHOLDER__

REACT_APP_SOLANA_NETWORK=devnet
REACT_APP_SOLANA_RPC_HOST=https://explorer-api.devnet.solana.com
Enter fullscreen mode Exit fullscreen mode

We will replace the four "PLACEHOLDER" with the following in this order:

You will now click Terminal->New Terminal:

yarn start
Enter fullscreen mode Exit fullscreen mode

A website should open here: localhost:3000/
Connect to Phantom, change to devenet in your wallet, and mint your NFT. (If you don't have Sol you can airdrop for free here. Just copy/paste your phantom wallet address)
If you succeeded it should show up in your collectibles.

Website Appearance

(Back to Quick Navigation)
//I will be adding this later

Host Website

(Back to Quick Navigation)
We are now ready to host the website.

Costs/Resources/And More

(Back to Quick Navigation)
To put your NFTs on arweave, which is what we are using, you can calculate the costs in this calculator

Importing Wallets

If you want to use your File System Wallet with phantom you can check out this link

Resources

Here are some useful videos:

  1. How to generate 10,000NFTs: By: Freedom Fishies (This is a very complete guide)
  2. Mint Website Creation (This is a good guide, but it doesn't mention a few things. I suggest watching it as a video guide to accompany this written one or any other)
  3. Spanish guide by Ahmed Castro: ColecciΓ³n de NFTs Una guΓ­a muy completa y concisa.
  4. Metaplex Discord
  5. Solana Discord
  6. Levi Cook Metaplex Guide(Some things in this guide will be different for you. If you use it, I suggest reading the comments)
  7. Metadata Standard This is all the metadata needed for a Solana NFT
  8. Solana and Metaplex FAQ

Common Errors

I will add images or text showing some common errors and ways to fix them.

Top comments (7)

Collapse
 
devninjapirate profile image
Arian H. • Edited on

Will check out this article as you add more stuff to it...

Is there a way to do an attribute that can multiple sub-attributes under it?
like Pizza toppings... where you might have Tomato Sauce or Cheese as very common attributes... but additional toppings which are more rare like Mushroom, Anchovies... so you would have common Pizzas with just Tomato Sauce+Cheese,
'white' Pizzas with just Cheese,
and more rare Pizzas with many things like: Tomato Sauce+Cheese+Mushroom+Anchovies+Peppers.
Toppings would be the main attribute and can have multiple sub-attributes under it (and pretend at least 1 will be chosen).
Then there would be other main attributes like 'Pizza Delivery Driver', 'Pizza Delivery Car', 'Pizza Company' pretend.

Also I'm curious a bit more differences in the steps between hosting on your own local website on dev/testnet vs on decentralized storage like ArWeave/IPFS.
Like if you were to use ArWeave/IPFS, would you keep these lines:
const baseUri = "ipfs://NewUriToReplace"; //replace this will some url IPFS or ArWeave gives you I assume
image: baseUri + _edition +'.png', //note the `` parts didn't format so removed them and put in var1+var2+'.fileext' format

A bit more complicated, I'm curious about using a VRF (Verifiable Random Function) with Solana NFTs to randomly create the image randomly at mint time vs create beforehand.
Will look forward as you update and clean up the article.

Also if you were to create the NFT at compile time, can you use the user's SOL to pay for it so you don't have to pay ArWeave alot beforehand?

Collapse
 
hnbl profile image
Hector Bardales Author

I suggest visiting the link at the very top. I moved everything to my hackmd page to make it easier to navigate. I have more info there and update it pretty often.

Collapse
 
codifynw profile image
codifynw

Thanks Hector, this is awesome.

Collapse
 
hnbl profile image
Hector Bardales Author

I'm really glad you like it. I'll try to finish soon.

Collapse
 
ngjingxuan6 profile image
Ng Jing Xuan

What if I wanted to do a whitelist and different price from the public sale, how can I do it?

Collapse
 
sandipan_mukherjee_97fef2 profile image
Sandipan Mukherjee

once nft has been uploaded on metaplex, are we still able to make any changes etc?

Collapse
 
austmo8 profile image
austmo

i got an error when doing yarn start. "Couldn't find a package.json file in "C:\Users\Krisa\metaplex"" Anyone know how to solve this?

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›