Setting up your dev environment for Ethereum development takes just a few minutes. It’s important to have a basic understanding of a few general concepts before we start writing code. Introductions The Compound Protocol is a suite of Ethereum smart contracts that enable software developers to interface with cryptocurrency money markets. In order to supply or borrow assets from the protocol, you need to write to the Ethereum blockchain. Ethereum is a public network of decentralized nodes that process transactions and append them to an ever-growing ledger, which is known as the blockchain. Developers can write software called smart contracts that are hosted on the Ethereum network. Anyone with access to Ethereum can invoke write and read operations to and from the blockchain. In order to create a program for Ethereum and interact with Compound’s smart contracts, you need to have an access point to the network, some knowledge of smart contract architecture, and also some knowledge of JSON RPC. Ethereum Development Key Concepts Setting up your dev environment for Ethereum development takes just a few minutes. It’s important to have a basic understanding of a few general concepts before we start writing code. 1. - The most popular programming language for writing smart contracts on Ethereum. Solidity 2. - A JavaScript library for web browsers and Node.js that enables developers to elegantly read and write to the Ethereum blockchain. Smart contracts written in Solidity can be executed using JSON RPC from Web3.js. Web3.js 3. - A company that provides an API for simple Ethereum network access through HTTP and WebSockets. To access the network without a service like Infura’s API, you must host your own Ethereum network node. Infura.io 4. - The Ethereum Main Network (a.k.a Homestead) is considered to be the production environment. This is where real Ether (ETH) can be exchanged, burned, and mined. Also, there are popular public test networks: Ropsten, Göerli, Kovan, and Rinkeby. All of these networks can be accessed via Infura’s API. Ethereum Networks 5. - Cloudflare, a popular DNS and general web-infrastructure company provides a free API for accessing the Ethereum Main Net. . The network can be interfaced with at . However, you can interface with only Homestead; not Ropsten, Göerli, Kovan, or Rinkeby. Cloudflare’s Ethereum Gateway Unlike Infura, Cloudflare’s gateway can be used without an account or API https://cloudflare-eth.com 6. - A company that creates Ethereum development tools like Truffle, Ganache, and Drizzle. In this guide, we’ll be installing Ganache CLI so we can run our Solidity and Web3.js code locally during development. Truffle 7. - A command line interface for running a locally hosted instance of Ethereum. We can start up a blank Ethereum blockchain, or a fork of a public network’s blockchain on your local machine. Ganache CLI 8. - The Solidity compiler. This turns our human-readable Solidity code into Ethereum bytecode, which Ethereum network nodes understand how to execute. Solc 9. - A web browser extension that facilitates invocation of Ethereum smart contracts from a web page. MetaMask uses Web3.js under the hood. It is a tool for end users to use ETH, Ethereum based cryptocurrency tokens, and keep track of their Ethereum wallets when using decentralized, Web3 applications (a.k.a. DApps). MetaMask Installing MetaMask MetaMask is a web browser extension that can be installed on Google Chrome, FireFox, Opera, or Brave. End users can use the extension to interface with smart contracts. For example, when you visit you can use MetaMask to supply your cryptocurrency assets to the Compound Protocol. The act of supplying assets on that website uses Web3.js and JSON RPC under the hood. https://app.compound.finance/, Those remote procedure calls are invoking Compound’s smart contract functions, like mint, to accept your assets in exchange for cTokens. You can set the network on MetaMask to point to any of the public networks, your own network, and even your localhost network. As you’re developing your DApp’s front-end web page, you can also test the back-end of the DApp locally if you are running Ganache CLI. This makes MetaMask a solid testing and development tool in addition to being an end user product. The MetaMask browser extension the user visits. It uses the HTTP provider in which is selected in the pictured drop down menu(more on providers later). automatically imports the Web3 object as global JavaScript variable on every webpage Installing the Solidity Compiler (solc) Before you deploy a smart contract to an Ethereum network (or your localhost), you must first compile it to bytecode. This turns your program into machine-readable opcodes that Ethereum nodes understand how to execute. In addition to bytecode, the Solidity compiler also produces an ABI (application binary interface). This is a JSON object that maps to your bytecode. Web3.js (and other frameworks) can do JSON RPC using the ABI, and the address of your smart contract. Think of the ABI as the bridge between Web2 and Web3. Installing can be done using Homebrew on Mac or and the like on Linux distributions. Windows users need to build from source. . solc apt-get Solidity compiler installation instructions for any OS can be found in the Solidity documentation Once you have installed the Solidity compiler, you can use it on the command line to compile a Solidity file. If compilation succeeds, you’ll get bytecode and a JSON ABI. solc MySmartContracts.sol Installing Web3.js Web3.js is a popular library for interfacing with the Ethereum blockchain. To use it in a web page, you can import the library directly using a CDN like JSDeliver. <script src= > "https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js" </ > script To install the library for your built, front-end web project, or for a Node.js script/ server application, you can use NPM or Yarn for Node.js. . Click here to install the LTS of Node.js and NPM npm install web3 ## or: yarn add web3 To import Web3.js into a Node.js script or Browserify front-end project, you can use the following line of JavaScript: Web3 = ( ); const require 'web3' If you imported via CDN directly to a web page, the `Web3` variable will already be declared; no need for the line of code above. To initialize your Web3 object, you need to provide a network WebSocket or HTTP provider in which to point Web3. This is the default HTTP provider address and port for Ganache CLI, which you can run on your local machine. web3 = Web3( ); const new 'http://localhost:8545' If you want to connect to a public network via Infura, you can do so once you create an account and get your API key. Infura web3 = Web3( ); const new 'https://mainnet.infura.io/v3/_YOUR_API_KEY_' // Infura can also access public test nets // by changing the subdomain. // Eg: https://ropsten.infura.io/v3/_YOUR_API_KEY_ Infura Unless you already have your own Ethereum network nodes to be your entrypoint to the Ethereum network, you’ll need to make an account with a service like Infura. You get up to 100,000 API calls per day, for free, if you make a developer account at . https://infura.io/ Create a project, and copy your “Endpoint.” This contains your personal API key. Remember that you can change the subdomain of the URL to any of the public networks to switch the network your code interfaces with. Ganache CLI , made by the Truffle team, is an essential tool for Ethereum development and testing. You can easily spin-up your own instance of Ethereum on your local machine with 1 terminal command. When you boot up Ganache, it gives you 10 Ethereum wallets that each contain 100 fake ETH. You can use this test net ETH to test smart contracts on your localhost blockchain. Ganache CLI ganache-cli In addition to a blank-slate blockchain, you can also fork an existing public network. You would want to do a fork of a public net if you want to test out existing, public smart contracts on your local machine. Let’s unpack an example. Testing Out Compound’s Smart Contracts If you want to test out supplying Ethereum assets to Compound’s Main network smart contracts, you can run Ganache with a fork of Main net. You can use the same addresses as the production Compound Protocol contracts, except interacting with them will only change the blockchain running on your local machine. Easy, streamlined development and testing. ganache-cli -f https: //cloudflare-eth.com Installing Ganache CLI can be done with NPM or Yarn. . If you haven’t already click here to install the LTS of Node.js and NPM ## Installs Ganache CLI globally so you can run it
## anywhere npm install -g ganache-cli
## or: yarn global add ganache-cli with `ganache-cli` Programming Your First DApp Now that we have an understanding of basic Ethereum concepts, and we’ve set up our dev environment, we can write a full DApp. Total development time: . 5 minutes We’re not going to use the Compound Protocol just yet. Baby steps. After you complete this walkthrough, you’ll be ready to learn how to , which is the next quick start guide. Supply Assets to the Compound Protocol Writing a Smart Contract with Solidity Create a directory on your local machine for your DApp project files. You can do this on the command line. mkdir first-ethereum-dapp first-ethereum-dapp/ cd We’ll write our smart contract in a Solidity file called FirstContract.sol. touch FirstContract.sol
## or on non-bash Windows CLI: fsutil file createnew FirstContract.sol 0 Open the Solidity file with your favorite text editor for writing code. I’ll be using Sublime text, which has a . community-made syntax highlighter for Solidity Here is the code for our contract file. solidity ^ .12;

contract FirstContract { getInteger() returns ( ) { ;
  }
} pragma 0.5 function public pure uint return 123 The contract has 1 getter function, and all it does is return 123. Once you write the code, save this file. Compiling a Solidity Smart Contract Next we’ll build our contract using the Solidity compiler CLI. On your command line, run the following. solc --bin --abi -o ./build FirstContract.sol This will create a folder called “build” in your project directory and also write 2 files to that folder. One contains the contract bytecode, and the other contains the contract ABI. Configuring Your Project and Local Development Environment Next, we’ll need to use a Node.js script to deploy the code to Ganache. If you haven’t already, install Node.js. . Click here to install the LTS of Node.js and NPM From your project directory, run the following command on the command line. npm init -y ## OR if you're a yarn person ## yarn init -y This creates a package.json file which keeps track of project metadata and dependency data. There’s no need to view or edit this file for now. Next, let’s install our dependencies. npm install web3 ganache-cli http-server ## alternatively ## yarn add web3 ganache-cli http-server To run scripts inside of the node_modules/.bin/ folder, you can globally install the npx module. npm install -g npx ## or: yarn global add npx Create a second terminal window and navigate to the project directory using cd. Here, we are going to run our instance of Ganache. first-ethereum-dapp/

npx ganache-cli cd Deploying to Your Local Test Net Now that we have our own test blockchain running on our local machine, we can deploy the contract we built earlier. In your first command line window, make a new file called . deploy.js touch deploy.js Add the following code to the file. Running this script will deploy our smart contract to the instance of Ganache, which is running in our other command line window. fs = ( ); Web3 = ( ); web3 = Web3( ); bytecode = fs.readFileSync( ); abi = .parse(fs.readFileSync( ));

( { ganacheAccounts = web3.eth.getAccounts(); myWalletAddress = ganacheAccounts[ ]; myContract = web3.eth.Contract(abi);

  myContract.deploy({ : bytecode.toString()
  }).send({ : myWalletAddress, : }).then( { .log( ); .log( ); .log(deployment.options.address);
  }).catch( { .error(err);
  });
})(); const require 'fs' const require 'web3' const new 'http://localhost:8545' const './build/FirstContract.bin' const JSON './build/FirstContract.abi' async ( ) function const await const 0 const new data from gas 5000000 ( ) => deployment console 'FirstContract was successfully deployed!' console 'FirstContract can be interfaced with at this address:' console ( ) => err console Save the file and run it using the following command. node deploy.js If successful, you will see the following output on your command line. > FirstContract was successfully deployed!
> FirstContract can be interfaced with at this address:
> 0x702f935d608Aadf90323310c489B2903af20AA43 The hexadecimal number you see is the address on the blockchain where our contract now lives. Your address might be different from mine! . Copy this value and save it for later Writing the Front-End Web Page of our DApp The blockchain can be written to or read from with all modern web browsers, thanks to web3.js. Our DApp won’t do any blockchain writes from the browser, so we won’t be needing MetaMask for approving ETH transactions. Create an HTML file in your project called index.html. touch index.html We’ll put our user interface and our Web3.js code in this file. First DApp First DApp FirstContract.getInteger <!DOCTYPE html> < > html < > head < > title </ > title </ > head < > body < > h1 </ > h1 < > label </ > label < /> br < = > label id "myLabel" </ > label </ > body < = > script src "https://cdn.jsdelivr.net/npm/web3@1.2.6/dist/web3.min.js" </ > script < > script web3 = Web3( ); myContractAddress = ; myAbi = []; myContract = web3.eth.Contract(myAbi, myContractAddress); htmlLabel = .getElementById( );

myContract.methods.getInteger().call().then( {
  htmlLabel.innerHTML = jsonRpcResult;
}); const new 'http://localhost:8545' const '' const const new const document 'myLabel' ( ) => jsonRpcResult </ > script </ > html You can see that we create a Web3 object and point it to our local Ganache in the JavaScript section of the file. Then we call our smart contract function “getInteger” and update the UI with the result. You might catch that we are missing something. We need the contract address, and also the ABI. Without these values, the Web3 object does not know where our contract lives or its callable methods. Update the myContractAddress variable with the hexadecimal value you saw logged on the command line when you ran the deploy script. Make sure it is wrapped in quotes so it is of type string. Copy the contents of ./build/FirstContract.abi and paste it over the value of myAbi in the HTML file. Don’t wrap this value in quotes. Now save the file. index.html Running Your New Full-Stack DApp We’re ready to run our DApp! From the command line, run the following command to boot up a HTTP server, which will serve our HTML file when it is requested from a web browser. npx http-server
> Starting up http-server, serving ./
> Available on:
> http://127.0.0.1:8080
> Hit CTRL-C to stop the server As you can see from the command line log, we now have a server that can be reached at . Open up your favorite web browser and navigate to that address to access the DApp. http://localhost:8080 If everything works according to plan, you’ll see something like the following. When the web page loads, there is no integer value inside our HTML label. We are using web3.js to get the value from our smart contract function which is living on our local Ganache blockchain. Congratulations! You have written your first full stack DApp. I hope this quick start guide got you up to speed on basic Ethereum DApp development. In the next quick start guide, we will run through supplying Ethereum assets to the Compound Protocol from JSON RPC, and also from our own Solidity smart contracts on the blockchain. Thanks for reading and be sure to . Feel free to comment on this post, or get in touch in the #development room on our very active . subscribe to the Compound Newsletter Discord server (Originally published here )

Dapp

Google

Read My Stories

Too Long; Didn't Read

Discover Saakuru: Web3 Mass-Adoption with 0-FEES

How To Set up Your Own Ethereum Development Environment [A Step by Step Guide]

Too Long; Didn't Read

Companies Mentioned

Adam Bavosa

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Set up Your Own Ethereum Development Environment [A Step by Step Guide]

Too Long; Didn't Read

Companies Mentioned

Adam Bavosa

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES