🚀
Introduction
✨
Enhanced APIs
⛓
Chain APIs
📖
Documentation
💻
Tutorials
📜
Guides
📚
Resources
How to Set Up Core Web3 Developer Tools
This tutorial explains the core tools web3 developers need to install to start developing web3 applications. The tools mentioned in this guide are sufficient for web3 devs at most stages.
If you're a web3 developer trying to build blockchain dApps you have a lot of tools to choose from, but knowing which web3 developer tools are the right ones to use - and how to set them up - isn't always clear. This guide will show you the core web3 tools and teach you how to set them up.
Web3 Developer Tools
The web3 developer tools we'll cover in this article are:
Note for Windows users
If you're on Windows, all of the below instructions will work for you on the Windows Subsystem for Linux (WSL). WSL gives you the Linux experience without making you log off your Windows OS. So most linux commands will work on a WSL terminal as well.
So before you can follow along any of the below instructions, please install WSL from the Microsoft App store, and then go to the "Start" menu to open the app named "Ubuntu," to access the Ubuntu terminal from your Windows OS.
Note: Command Prompt will work in most cases, but some Linux commands are not supported.
Integrated Development Environments (IDE)
Visual Studio
Visual Studio is one of the leading IDEs used by a spectrum of developers, not just Web3.
Visual Studio's in-platform terminal, extensibility for new languages and great UI, make it a perfect IDE for all developers, and the most popular IDE today.
Remix
If you want to save yourself from the hassle of setting up your environment and get started right away - Remix is the web3 IDE tool for you.
Remix is an online all-integrated IDE that lets you test, deploy and execute smart contracts from the comfort of your browser tab.
Development Frameworks and Languages
Node and npm
Node.js is a Javascript runtime that serves as the base layer for many web-based projects.
Npm is a package manager to download and update packages for your Node.js ecosystem.
Both are typically crucial to manage packages and develop seamlessly in web3.
Below commands will work for all Linux, MacOS and Windows. Windows Subsystem for Linux (Recommended) and Command Prompt can be used on Windows.
To verify your installation you can type below commands in your Terminal and hit enter.
1
node -v
2
npm -v
Copied!
if you see a version number (for instance
14.0.1) node and npm are now installed in your system.To install the latest version of npm, you can do:
1
npm install -g [email protected]
Copied!
React and Next.js
React and Next are development frameworks which make it super easy for a developer to get started with developing applications.
React and Next.js come with packaged tools and configured files, which reduces the developer's effort to just writing code instead of managing the environment as well earlier.
Below commands will work for all Linux, MacOS and Windows. Windows Subsystem for Linux (Recommended) and Command Prompt can be used on Windows.
If not already installed, you can install react using the below command:
1
npm install react
Copied!
Then you can create a react app with the below command:
1
npx create-react-app sampleApp
Copied!
To install next.js, run the below command:
1
npm install next react react-dom
Copied!
Local Web3 Development Environment
Hardhat
Hardhat is the de-facto local Ethereum development environment.
Hardhat makes it very easy for web3 developers to:
- Deploy smart contracts and test on Hardhat's local network
While we recommend using Hardhat, other local ethereum environments include:
Below commands will work for all Linux, MacOS and Windows. Windows Subsystem for Linux (Recommended) and Command Prompt can be used on Windows.
To install hardhat in your systems, you can run the following:
1
npm install –save-dev hardhat
Copied!
When you want to create a Hardhat project in a specific directory, you can run:
1
npx hardhat
Copied!
Web3 APIs
Alchemy
To create an account with Alchemy, follow the below steps
- 1.
- 2.Name your app (e.g. "Sample App")
- 3.Choose a chain and a network (e.g. "Ethereum" as the chain and "Goerli" as the network)
- 4.If you click "View Key" from your dashboard, you can see the API Key, HTTP URL and Websocket URL which can now be plugged into your dApp!
Ethereum Libraries
Ethers.js
Ethers.js is one of the most common Ethereum libraries used by developers to interact with the Ethereum mainnet and Ethereum testnets via code.
Ethers.js has readily available and easy to use functions to deploy contracts, execute smart contract methods, send ethereum etc.
Below commands will work for all Linux, MacOS and Windows. Windows Subsystem for Linux (Recommended) and Command Prompt can be used on Windows.
To install ethers, you need to run the below:
1
npm install --save ethers
Copied!
To import the library in your javascript code (React or Next.js) you can write:
1
import {ethers} from "ethers";
Copied!
Wallet
Metamask
Metamask is one of the most common browser-based blockchain wallets used within the Web3 ecosystem, and blockchain application developers use it to test, build and deploy dApps.
Web3 consumers use MetaMask to store and manage their crypto assets, and interact with web3 applications, and use DeFi apps.
Here are some helpful tutorials to set up your MetaMask wallet and how to add Alchemy as an RPC endpoint to your Metamask which will make your transactions faster and easier to manage.
Metamask is currently supported only on Chrome, Opera, Firefox and Brave. It is not supported on Safari.
Block Explorer
Etherscan
Etherscan is an online block explorer (no installation needed) where users can search transaction hashes, contract addresses or EOA's and it will return all the info for that address/hash on a page.
Block explorers are helpful web3 developer tools when you need to see the status of a recently submitted transaction or the details of a smart contract.
Each testnet has their own block explorers. The most popular ones are:
Similarly, other chains and L2's have their own explorers:
Conclusion
Congrats! You have now set up your web3 environment and are ready to begin programming smart contracts like a professional blockchain developer!
If you enjoyed this tutorial for setting up your web3 environment, give us a tweet @AlchemyPlatform, or shout out the author @ankg404 on Twitter!