5 Must-have Tools to Set Up your Web3 Development Environment | dApp Development Basics
2023 is the year of dApps. This is despite the rise and fall of crypto, NFTs, web3 gaming among other solutions that had people convinced that Web3 was anything but a fad.
In fact, market research shows that despite dApps not appearing to catch on compared to their Web2 counterparts in the past few years, there’s been a steady growth in value which will reach US$ 368.25 billion by 2027.
Clearly, Web3 development will also remain important, for obvious reasons. Any technology stands no chance of surviving much less thriving if it fails to find third-party developers who could potentially build the next ‘killer app’ for said ecosystem.
Speaking of which, the first thing that budding developers starting off in this space would consider important is setting up their own development environment.
What is a Development Environment?
In order to build an application, understanding what you need in terms of tools and processes can help simplify and speed up development.
Being able to write code, test and finalize the build that will go live in a single environment can make life simple for developers themselves. Examples of popular development environments include Eclipse and Microsoft Visual Studio.
Being able to replicate this matters just as much for Web3 development even if the focus shifts from the adoption of centralized to decentralized technologies. This is despite the fact that the effort that goes into writing code, testing and deployment is a whole new experience altogether.
Speaking of which, the idea of writing smart contract code is unique to Web3 itself, and which is why it is well worth examining where it fits in, when building a standard dApp.
Components of a dApp
When you take one look at the diagram below, you’d understand that there are many more ‘moving parts’ to a dApp than there are to the conventional Web2 app. While the front-end looks familiar, every other component is distinct to Web3, thanks to the uniqueness of this space and blockchain technology in particular.
For starters, Metamask provides identification which is used to gain access to the dApp as a user. In addition, blockchain node providers such as Infura, Alchemy and QuickNode help developers circumvent the headache of setting up and running a node before building their own dApp.
Now, once you do set up a node through any of these providers, the task of communicating with and accessing data from the blockchain is handled by the standard JSON-RPC protocol API. Data that you will find stored as part of smart contracts for said blockchain as well as user or block-related data too.
Now that we understand the components of a dApp, let’s look at the tools that will be used to build some of these components.
5 Must-Have Tools for every Web3 Dev
If this has been your very first introduction to dApp development, you’d note that it is not only different from conventional web development but also much more complex.
In an attempt to deal with this complexity, here’s a list of 5 must-have tools for Web3 devs that has to be a part of their development environment:
Tool 1: Metamask
Just about everyone who is familiar with Web3 knows what Metamask is used for. Most people not only use it to transact and trade with a variety of cryptocurrencies and tokens but also use it as a means to connect with dApps and smart contracts as a whole.
One must remember that Web3 is all about privacy and security, so the idea of using email addresses, Facebook or even Google as a form of authentication is not something that is acceptable, for obvious reasons.
On the other hand, allowing a user’s Metamask public address as an identifier without the need for a password when they want to access a dApp is far more secure while using it to make gas fees payments on the testnet and mainnet when building their first dApp makes this is a handy tool too.
Tool 2: Frontend JS frameworks
When one refers to front-end development for websites or web applications, this usually involves user interaction that is considered par for the course in Web2. Interestingly, front-end development in Web3 is no different and which is why the same technologies can be used.
After all, we’re fetching information from the backend — regardless of technology used — and rendering it on screen for the user’s benefit. Still, in the case of Web3, connecting with decentralized nodes is how this occurs rather than with a centralized server. So, one must keep in mind that there are a few differences when it comes to getting these two to work together.
Speaking of technologies, vanilla JS can be used in front-end development but it’s better to use proper JS frameworks such as React, Angular, Vue and Svelte if you mean serious business. There are several benefits associated with such frameworks as they offer scalability and efficiency when building frontends.
Tool 3: Remix IDE
As shown above, a smart contract is business logic located at the backend and on the blockchain. Smart contracts facilitate some kind of value exchange when certain conditions are met, and that are stipulated in the contract code itself.
For the Ethereum platform, the language Solidity has been designed to write these smart contracts, and which is very similar to popular languages such as the C family and Java in terms of syntax.
As a budding Web3 developer, you can learn how to write smart contracts using the language Solidity by using the Remix IDE available in your browser. No complex install steps to run. It’s very simple.
In order to set up the Remix Integrated Development Environment, all you have to do is fire up your browser and key in: https://remix.ethereum.org/
Result
At the top left-hand corner of your screen, you have the File Explorer, File Search, Compiler, Deploy & run transactions and Debugger options. Once you are familiar with how to use these options, you can begin to write your code either in Solidity or Vyper.
Tool 4: Ganache
Now, even if we’ve covered Remix as a tool to write smart contracts in Solidity and test them on said testnet using Metamask, there are limitations that tend to make themselves apparent when using this tool.
Which brings us to Ganache, which is a part of the Truffle Suite and that can be used to perform the same functions but on a simulated, local version of the Ethereum blockchain. You can develop, test and deploy smart contracts using this tool, requiring a working knowledge of both Solidity and JavaScript.
All you have to do is navigate to https://trufflesuite.com/ganache/ and select ‘Download’ to obtain a release for your operating system.
As shown below, you can find the necessary setup files in the Github repo that follows.
Result
Tool 5: Etherscan
Classified as a blockchain explorer, this Ethereum-focused tool will help you search for transactions, wallet addresses and smart contract related information after your dApp has been deployed on said testnet or mainnet.
Navigating to https://etherscan.io is the only way to access this tool, as shown below:
Now, let’s say you wanted to check up on transactions made by said Ethereum address, otherwise known as ‘beaverbuild’: 0x95222290DD7278Aa3Ddd389Cc1E1d165CC4BAfe5
Copy and paste the address into the field and hit the Return key:
Result:
Bonus Tool: Node-as-a-service/ Full Stack dApp Development Platforms
If there’s one thing that distinguishes building a dApp from regular web2 apps, it is the necessity of a node that is part of said blockchain that you wish to build your dApp for.
As you know, nodes are part of the blockchain network itself and which hold all state changes made to the blockchain. However, not everyone will want to run and maintain such nodes.
This is why web3 platforms such as Infura, Moralis, QuickNode or Alchemy among a host of others not only offer nodes-as-a-service but also a full-stack dApp development platform for said network.
Opting for their service will ensure that you do have to spend your time managing or running a node but instead focus on what you do best: building dApps based on solid use cases.
That said, we’re building a developer-centric metaverse for you to learn, earn and get hired. Sign up to join the Lumos Metaverse Whitelist for exclusive access:
