This page may contain legacy content

To get our most up-to-date content please access our documentation

November 16, 2021

Building dApps with MetaMask

Table of Contents

Decentralized applications (dApps) are being deployed daily on programmable blockchains such as Ethereum. As a blockchain developer, utilizing tools that make the dApp development process more straightforward is essential. As such, building Web3 applications with MetaMask and its Ethereum authentication functionalities make things a lot simpler. Moreover, when using Moralis, you can take advantage of its default MetaMask integration when creating dApps. Therefore, developing dApps with MetaMask and Moralis is something every developer should do. 

It is no wonder that MetaMask remains the most popular wallet. Not only among DeFi users but also among developers. Moreover, building dApps with MetaMask in combination with the right tools becomes straightforward. If there is one tool that makes all the difference, it is Moralis. This ultimate Web3 development platform offers full integration with MetaMask. Thus, it enables you to use this wallet as a gateway to the Web3 realm, both for you and your users. As such, we invite you to join us as we take a closer look at building dApps with MetaMask.  

Building dApps with MetaMask – Overview

Before we show you how you can go about building dApps with MetaMask, we need to get all the tools ready. As mentioned earlier, MetaMask and Moralis are two essential tools if you want to deploy dApps quickly. Moreover, we’ll also be using Visual Studio Code (VSC); however, feel free to use any other code editor that you prefer. So, here are the steps you need to take if building dApps with MetaMask in the quickest way possible and with minimum effort interests you:

  1. Download/install the MetaMask browser extension.
  2. Create your MetaMask account.
  3. Create your free Moralis account.
  4. Create your Moralis server. 
  5. Use the ultimate Ethereum dApp boilerplate to create your first dApp in minutes.

These five steps are the gist of building dApps with MetaMask. Moreover, they are what we will cover herein, and we invite you to follow along. Thus, if you can commit to taking action, you may easily build your first dApp by the end of this article. 

Building dApps with MetaMask – Setup

Since we have a separate article that answers “what is MetaMask?”, we would rather focus on installing this wallet and creating your account herein. That way, you’ll be able to receive and send crypto assets and use MetaMask as an authentication tool when creating Web3 applications.   

Installing MetaMask

Let’s start by going to “metamask.io”. Once there, we click the “Download now” button:

While MetaMask is also available for iOS and Android, as a developer, you’ll most likely be using its Chrome extension. Thus, we will focus on that option (it is normally selected by default). Next, just click the “Install MetaMask for Chrome” button:

Then, you will be redirected to Chrome’s web store, where you will need to click the “Add to Chrome” button:

Moreover, you also need to confirm your action by clicking the “Add extension” button from the pop-up window:

After that, you should be welcomed to MetaMask, where you will need to click the “Get Started” button:

Creating a New Wallet with MetaMask

On the next step, you’ll be asked if you are new to MetaMask and be given an option to create your new wallet or import your existing account. For the purpose of this tutorial, we will focus on creating a new wallet. As such, click the “Create a Wallet” button on the right-hand side:

Next, you’ll need to create your password and confirm it (make sure to write it down somewhere safe):

As you move on, you may be presented with an instructional video. You can watch it if you want; however, the next important step is about a secret recovery phrase that you should store safely. 

Once you reveal the secret words, copy them somewhere safe (it is best to hand-write and store them on a piece of paper). This is essential, so make sure to do this right (the order of the words matters). With these recovery phrases, you will be able to access your wallet from any other device or recover your account if needed. Once you’ve written down the phrases, click the “Next” button, which will take you to the next step, where you’ll need to enter your phrases from the previous step in the correct order:

MetaMask Wallet Overview

The above is the final step of your MetaMask wallet creation. Once you’ve entered the words in the correct order, complete the process by clicking the “Confirm” button. Now you will finally be able to access your new wallet:

If you want to build dApps with MetaMask, you need to get familiar with the basic options available with your new wallet (see the image above):

  • Network Selection (N) – By clicking this section, a drop-down menu containing all added networks will be displayed. To select any of them, you only need to click on them, and MetaMask will switch to that network. By default, MetaMask comes with Ethereum’s mainnet and four Ethereum testnet options. There is also an option to add networks from within MetaMask; however, there’s often a simpler way available for that purpose (we’ll cover an example as we move on).
  • Account Selection (A) – By clicking this icon, you get to import or create new accounts, switch among existing accounts (if you have more than one), connect a hardware wallet, lock your account, and access advanced settings.
  • Your Wallet AddressBy looking at the “Account 1” box in the middle of the top part of your MetaMask wallet, you can see a combination of digits and letters. This is your wallet address. Moreover, you get to copy it by simply clicking on that area. Using this address, you can receive crypto assets from peers or make withdrawals from a centralized exchange (CEX). 
  • Buy, Send, SwapWhen you want to buy, send, or swap coins and tokens, you get to use these corresponding buttons.
  • Assets and ActivityThe assets section shows all supported (you can also add tokens yourself) crypto assets in your wallet on the selected network. Moreover, the activity tab shows your transactions. 

MetaMask Demo

In case you feel like you do not have a clear understanding of how MetaMask works or how to use it, we recommend checking out the following video starting at 4:24: 

https://www.youtube.com/watch?v=9kdVAeZ7knk

Building dApps with MetaMask – Layer-2 Scaling Solutions

If you’ve been involved with the crypto realm for a while, you must have heard of layer-2 solutions. One of the main advantages of these types of blockchain networks is that they help you avoid paying absurd amounts of Ethereum gas fees. As such, let’s show you how to add one of the most reputable layer-2 scaling solutions (the Polygon network) to your MetaMask. 

We could do this manually from within MetaMask; however, by using Moralis, we get to do this with a click of a single button. Here’s how:

  1. Create Your Moralis Account – If you haven’t created your free Moralis account yet, do so now. Follow the link, enter your email address, and create your password. Don’t forget to complete the process by confirming your email address (you’ll receive an email with a confirmation link). In case you already have an active Moralis account, just log in.
  2. Go to Speedy Nodes – Inside your Moralis admin area, select the Speedy Nodes section from the menu on the left-hand side. 
  1. Access Endpoints – Click the “Endpoints” button under the Polygon network option. 
  2. Add to MetaMask – By clicking the “Add to MetaMask” button (see the image below), you get to add Polygon’s mainnet to your MetaMask. You can also add Polygon’s testnet (Mumbai) following the same steps. After clicking the button, MetaMask will ask you to confirm this action. Since Moralis is a trustworthy platform, you can click the “Approve” button. Next, you can also click the “Switch Network” button to switch your MetaMask network to Polygon.

If you’ve completed the steps above properly, you should now have the Polygon network available in your MetaMask:

If you’re interested in seeing a demo of MetaMask being used on Polygon for a simple transaction, make sure to check out the video above at 9:27.

Building dApps with MetaMask and Moralis

Finally, we get to the part where we show you how Moralis makes building dApps with MetaMask extremely easy. By creating a free Moralis account, you get full access to the entire arsenal of this powerful tool. This includes the ultimate Web3 SDK and API, including the ultimate Ethereum API, NFT API, and much more. However, to make things even simpler, we’ve created the best Ethereum dApp boilerplate, which is publicly available at GitHub. The latter includes multiple components, which enable you to implement both functionality and UI in minutes. 

Building dApps with MetaMask Using Moralis

When we say that building dApps with MetaMask and Moralis can be done in minutes, we are not exaggerating. In order to accomplish that, you need to follow these simple steps:

  1. Visit the Ethereum boilerplate GitHub page.
  2. Copy the GitHub URL for our boilerplate:
  1. Open up VSC, then open up a new terminal, and finally open up “Git Bash”.
  2. Inside the terminal, type:
    1. $ git clone (paste the boilerplate’s GitHub URL)
    2. $ cd ethereum-boilerplate 
    3. $ yarn install
  3. Insert your Moralis server URL and application ID (use the instructions below to obtain these details) inside the “.env.example” file:
  1. Again, use the VSC’s terminal and type “$ yarn run start”. This will start your dApp. 

In case there are any particular parts of the boilerplate that you don’t want to use, navigate to the “App.jsx” file and make the necessary edits. For detailed instructions, watch the above video (at 16:22). The video also covers all of the above steps (at 12:45).

Moralis Setup

Any time you’d like to create a project and to build dApps with MetaMask and Moralis, you will always need to complete the following steps:

  1. Log In to Your Moralis Account At this point, you should already have your Moralis account ready. So, just log in to access your admin area. However, if you haven’t created your free Moralis account yet, make sure to do so now.

Create a New Server – Inside your Moralis admin area, click the “+ Create a new Server” button in the top-right corner. From the drop-down menu appearing, select the network type that best suits your needs (see the image below).

Next, a pop-up window will appear asking for the server name (this can be anything you want), region, network, and chain(s). Enter this information and click “Add Instance”. It can take some time for the server to spin up, so please be patient. 

  1. Access Server Details – Once your server is ready, you get to access its details via the “View Details” button next to your server name. 


Clicking the “View Details” button will call a pop-up window containing all the information you need:

  1. Initialize Moralis – Now populate your “.env” file with the Moralis server details (application ID and server URL) to obtain the required backend functionality covered by Moralis:

Note: Make sure to use the details of your particular server and NOT the ones from the image above.

Building dApps with MetaMask – Summary

If you followed the steps above, you now know that building dApps with MetaMask is not complicated at all. While MetaMask serves as a gateway to the Web3 world, you get to put its full power to use with Moralis’ ultimate Web3 development platform (a.k.a. Firebase for crypto). Essentially, you need to complete the following five steps when building dApps with MetaMask:

  1. Download/install the MetaMask browser extension.
  2. Create your MetaMask account.
  3. Create your free Moralis account.
  4. Create your Moralis server. 
  5. Use the ultimate Ethereum dApp boilerplate to create your first dApp in minutes.

Of course, this is just a starting point. Aside from using boilerplate’s components, you can focus on its hooks. That way, you can put your JavaScript skills to use and create the best user interface (UI) to facilitate the backend functionality that Moralis covers for you. With this excellent tool at your disposal, you can create all sorts of Web3 applications without worrying about blockchain-related backend programming. 

Moreover, while MetaMask is the superior tool for authentication web users, WalletConnect offers a better solution for mobile users. Fortunately, Moralis also integrates WalletConnect. Furthermore, when you’re ready to move past the Ethereum boilerplate, you may use OpenZeppelin to fast forward your progress using practical templates. In addition, you may use Moralis’ YouTube channel and Moralis’ blog to access guides covering countless example projects. As such, you will level up your development skills and get some phenomenal ideas, including how to launch an NFT marketplace, create ERC20 tokens, or create a DeFi dashboard.

Market Data API
Build amazing trading and portfolio dapps with this Market Data API. Keep users engaged with up-to-date data!
Market Data API
Related Articles
August 31, 2022

Fastest Way to Build a Web3 App

November 1, 2023

Build on Solana and EVM – Solana & EVM Compatible APIs 

January 31, 2024

Building Cryptocurrency Price Trackers: Guide and Project Inspirations

February 7, 2023

IPFS Ethereum Tutorial – How to Use IPFS with Ethereum

October 12, 2023

Rinkeby Faucet Guide – What is the Rinkeby Faucet and Testnet?

December 30, 2022

Essential Web3 Programming Languages for 2023

December 26, 2022

Exploring Verse – A New Metaverse Programming Language from Epic Games

November 15, 2022

Get Wallet Balance – How to Get Wallets Native Crypto Balance

February 16, 2024

Query the Ethereum Blockchain for ERC-20s, Txs, NFTs, and More