Part 7: Website Set up for Minting

For the easiest possible set up, we will be using the front end that Metaplex provides us. You will go to where you cloned your Metaplex repository, in our case ~/metaplex/js/packages/candy-machine-ui. Open up this folder in your code editor of choice.

Rename the file .env.example to .env.

After changing the file name, you can change the values in there to the following:

REACT_APP_CANDY_MACHINE_ID=<YOUR_CANDY_MACHINE_PUBKEY>
REACT_APP_SOLANA_NETWORK=devnet
REACT_APP_SOLANA_RPC_HOST=<YOUR_QUICKNODE_DEVNET_ENDPOINT>

With all of that information plugged in you can now save the file. From the candy-machine-ui folder, run the command:

yarn install
yarn start

📘

If the minting process doesn't work edit index.tsx React.StrictMode. 👇

Go to metaplex/js/packages/candy-machine-ui/src and open the index.tsx

Remove React.StrictMode, change the contents of ReactDom.render to:

ReactDOM.render(<App />, document.getElementById('root'));

and run yarn again.

This will open up a browser at localhost:3000 where you can connect your wallet and have the ability to mint an NFT. Confirm that your Phantom Wallet is set to devnet and not mainnet before proceeding.

We must now add funds to our Phantom wallet to cover the price of an NFT and the fee. To do this, we can run the same solana airdrop command we ran in Part 3: Setting up a Solana Node with QuickNode. First, open your Phantom wallet and click on your wallet name shown at the top of your screen. This will copy your address to your clipboard. Once copied, open your terminal and paste your address in with the following command

solana airdrop 1 <YOUR_PHANTOM_ADDRESS>

If done successfully you should see a website like this:

If you see an error that says “Mint Failed”, you might not have enough funds. Try again once you’ve added funds. From the screenshot above, you can see that we’ve already minted 2 out of the original 10. You can view the NFT in your wallet after purchasing. Ours looks like this.