Blockchain

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

Read next