Building Ethereum dApps in frameworks such as Angular is becoming increasingly popular as blockchain technology is gaining mass adoption. For some, transitioning from Web2 to Web3 might seem intimidating. However, by utilizing Moralis and its SDK, blockchain development becomes a straightforward process. As such, you can implement Angular’s framework and use Moralis when creating decentralized applications. Therefore, if you want to develop an Ethereum dApp using an excellent framework, you’ll appreciate this brief tutorial as you’ll discover how to build Ethereum dApps in Angular.
Before we go into the process of showing how to use the Angular framework with Moralis, you should start by signing up with Moralis. Creating a Moralis account is free and provides short snippets of JavaScript code from Moralis’ documentation to copy and paste, helping you create backend Infrastructure for your dApp according to your taste. As such, you can save months of dApp coding and technical preparation time using Moralis.
What is Angular?
Angular is a scalable and open-source web application framework. It offers numerous advantages for Ethereum dApp development. Moreover, Angular provides a library that covers numerous features. As such, the coding process of dApps becomes markedly quicker and simplistic, and it enables you to create high-quality frontend UIs for your dApps.
For a more in-depth explanation of what Angular is, make sure to check out our previous article called “Angular Explained – What is Angular?”.
What are Ethereum Angular dApps?
Blockchain technology offers several advantages over conventional applications. When you add a UI to your Ethereum dApp using Angular, it is safe to call it an “Ethereum Angular dApp”. It means that you are creating the dApp using Ethereum’s blockchain technology with a user interface coded in Angular.
Moreover, UIs that Angular offers translate into unparalleled simplicity, which significantly cuts down the coding time. Angular dApps uses a simple but powerful TypeScript-based language that offers many advantages over JavaScript. The Angular TypeScript code ultimately converts into JavaScript before execution at runtime.
The Ethereum Blockchain
Ethereum is a blockchain with its cryptocurrency called Ether. It offers the advantage of storing data on the blockchain that is impossible to tamper with or hack. Moreover, decentralized applications (dApps) make use of this data. As such, decentralized applications harness this stored data and take advantage of the power of the blockchain network.
However, Ethereum is not the only blockchain that offers to build dApps. There are other chains available as well, such as Polygon, BSC, Avalanche, and Fantom. Moralis offers full support for all of the four mentioned blockchains; however, more networks are expected to be supported soon!
Another technology that can help you build Ethereum dApps in Angular is Moralis. Moralis is quickly emerging as the ultimate Web3 operating system. The dApp development process becomes more streamlined and straightforward when you use Moralis since the platform does all the heavy lifting for you. It provides you with the backend infrastructure that every dApp needs.
Therefore, the duration of setting up the backend infrastructure for your dApp is cut down to a few hours. If you attempted to set up the same backend functionality yourself without Moralis, it would take you several weeks, if not months.
Why Use Moralis as your Ethereum dApp Backend?
When you use Moralis as your Ethereum dApp backend, you can focus and spend more time enhancing the frontend that your dApp users will adore. Moralis is also infinitely scalable and offers cross-chain interoperability. This means that you can start a project on Ethereum’s network and then later move over to BSC (Binance Smart Chain).
Do you think that you can build Ethereum dApps in Angular that can form headlines? Alternatively, do you want to play around with code that may become something impressive?
Whatever your intentions may be, Moralis is the platform that can help you get started quickly and launch your dApp in record time.
Moralis’ platform provides you with boilerplate code facilitating integration with the Angular framework right out of the box. The platform offers several features that almost all dApps require at their backend.
Moralis adds these functionalities for your dApp’s users in a matter of a few hours rather than months. Crypto login may tempt your users to search for information such as their transactions, NFTs, etc. You’ll explore more regarding this as you move along in this article.
You can provide the user with a DeFi dashboard furnished with different kinds of information that all dApps need. In other words, you do not have to reinvent the wheel while creating phenomenal dApps.
Using the Moralis SDK to Build Ethereum dApps in Angular
You can create a Moralis server with just one click after signing up with Moralis. Furthermore, when you create dApps with Moralis, setting up a server is an essential part. Moreover, developing a dApp on Ethereum utilizing Moralis is an easy three-step process:
Step 1: Setup the Moralis Server
First, you must create a free account with Moralis and then log in to your Moralis account. Setup the Moralis server by clicking the “+ Create a new Server” button at the top right of the Moralis admin panel after logging in.
From the drop-down list, select the mainnet (or the option you prefer). The three drop-down menu options ask you to specify on which network you want your dApp to go live. We always recommend selecting the testnet option when starting a new project for the first time.
Fill in the short form to create the server in Moralis.
Select the blockchain network that you’ll use to create your dApp. In this case, we will select the “Eth (Mainnet)” option. You can opt for multiple networks since Moralis is cross-chain compatible. Once done, click the “Add Instance” button at the bottom right corner.
Step 2: Install the Moralis SDK
Installing Moralis’ SDK is a piece of cake. There are many ways to install the Moralis SDK; however, we will use npm (node package manager) to install the Moralis SDK.
Note: Make sure that you have installed “node.js”.
The command is as follows:
npm install moralis
Step 3: Initialize Moralis
The final step is to initialize Moralis. Doing this will enable us to use Moralis’ features and functionalities. To accomplish this, we’ll need the application ID and server URL. To obtain this, click the “View Details” button in the Moralis admin panel on your server.
The following pop-up will open, and you’ll see the “Server URL” and “Application ID” information:
The code to initialize the Moralis server is as follows:
/* Moralis init code */
1. const serverUrl = "YOUR_SERVER_URL";
2. const appId = "YOUR_APP_ID";
3. Moralis.start({ serverUrl, appId });
Now, you can see that we have laid the foundation of a dApp.
For more information on how to connect the SDK, see Moralis’ documentation.
The Moralis SDK Code Examples for Building Ethereum dApps
After initializing the Moralis SDK after the Moralis server launches, you can start utilizing the SDK. As an example, if you want to allow a user to log in to your dApp, you need to copy-paste two lines of code as shown below:
Moralis.Web3.authenticate().then(function(user){
console.log(user.get('ethAddress'))
})
The power of Moralis is that as soon as the user logs in to the dApp, the user information is readily available from the Moralis database server. You do not have to take on the hassle of setting up your database server. As you quickly build the backend of your dApp with Moralis, the Angular framework will take care of the frontend of your dApp.
Moralis’ SDK is a powerful toolbox that helps you build dApps quickly and easily. In the following sections, you’ll see how easily you can perform many different kinds of operations.
Getting Transactions:
//get mainnet transactions for the current user const transactions = await Moralis.Web3API.account.getTransactions();
The “await” keyword will pause the program execution. Once the promise of fetching transactions of the user account completes, the code execution continues.
Getting MATIC/BNB Balance:
//get mainnet native balance for the current user const balance = await Moralis.Web3API.account.getNativeBalance();
Note: You need to enter the correct value inside the parentheses after “getNativeBalance” to fetch the MATIC or BNB balance. For more information, check out Moralis’ documentation.
In this code, the native balance of the dApp’s user is fetched and stored in the “balance” constant.
Fetching ERC-20 balance:
const balance = await Moralis.Web3API.account.getTokenBalance();
The above code provides access to token balance.
Getting NFT balance:
const userEthNFTs = await Moralis.Web3API.account.getNFTs();
The above code explains some common programming scenarios with Moralis. You can devise any form of query, for instance, filtering, sorting, and more. The most notable thing in the mentioned examples of the Moralis code is that if you had tried to gain the same functionality from scratch (without Moralis’ tools, components, and so on), it would take nearly a month, and we made it in a few minutes. This truly shows the power of the Moralis SDK.
Ethereum Angular Boilerplate Code to Integrate Angular with Moralis
To use the Angular framework with Moralis, download the “demo-apps” folder from GitHub. Make sure that the “demo-apps” folder contains the “moralis-angular-app” folder. To access the “demo-apps” folder from GitHub, visit the following link: https://github.com/MoralisWeb3/demo-apps.
Download the “demo-apps” folder containing “moralis-angular-app”. Open the “moralis-angular-app” folder into your preferred code editor. We will be using Microsoft Visual Studio Code (VSC).
The contents in the folder will look something like the following:
Open the “Terminal” from the terminal tab in Visual Studio Code.
Run the following command in the command-line terminal:
npm run start
As such, it will launch “moralis-angular-app” in production mode.
Add another terminal tab by clicking the “+” button on the right-hand bottom side in Visual Studio Code. Then, run the following command:
npm run demo
This command will run “moralis-angular-app” in development mode.
Angular Development Mode Login
The simplest way to log in is by using MetaMask or WalletConnect. When you use “moralis-angular-app” as previously described, you will find a URL in the terminal window of Visual Studio Code. As such, open that URL. That URL will be similar to the following:
http://dev.localhost:5222/
Here, the “dev” in the URL shows that you are in development mode. The “localhost” means that the service runs on your local computer, and the “5222” number is the port number. You will see a similar MetaMask and WalletConnect login screen shown in the following section. The only difference is that in the current one, you’re in development mode.
This will allow you to log in with MetaMask or WalletConnect in Angular to connect your dApp to crypto wallets.
Note: When you run the commands below, you may get an error saying, “You seem not to be depending on ‘@angular/core’ and ‘rxjs.’ This is an error”.
These are the commands mentioned:
npm run start npm run demo
If this happens, run the following command:
npm install
That command should remove the error.
Angular Production Mode Login
“moralis-angular-app” provides you with the capability of utilizing login with Angular to MetaMask and WallectConect. These two are the most popular crypto wallets that connect to dApps to facilitate transactions. All the crypto earnings go into or out of these wallets from your dApp.
Once you execute the “npm run start” command, you need to scroll down in the terminal and find a link similar to the following:
http://localhost:4222/
The link shows that the service runs on a local computer, and “4222” is the port number of the service.
You need to open that link, and you should find a page similar to the following:
When you see the above page, click on “Login with MetaMask”, and you will log in to your MetaMask account. Make sure that you already have the MetaMask browser extension installed in your web browser and that you have a MetaMask account.
Similarly, when you click the “Login with WalletConnect” button, you will see a QR code pop up. Scan the QR code with your mobile device, and you will connect your dApp with WalletConnect.
When you click on the “Login with MetaMask” button and sign within the MetaMask extension, your dApp will connect with the MetaMask wallet.
You can similarly connect with WalletConnect by clicking the “Login with WalletConnect” button.
Integrating Angular with Moralis to Build Ethereum dApps
To integrate Angular with the Moralis server, head over to the “env.ts” file in “moralis-angular-app”.
Enter your server’s values of “appId” and “serverUrl”, as we did earlier.
We can obtain the server details as we did earlier. Then, we can copy-paste the server URL and application ID. Therefore, head over to your Moralis account and click on “View Details”. You will see the following pop-up window:
Copy-paste the application ID to the “appId:” field and the server URL to the “serverUrl” field in the TypeScript code.
After integrating Angular with Moralis, run “moralis-angular-app” and browse the URL on the localhost as you did before. You will see the following web page as you log in to MetaMask:
Notice that you get the Moralis authentication ID. You are now ready to create the frontend of your dApp in Angular, with Moralis covering your backend without the burden of building your server infrastructure. As such, you can save months of coding effort and expense for the same functionalities.
From here, you can let your creativity run wild and develop phenomenal dApps. For further development of your dApp, you can refer to the official documentation of Moralis.
Visual Aid in How to Build Ethereum dApps in Angular
If you are more of a video person and would like to explore all of the details mentioned in this article by watching a clip from YouTube, make sure to check out the following video from Moralis’ YouTube channel. As such, you’ll follow along with one of Moralis’ experts as he explains how to utilize the Angular boilerplate with Moralis, as we’ve discussed throughout this article.
Smart Contracts in Solidity to Build Ethereum dApps in Angular
When you build Ethereum dApps, you must have an understanding of Solidity’s programming language. Solidity is the programming language in which dApp builders develop smart contracts.
Smart contracts are programs stored on the blockchain, such as Ethereum, and the execution of the smart contracts takes place when the right conditions become valid. Smart contracts can be thought of as the way you organize code, store data, and write all of your programming logic.
It is a high-level language to create smart contracts, and its creation has influences from JavaScript, C++, and Python. Smart contracts run on Ethereum Virtual Machine (EVM) that forms the Ethereum blockchain.
To create a smart contract, you need to utilize an IDE (integrated development environment) such as Remix. You can download Remix to your computer, or you can use it in your browser and start coding from there in Solidity.
Solidity is not hard to learn, and it can be a powerful tool.
Summary of How to Build Ethereum dApps in Angular
There is no better solution available in the blockchain industry that allows you to set up your server with all the necessary services for your dApp to thrive. Moralis adds enormous value to your dApp in the form of ease of use and saves you loads of time and effort with many other benefits. As such, you can focus on frontend coding for your dApp.
Similarly, when Angular and Moralis integration occurs, it offers a powerful solution for your frontend. Make your dApp creation faster, and you will enjoy all the other perks to build Ethereum dApps in Angular, such as one-page coding for the frontend and a remarkable user experience.
If you would like to take your blockchain development skills to the next level, make sure to check out Moralis Academy. At Moralis Academy, we teach blockchain development from scratch. If that sounds interesting to you, enroll in our 2021 JavaScript Programming for Blockchain Developers course. However, if you already consider yourself to be an experienced developer and would like to take on the challenge of learning how to program smart contracts, check out our Ethereum Smart Contract Programming 101 course. There, you’ll dive deep into what smart contracts are all about. Plus, you’ll be able to build and deploy your own Ethereum smart contracts.
