Deploying a frontend for your NFT project
After the previous articles we have uploaded our images and metadata, and also deployed a smart contract on a live blockchain testnet. For our next trick we will be building and deploying a frontend UI so that others can mint NFTs and show them to their friends.
The minter-dapp
repo we have been using from codeSTACKr has a frontend forked from Hashlips. We will continue to use this frontend for this section.
The Setup
Open the file frontend/js/constants.js
in your favorite text editor.
Edit the const contractAddress
to your deployed contract address. You can find this in the build/contract/_contract.json
file. Edit the const chain
to your chain that you deployed on. I am using Rinkeby for this blog series.
For lines 4-22 of the script you will want to edit them to fit your needs. After line 22 is the contract's ABI, don't touch it!
The index.html
also needs to be customized to your liking. I did not change much, just the wording on the text and the links.
For the images, you will need to replace the slider images under images/slider
The app should auto-size them for you. I also used the website https://favicon.io/favicon-converter/ to convert the logo and favicon.
I made minimal changes overall as you can see from the screenshot.
The Deployment
We wil be using the Netlify service to host our web page. CodeSTACKr covers it pretty indepth here in the linked video below.
The steps are as follows:
- Sync your repo with Git
- Setup a free Netlify account
- Link your Netlify account to Github/GitLab
- Create a new project in Netlify
- Connect to Git provider
- Pick your repository
- Setup the site settings, and deploy!
I went an extra step in buying the metamarbles.xyz domain and pointing it to the Netlify app via a CNAME record in DNS.
Wrapping up
The frontend can be an easy or hard setup for you depending on how much web development experience you've had in the past. I highly recommend watching the video linked as there are some great tips.
You can now go to the app on the Internets and mint your NFTs.
This will be the last post in this series. I hope you enjoyed reading as I did creating.
Have fun