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 ofReactDom.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.

Updated over 1 year ago