Share on facebook
Share on twitter
Share on linkedin

Create an NFT Minting Website in 5 Steps

In this article, we’ll be taking a closer look at the process of creating an NFT minting website. What’s more, we’re going to use the Moralis operating system to make the process more accessible. As a result, we’ll be able to create an NFT minting website in only five simple steps. However, if you’d like to skip the tutorial altogether and jump straight into the code, feel free to visit the GitHub page for the project: 

Complete NFT Minting Website Documentation – https://github.com/DanielMoralisSamples/19_MINTNFT

NFTs, or non-fungible tokens, have made their mark over the past year. The market has proven highly lucrative, and developers continuously find new, innovative ways to utilize these digital assets. As such, now might be a great time to get into NFT development and learn how to create your very own NFTs. For this reason, we’ve decided to illustrate in this tutorial the process of how you can create an NFT minting website in five steps!

Web3 development can sometimes be quite tricky, which is why it’s beneficial to utilize development tools to aid the development processes. One such tool we’ll be using during this tutorial is Moralis. Moralis is an operating system for Web3 development providing an underlying backend infrastructure to all users. As such, we can utilize this ecosystem when creating our NFT minting website to cut the development time significantly. 

So, if you’re interested in creating your own NFTs, follow along as we take you through the complete process from start to finish! What’s more, if you’re already familiar with the process of minting NFTs, you can read more about the concept of lazy minting, allowing you to create NFTs without any gas fees! You can also check out this guide to how to start generating NFTs!

How to Create an NFT Minting Website in 5 Steps

Let’s proceed with the central part of this article and take a closer look at how you can create an NFT minting dapp. However, before we continue, we’ll look closer at what the website will look like once finalized. This will give you an idea of what we’re working toward. Here is a screenshot of the final product: 

The final result will be a simple website with a few fields and buttons. First, by looking at the screenshot above, you’ll notice that users need to sign in with a username and an email address. Once users complete these fields, they can click on the “Connect MetaMask” button, which will allow them to authenticate with MetaMask.

When users are signed in, they can continuously create NFTs by inputting a name, adding a description, selecting a file, and uploading/minting the NFT. Furthermore, once the NFT is minted, users will see the following message and a link to their NFT at the bottom of the dapp:

This is a powerful yet simple application we can create in only five simple steps, thanks to Moralis: 

  1. Creating a Moralis Dapp
  2. Connecting the Moralis SDK and Initializing Moralis
  3. Creating the HTML File
  4. Adding the JavaScript Logic
  5. Finding a Smart Contract

By following these straightforward steps, we’ll be able to create an NFT minting website in no time! So, without further ado, let’s dive deeper into the process and proceed by taking a closer look at how to create your own Moralis dapp! 

Step 1: How to Create an NFT Minting Website – Creating a Moralis Dapp

To create a Moralis dapp, the first thing you’ll need is a Moralis account. So, if you haven’t already, we recommend you sign up with Moralis to follow along as we continue. Once you have a Moralis account, you can navigate to the Moralis admin panel. 

The next step is to click on the “Create New Dapp” button to begin the setup process of your Moralis dapp. Once you click this button, you’ll first be prompted to select the development environment. You can pick from either “Mainnet”, “Testnet”, or “Local Dev Chain”.

This choice should depend on where you plan to launch your NFT minting website. However, in this instance, and since this is a guide, we’ll opt for the testnet alternative. Once you have picked the desired environment, you must select the network(s). This should also be dependent on where you plan on launching your dapp. Finally, all that remains is to select the region, name your dapp, and hit the “Create Your Dapp” button to spin up the dapp! 

With the dapp at your disposal, you have a few options to discover. For example, you can click on the “Settings” button on your new dapp, which will reveal various information. Under the “Dapp Details” tab, you’ll find the dapp credentials. Take note of the dapp URL and the application ID, as we’ll need this information when initializing Moralis in the following step. 

Step 2: How to Create an NFT Minting Website – Connecting the Moralis SDK and Initializing Moralis

Before diving deeper into the code, we first need to connect the Moralis SDK and initialize Moralis. We need the SDK since this will allow us to use already prepared snippets of Moralis code, making this development process significantly more accessible. By initializing Moralis, we connect our dapp to the code, allowing us to, for example, save information to our dapp’s database. 

Connecting the Moralis SDK is relatively simple, and all you need to do is input the following two lines into your HTML file: 

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>

What’s more, to initialize Moralis, you must include these two lines into your JavaScript file and add the dapp URL and application ID we acquired in the first step: 

Moralis.initialize(""); // Application ID from moralis.io
Moralis.serverURL = ""; // Server URL from moralis.io

With both the SDK installed and Moralis initialized, we can proceed and take a closer look at the HTML code for our NFT minting website! 

Step 3: How to Create an NFT Minting Website – Creating the HTML File

In actuality, you have several options that you can take to create an NFT minting website; however, we decided to create a simple Python flask application. This app will trigger all the associated code, some of which is the HTML file used to structure the contents of our website. 

The first file we’re briefly going to cover is “index.html“. This is where we’ll find all the HTML code for the fields and buttons of our NFT minting website. We won’t be covering all aspects of the code since this isn’t essential. Your website’s structure should depend on your own preferences and needs as a developer, which is why we’ll not cover all the intricacies of this file. However, here is an example of an HTML element from “index.html”:

<button class="btn btn-primary" id="submit" onclick="login();">Connect MetaMask</button>

As you can see from the code snippet above, this is the code for the “Connect MetaMask” button. If you’d like to view the complete HTML code, please click the link above for the “index.html” file. The file is relatively straightforward and contains just above 50 lines of code. 

However, on their own, the HTML elements lack interactability. As such, we need to add some JavaScript logic to allow users to input information into the input fields and click on the buttons of our website, which takes us to the third step of our tutorial. 

Step 4: How to Create an NFT Minting Website – Adding the JavaScript Logic

With the HTML elements added and you being satisfied with the structure of your NFT minting website, we can take a closer look at the JavaScript logic. This can be found in the “logic.js” file. More specifically, we’ll take a closer look at these three essential functions: 

  • login()
  • upload()
  • mintToken()

So, to clarify things, let’s break down each function and explore what the code actually does! 

login()

Let’s begin dissecting the code and quickly look closer at the “login()” function: 

async function login(){
  document.getElementById('submit').setAttribute("disabled", null);
  document.getElementById('username').setAttribute("disabled", null);
  document.getElementById('useremail').setAttribute("disabled", null);
  Moralis.Web3.authenticate().then(function (user) {
      user.set("name",document.getElementById('username').value);
      user.set("email",document.getElementById('useremail').value);
      user.save();
      document.getElementById("upload").removeAttribute("disabled");
      document.getElementById("file").removeAttribute("disabled");
      document.getElementById("name").removeAttribute("disabled");
      document.getElementById("description").removeAttribute("disabled");
  })
}

As soon as the function is triggered, the code will disable the “submit”, “username”, and “useremail” HTML elements. Following this, the “Moralis.Web3.authenticate()” function will run, allowing the users to authenticate themselves using MetaMask. This highlights some benefits of Moralis since functions like these are ready to use out of the box. 

Once the user authenticates, the functions take both the name and email, adding them to the database of your Moralis dapp. Lastly, the function removes the “disabled” attribute for the other elements of the website, allowing users to access the fields and buttons for actually minting the NFTs. 

upload()

The second function is “upload()”, which triggers when users hit the “Upload and Mint” button from the dapp’s UI. This function is somewhat more complex than the previous one. However, this is the entirety of the code: 

async function upload(){
  const fileInput = document.getElementById("file");
  const data = fileInput.files[0];
  const imageFile = new Moralis.File(data.name, data);
  document.getElementById('upload').setAttribute("disabled", null);
  document.getElementById('file').setAttribute("disabled", null);
  document.getElementById('name').setAttribute("disabled", null);
  document.getElementById('description').setAttribute("disabled", null);
  await imageFile.saveIPFS();
  const imageURI = imageFile.ipfs();
  const metadata = {
    "name":document.getElementById("name").value,
    "description":document.getElementById("description").value,
    "image":imageURI
  }
  const metadataFile = new Moralis.File("metadata.json", {base64 : btoa(JSON.stringify(metadata))});
  await metadataFile.saveIPFS();
  const metadataURI = metadataFile.ipfs();
  const txt = await mintToken(metadataURI).then(notify)
}

The initial part of the function connects the user’s file and captures it in an array. This data is then used to create a new Moralis file object that we need to execute the other parts of the function. Once the Moralis object is created, users will no longer need to interact with the fields and buttons, which is why they are disabled. 

With a Moralis object at hand, it is, thanks to Moralis’ integrating with IPFS (InterPlanetary File System), possible to save the file in a decentralized manner through the following line (which is part of the function above): 

await imageFile.saveIPFS();

With the file uploaded to IPFS, Moralis supplies the object’s hash and URI. Once we have access to the URI, we can create a metadata file containing the name, description, and URI referencing the file the user uploaded. With the metadata file, we once again create a Moralis object and store it to IPFS but this time, rather store it as a JSON file. As such, we can then fetch the metadata URI and use it in the following function!

mintToken()

The third function is regarding the actual minting process of the NFT. Here is the complete function: 

async function mintToken(_uri){
  const encodedFunction = web3.eth.abi.encodeFunctionCall({
    name: "mintToken",
    type: "function",
    inputs: [{
      type: 'string',
      name: 'tokenURI'
      }]
  }, [_uri]);

  const transactionParameters = {
    to: nft_contract_address,
    from: ethereum.selectedAddress,
    data: encodedFunction
  };
  const txt = await ethereum.request({
    method: 'eth_sendTransaction',
    params: [transactionParameters]
  });
  return txt
}

The function initially creates a new object containing an encoded function call. This is necessary since we’re executing a transaction to a smart contract. With the encoded function finalized, it’s added as a parameter to the “transactionParameters” object along with the smart contract address. 

Finally, the last part sends the transaction to the blockchain, which will send a transaction hash back. This ID confirms that the token’s mint and that the user has it!

Step 5: How to Create an NFT Minting Website – Finding a Smart Contract

An essential part of the application that we haven’t considered is the smart contract. We need a smart contract when creating an NFT minting website, as this allows us to mint NFTs. However, we won’t make this complicated, and as we’re focusing on the development process of the dapp itself, we’ll provide you with an already working smart contract. To implement the smart contract into your code, all you need is to input the following into your JavaScript file:

const nft_contract_address = ""
/*
Available deployed contracts
Ethereum Rinkeby 0x0Fb6EF3505b9c52Ed39595433a21aF9B5FCc4431
Polygon Mumbai 0x351bbee7C6E9268A1BF741B098448477E08A0a53
BSC Testnet 0x88624DD1c725C6A95E223170fa99ddB22E1C6DDD
*/

What’s more, if you’d like to look closer at the contract, you’ll find it in the GitHub repository in the ”nft_base.sol” file. 

That’s it for this tutorial! If you have followed along, you now know how to create an NFT minting website in only five steps!

Create an NFT Minting Website – Summary

With the increased attentiveness towards NFTs and the flourishing state of the industry, now is a great time to get into NFT development. For this reason, we took this guide to show you how to create an NFT minting website in only five simple steps: 

  1. Creating a Moralis Dapp
  2. Connecting the Moralis SDK and Initializing Moralis
  3. Creating the HTML File
  4. Adding the JavaScript Logic
  5. Finding a Smart Contract

By following these steps, we were able to create an NFT minting website where users can continuously mint NFTs. What’s more, thanks to Moralis and – among other things – the operating system’s IPFS integration, we could do so in record time! 

If you found this article interesting, please make sure to browse additional articles here at NFTCoders to get the hottest NFT development content. For example, you can read about NFT game development or learn how to build an NFT marketplace!

July 1, 2022
Become a Moralis Mage
Get the latest information about Moralis Web3 in your email
Get Loved BY
the Web3 community

Related Articles