{"id":10001,"date":"2023-02-28T21:33:56","date_gmt":"2023-02-28T18:33:56","guid":{"rendered":"https:\/\/crypto-mining.blog\/?p=10001"},"modified":"2023-02-28T21:34:37","modified_gmt":"2023-02-28T18:34:37","slug":"how-to-create-a-dapp-in-nodejs-for-metamask","status":"publish","type":"post","link":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/","title":{"rendered":"How to create a DApp in NodeJS for MetaMask"},"content":{"rendered":"<figure class=\"wp-block-post-featured-image\"><a href=\"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/\" target=\"_self\"  ><img decoding=\"async\" width=\"300\" height=\"225\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/what_is_dapp21_09460eb821.png\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"How to create a DApp in NodeJS for MetaMask\" style=\"object-fit:cover;\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/what_is_dapp21_09460eb821.png 800w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/what_is_dapp21_09460eb821-300x225.png 300w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/what_is_dapp21_09460eb821-218x163.png 218w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/what_is_dapp21_09460eb821-768x576.png 768w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/what_is_dapp21_09460eb821-700x525.png 700w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/what_is_dapp21_09460eb821-769x577.png 769w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/figure>\n\n\n<p><strong>DApps<\/strong>or decentralized applications are applications that do not rely on a single server for their operation and security. Instead, they use blockchain and oracles as the backbone of their system, making them more secure from malicious activities and hacks.<\/p>\n\n\n\n<p>This tutorial shows the steps to create a basic end-to-end decentralized application. With this app, users can check the current Ethereum price and store it in a smart contract.<\/p>\n\n\n\n<p>Initially, make sure you have NodeJS and MetaMask installed:<\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly9ub2RlanMub3JnL2VuLw==\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\"  target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/nodejs.org\/en\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly9tZXRhbWFzay5pby8=\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/metamask.io\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>What is a decentralized application (dApp<\/strong>)<strong>?<\/strong><\/h2>\n\n\n\n<p>In a dApp, the backend code runs on a blockchain, unlike a traditional application where the backend code runs on centralized servers. A dApp can have external code and user interfaces written in any language and deployed on any server or servers to interact with internal logic.<\/p>\n\n\n\n<p>Because the backend logic is housed in highly secure, tamper-proof smart contracts, dApps have many advantages not available to traditional Web2 systems:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>zero downtime<\/li>\n\n\n\n<li>greater privacy<\/li>\n\n\n\n<li>resistance to censorship<\/li>\n\n\n\n<li>performing logic with a minimum level of confidence<\/li>\n<\/ul>\n\n\n\n<p>However, these advantages also have some disadvantages. Maintaining dApps requires more effort because the code deployed on the blockchain is not modifiable by default. In addition, because the logic is executed on a distributed network rather than on a centralized server, maintenance costs also increase. In addition, the user experience can suffer because the dApp user has to go through the hassle of creating a Web3 wallet and funding it with enough cryptocurrency to pay transaction fees.<\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>DApp Components<\/strong><\/h2>\n\n\n\n<p>The components of a dApp can be divided into three different categories: smart contracts, frontend logic and user interface, and data storage.<\/p>\n\n\n\n<p><strong> Smart contracts <\/strong> Smart contracts store the DAPP business logic, as well as the state of the application. This is the biggest difference between DAPP and the traditional web application, and this is what Dapp gives all the advantages mentioned above.<\/p>\n\n\n\n<p><strong> Front-end\/user interface <\/strong> while the logic of the DAPP bachelor requires the spelling of the smart contract code for deploying on the blockchain, the front-end or customer part of the DAPP can use standard web technologies such as HTML and JavaScript. This allows the developers to use familiar tools, libraries and frameworks. The user interface on the client side is usually associated with smart contracts through client libraries, such as Web3.js or Ethers.js<\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly93ZWIzanMucmVhZHRoZWRvY3MuaW8vZW4vdjEuNy40Lw==\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/web3js.readthedocs.io\/en\/v1.7.4\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly9kb2NzLmV0aGVycy5vcmcvdjUv\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/docs.ethers.org\/v5\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p>They come bundled with frontend resources and are sent to the browser along with the user interface. Interactions with smart contracts, such as signing messages and sending transactions to smart contracts, are usually done through a browser-based Web3 wallet, such as MetaMask.<\/p>\n\n\n\n<p><strong> data storage <\/strong> Most applications need to store data, but due to the distributed nature of the blockchain, storage of large volumes of data on the chain is inappropriate and can be very expensive. Therefore, many DAPPs that need to store data use off-shain data storage services, such as IPFS or Filecoin, leaving blockchain only to store an important business logic and condition.<\/p>\n\n\n\n<p>Traditional cloud storage services can also be used. However, many developers choose decentralized options to preserve and extend the trust minimization properties that blockchain-based dApp provides.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"895\" height=\"1024\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-13-895x1024.png\" alt=\"\" class=\"wp-image-9959\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-13-895x1024.png 895w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-13-262x300.png 262w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-13-768x879.png 768w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-13-769x880.png 769w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-13.png 1264w\" sizes=\"(max-width: 895px) 100vw, 895px\" \/><\/figure>\n<\/div>\n\n\n<p>Now that we know the components of the dApp, let&#8217;s look at an example of creating a simple end-to-end contract.<\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong> Creation of smart contract <\/strong><\/h2>\n\n\n\n<p>The smart contract in our DAPP will be a simple example used to search for data and reflect the state changes on the blockchain. In this case, we will look for the cost of ETH\/USD using <strong> eth\/USD Data Feed <\/strong>, and then constantly maintain the result in a smart contract.<\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly9kYXRhLmNoYWluLmxpbmsvZXRoZXJldW0vbWFpbm5ldC9jcnlwdG8tdXNkL2V0aC11c2Q=\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/data.chain.link\/ethereum\/mainnet\/crypto-usd\/eth-usd<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p>The first thing to do is to open the documentation and go to the Using Data Feeds page:<\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly9kb2NzLmNoYWluLmxpbmsvZGF0YS1mZWVkcy9wcmljZS1mZWVkcw==\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/docs.chain.link\/data-feeds\/price-feeds<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p>From there, you can copy the example source code and paste it into a new file in the IDE of your choice (e.g. Visual Code), or click the &#8220;Open In Remix&#8221; button and work from the Remix web version.<\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly9jb2RlLnZpc3VhbHN0dWRpby5jb20v\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/code.visualstudio.com\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p>In this example, we will work with Visual Studio Code and Hardhat, the framework for developing the Ethereum virtual machine.<\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly9oYXJkaGF0Lm9yZy8=\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/hardhat.org\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p>First, we create a new directory structure for our dApp with a backend folder for the smart contract code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>mkdir chainlink-dapp-example\ncd chainlink-dapp-example\nmkdir backend\ncd backend<\/code><\/pre>\n\n\n\n<p>Next, we open the directory created for our dApp in the VS Code editor and then install Hardhat:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm init -y\nnpm install --save-dev hardhat\nnpx hardhat\n(choose create javascript project, choose default parameters)<\/code><\/pre>\n\n\n\n<p>After that, delete the Touch.sol file in the &#8220;contracts&#8221; folder, create a new file in that folder called PriceConsumerV3.sol and save it. Here we will create our smart contract, so copy the code from the example in the Chainlink documentation into this file and save it.<\/p>\n\n\n\n<p>In the example code, you will see that the demo contract already has the getLatestPrice function to find the current Ethereum price on the Rinkeby ETH\/USD Data Feed.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function getLatestPrice() public view returns (int) {\n        (\n            \/*uint80 roundID*\/,\n            int price,\n            \/*uint startedAt*\/,\n            \/*uint timeStamp*\/,\n            \/*uint80 answeredInRound*\/\n        ) = priceFeed.latestRoundData();\n        return price;<\/code><\/pre>\n\n\n\n<p>We need to create a new variable and a new function to store this value in the smart contract. The first step is to create a new variable under the existing priceFeedone to store the Ethereum price:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>int public storedPrice;<\/code><\/pre>\n\n\n\n<p>Next, we need to create a new function that will be called by the dApp frontend. This function should search for the latest Ethereum price by calling the existing getLatestPrice function. It should then store that value in the new storedPrice parameter:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function storeLatestPrice() external {\n        storedPrice = getLatestPrice();\n    }<\/code><\/pre>\n\n\n\n<p>Your new contract should look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ SPDX-License-Identifier: MIT\npragma solidity ^0.8.7;\n\nimport \"@chainlink\/contracts\/src\/v0.8\/interfaces\/AggregatorV3Interface.sol\";\n\ncontract PriceConsumerV3 {\n\n    AggregatorV3Interface internal priceFeed;\n    int public storedPrice;\n\n    \/**\n     * Network: Rinkeby\n     * Aggregator: ETH\/USD\n     * Address: 0x8A753747A1Fa494EC906cE90E9f37563A8AF630e\n     *\/\n    constructor() {\n        priceFeed =\nAggregatorV3Interface(0x8A753747A1Fa494EC906cE90E9f37563A8AF630e);\n    }\n\n    \/**\n     * Returns the latest price\n     *\/\n    function getLatestPrice() public view returns (int) {\n        (\n            \/*uint80 roundID*\/,\n            int price,\n            \/*uint startedAt*\/,\n            \/*uint timeStamp*\/,\n            \/*uint80 answeredInRound*\/\n        ) = priceFeed.latestRoundData();\n        return price;\n    }\n\n    function storeLatestPrice() external {\n        storedPrice = getLatestPrice();\n    }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong> Defense of the smart contract <\/strong><\/h2>\n\n\n\n<p>Now you&#8217;re ready to compile and deploy your contract in the Rinkeby test network. Don&#8217;t forget to top up your MetaMask wallet with some Rinkeby ETH first.<\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly9mYXVjZXRzLmNoYWluLmxpbmsv\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/faucets.chain.link\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p>If you are using Remix, you can compile and deploy your contract using the standard Remix process. If you are using an IDE such as Visual Studio Code, we recommend using Hardhat to manage your contracts.<\/p>\n\n\n\n<p>The first step to compile and deploy your contract is to install the Hardhat tool library, the Chainlink contract library, and the dotenv library for storing passwords and secret keys in a separate .env file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install --save-dev @nomicfoundation\/hardhat-toolbox\nnpm install @chainlink\/contracts --save\nnpm install dotenv<\/code><\/pre>\n\n\n\n<p>Then replace the contents of the hardhat-config.js file with the following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"487\" height=\"527\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-23.png\" alt=\"\" class=\"wp-image-9994\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-23.png 487w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-23-277x300.png 277w\" sizes=\"(max-width: 487px) 100vw, 487px\" \/><\/figure>\n\n\n\n<p>The next step is to create an .env file in the backend folder. Then you need to extract your private key from the Web3 wallet and paste it into the value section of the PRIVATE_KEY field in the .env file. Please make sure that you are using a new Web3 wallet that has no funds in mainnet.<\/p>\n\n\n\n<p>After that you need to get an RPC endpoint to access the Rinkeby network. You can do this by inserting the RPC URL in the RINKEBY_RPC_URL field in the .env file. We recommend signing up for a free Infura or Alchemy account to get the RPC URL.<\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly93d3cuaW5mdXJhLmlvLw==\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/www.infura.io\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly93d3cuYWxjaGVteS5jb20v\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/www.alchemy.com\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"444\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-14-1024x444.png\" alt=\"\" class=\"wp-image-9961\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-14-1024x444.png 1024w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-14-300x130.png 300w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-14-768x333.png 768w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-14-1536x667.png 1536w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-14-769x334.png 769w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-14.png 1560w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>The next step is to change the contents of the deploy.js file in the &#8216;scripts&#8217; folder to make sure it deploys your new contract. Open the file and make sure the following code replaces what you already have. This will simply take your compiled PriceConsumerV3 contract and try to deploy it. Don&#8217;t forget to save your changes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"575\" height=\"456\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-21.png\" alt=\"\" class=\"wp-image-9990\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-21.png 575w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-21-300x238.png 300w\" sizes=\"(max-width: 575px) 100vw, 575px\" \/><\/figure>\n\n\n\n<p>Now you&#8217;re ready to build and deploy your smart contract on the Rinkeby network with Hardhat:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx hardhat compile\nnpx hardhat run --network rinkeby scripts\/deploy.js<\/code><\/pre>\n\n\n\n<p>You should see a message like the one below, with the address on the Rinkeby to which your smart contract has been deployed. Make a note of this address, we will need it for the next step.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"136\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-15-1024x136.png\" alt=\"\" class=\"wp-image-9963\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-15-1024x136.png 1024w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-15-300x40.png 300w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-15-768x102.png 768w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-15-769x102.png 769w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-15.png 1516w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Congratulations, you&#8217;re now ready to move on to the frontend part of your dApp!<\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong> Creation of a front-end application <\/strong><\/h2>\n\n\n\n<p>The frontend logic and user interface of your dApp can be built using a wide variety of different frameworks.<\/p>\n\n\n\n<p>React is one of the most popular JavaScript libraries for creating feature-rich web user interfaces, so it is used in many Web3 dApps.<\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly9yZWFjdGpzLm9yZy8=\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/reactjs.org\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p>Additionally, Ethers.js is a JavaScript library for connecting and interacting with EVM-based blockchains and smart contracts. If you combine these two components, you get a reasonable starting point for building the frontend of your dApp.<\/p>\n\n\n\n<p>In this section, we&#8217;ll create a new React application using the create-react-app template generator. <\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly9jcmVhdGUtcmVhY3QtYXBwLmRldi8=\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/create-react-app.dev\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p>We will then implement off-chain logic using Ethers.js to link the UI to the deployed smart contract, allowing us to create a full end-to-end dApp.<\/p>\n\n\n\n<p>Creating a React application The first step to create a frontend is to install and implement the create-react-app boilerplate project and then modify it for our dApp. The first step is to install the library in the new &#8220;frontend&#8221; folder:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd ..\nnpx create-react-app frontend<\/code><\/pre>\n\n\n\n<p>After that, a new &#8220;frontend&#8221; folder should appear in your project with all the React code associated with it. Expand the &#8220;frontend&#8221; folder and do the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Delete \/src\/setupTests.js<\/li>\n\n\n\n<li>Delete \/src\/ReportWebVitals.js<\/li>\n\n\n\n<li>Delete \/src\/logo.svg<\/li>\n\n\n\n<li>Delete \/src\/App.test.js<\/li>\n\n\n\n<li>Delete \/src\/App.css<\/li>\n<\/ul>\n\n\n\n<p>The folder structure should look like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"648\" height=\"732\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-16.png\" alt=\"\" class=\"wp-image-9965\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-16.png 648w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-16-266x300.png 266w\" sizes=\"(max-width: 648px) 100vw, 648px\" \/><\/figure>\n<\/div>\n\n\n<p>Now we&#8217;re almost ready to start modifying the React application code. But first don&#8217;t forget to install the libraries for Bootstrap and Ethers.js.<\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly9nZXRib290c3RyYXAuY29tLw==\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/getbootstrap.com\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p>Bootstrap is a popular CSS frontend framework that comes with React-friendly UI widgets with superimposed CSS styling, and Ethers.js allows us to connect our frontend to deployed smart contracts on the blockchain. Make sure to run these commands from the &#8220;frontend&#8221; folder.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd frontend\nnpm install bootstrap\nnpm install ethers<\/code><\/pre>\n\n\n\n<p>Now we are ready to modify the React application code. Open the App.js file in \/src\/ and delete its contents. We will start creating it from scratch.<\/p>\n\n\n\n<p>The first step is to tell the application that we want to use React (including the useEffect and useState libraries) and Ethers.js:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useEffect, useState } from 'react';\nimport { ethers } from \"ethers\";<\/code><\/pre>\n\n\n\n<p>Then create a function called &#8220;App&#8221; and export it:<\/p>\n\n\n\n<p>Now we will start filling the contents of the &#8220;App&#8221; function. Add the following code to it. This code does the following:<\/p>\n\n\n\n<p>Installs StoreDPRICE and SetStoreSprice reactive hooks. Creates a connection with your Metamask Web3 wallet. Sets the address of the detailed smart contract and ABI. Both of these parameters need Ethers.js to interact with a detailed smart contract. The address of the smart contract can be obtained from the deployment step described earlier in this guide. Insert this value instead of a string of replace_with_deployed_contract_address. ABI smart contract can be obtained from the file \/Backend\/artifacts\/contracts\/priceconsumerv3.json, in the ABI element. You can use the code minifier.<\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly9jb2RlYmVhdXRpZnkub3JnL2pzb25taW5pZmllcg==\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/codebeautify.org\/jsonminifier<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p>This will help format it in the best way to store it in your application.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const [storedPrice, setStoredPrice] = useState('');\r\n  const provider = new ethers.providers.Web3Provider(window.ethereum)\r\n  const signer = provider.getSigner()\r\n  const contractAddress = <replace_with_deployed_contract_address>\u2019';\r\n  const ABI =\r\n'[{\"inputs\":[],\"stateMutability\":\"nonpayable\",\"type\":\"constructor\"},{\"inputs\":[],\"name\":\"getLatestPrice\",\"outputs\":[{\"internalType\":\"int256\",\"name\":\"\",\"type\":\"int256\"}],\"stateMutability\":\"view\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"storeLatestPrice\",\"outputs\":[],\"stateMutability\":\"nonpayable\",\"type\":\"function\"},{\"inputs\":[],\"name\":\"storedPrice\",\"outputs\":[{\"internalType\":\"int256\",\"name\":\"\",\"type\":\"int256\"}],\"stateMutability\":\"view\",\"type\":\"function\"}]'\r\n  const contract = new ethers.Contract(contractAddress, ABI, signer);<\/replace_with_deployed_contract_address><\/pre>\n\n\n\n<p>We will now create two functions that will be used in our application:<\/p>\n\n\n\n<p>GetStoredPrice will connect to a detailed smart contract and get the current value of the StoreDPRICE () gutter function. The SetNewPrice function will cause the StorelaTestPrice function of a detailed smart contract, wait for the transaction to complete, and then call the GetStoredPrice function to obtain a price saved in a smart contract. We will also add a GetStoredPrice call to our APP function so that it initially causes the Getter function when loading the page:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"516\" height=\"426\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-20.png\" alt=\"\" class=\"wp-image-9988\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-20.png 516w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-20-300x248.png 300w\" sizes=\"(max-width: 516px) 100vw, 516px\" \/><\/figure>\n\n\n\n<p>The last step in creating a front-end is the return of the JSX code for rendering with a browser. Insert the next code in the lower part of the App, under the call of GetstorePrice (). This code makes the following:<\/p>\n\n\n\n<p>Returns a simple two-column grid layout. The first column contains the current stored price of ETH\/USD in the smart contract. The second column contains a button that the user can use to interact with the smart contract and update the stored price. Clicking the button calls the setNewPrice function described above.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"585\" height=\"348\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-19.png\" alt=\"\" class=\"wp-image-9985\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-19.png 585w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-19-300x178.png 300w\" sizes=\"(max-width: 585px) 100vw, 585px\" \/><\/figure>\n\n\n\n<p>Your application is ready. You are now ready to run your dApp. Launching your dApp After making sure that all files have been saved, launch your dApp locally by running the following command from the frontend folder:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run start<\/code><\/pre>\n\n\n\n<p>After downloading the application, you should see a new window in your browser displaying the dApp user interface. You should also receive a pop-up notification from MetaMask asking you to connect your wallet to the application.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-17-1024x300.png\" alt=\"\" class=\"wp-image-9967\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-17-1024x300.png 1024w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-17-300x88.png 300w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-17-768x225.png 768w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-17-1536x450.png 1536w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-17-769x225.png 769w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-17.png 1560w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Once you are satisfied that you have funded your MetaMask account with some Rinkeby ETH, click the &#8220;Refresh&#8221; button in the dApp user interface to interact with the deployed smart contract on the Rinkeby network. You should receive a notification from MetaMask asking you to confirm the transaction. After that, your dApp should update automatically within a few seconds and the current Ethereum price should appear in the &#8220;Saved Price&#8221; section:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"292\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-18-1024x292.png\" alt=\"\" class=\"wp-image-9969\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-18-1024x292.png 1024w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-18-300x86.png 300w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-18-768x219.png 768w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-18-1536x438.png 1536w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-18-769x219.png 769w, \/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/image-18.png 1560w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Congratulations, you have now successfully created, deployed and interacted with a simple dApp! In this tutorial, you simply run the frontend locally on your computer, but you can deploy it to a cloud server if you want, or even decentralize the frontend and deploy it to IPFS! <\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly9pcGZzLnRlY2gv\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/ipfs.tech\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p>You can also work with the application&#8217;s CSS to change the appearance of the user interface.<\/p>\n\n\n\n<p><!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly93d3cudzNzY2hvb2xzLmNvbS9jc3Mv\"  target=\"_blank\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435)\" rel=\"noreferrer noopener\">https:\/\/www.w3schools.com\/css\/<\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>Summary<\/strong><\/h2>\n\n\n\n<p>Decentralized applications are applications that replace traditional back-end processing with Web3 technologies such as blockchain and smart contracts, giving them unique guarantees of security and resistance to censorship that are not possible with traditional Web applications.<\/p>\n\n\n\n<p>In this technical demonstration, we created a simple dApp containing a smart contract that gets the latest price from the ETH\/USD Data Feed and stores the result in the smart contract. We then created a simple UI that uses React and Ethers.js to connect to and interact with the deployed smart contract.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>If you like to read such articles and want to support the author, then you can subscribe to our telegram channel and recommend us to your friends, this will help a lot to support our project! Telegram: <!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly90Lm1lL2NyeXB0b21pbmVn\"  target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"undefined (Opens in new tab)\"><strong>CRYPTO WIKIES | Bitcoin &amp; Altcoins Mining<\/strong><\/a><\/noindex><!--\/noindex--><\/p><cite><strong>Be the first to know all the news, read more about cryptocurrencies and mining at <a href=\"https:\/\/crypto-mining.blog\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"undefined (opens in a new tab)\">CRYPTO-MINING.BLOG<\/a>.<\/strong><\/cite><\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Subscribe to <!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly90Lm1lL2NyeXB0b21pbmVn\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432 ;\u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435) \"  target=\"_blank\" rel=\"noreferrer noopener\">CryptoWikies<\/a><\/noindex><!--\/noindex--> now and get exclusive access to a wealth of knowledge from our team of experts. They will keep you up to date with all the latest trends, strategies and ideas regarding bitcoin and altcoin mining and trading.<\/p>\n\n\n\n<p>Subscribe to our Telegram: <!--noindex--><noindex><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/crypto-mining.blog\/LINKURL\/aHR0cHM6Ly90Lm1lL2NyeXB0b21pbmVn\" aria-label=\"undefined (\u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0432\u043d\u043e\u0432\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\"  target=\"_blank\" rel=\"noreferrer noopener\"><strong>CRYPTO WIKIES | Bitcoin &amp; Altcoins Mining<\/strong><\/a><\/noindex><!--\/noindex--><\/p>\n\n\n\n<p><strong><a href=\"https:\/\/crypto-mining.blog\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\">CRYPTO-MINING.BLOG<\/a><\/strong> &#8211; Stay up to date with the latest news about cryptocurrencies and mining!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-query is-layout-flow wp-block-query-is-layout-flow\"><ul class=\"wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow\"><li class=\"wp-block-post post-19326 post type-post status-publish format-standard has-post-thumbnail hentry category-cryptocurrency-wallets category-user-manuals category-review category-software tag-bitgesell-bgl-en tag-bitgesell-bgl-wallet-en\">\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><figure class=\"wp-block-post-featured-image\"><a href=\"https:\/\/crypto-mining.blog\/en\/software\/bgl-wallet-bitgesell-how-to-download-install-and-use-the-official-wallet\/\" target=\"_self\"  ><img decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2026\/04\/bgl-wallet-kak-skachat-ustanovit-i-polzovatsya-oficzialnym-koshelkom-image-2-300x300.png\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"BGL Wallet (Bitgesell): How to Download, Install, and Use the Official Wallet\" style=\"object-fit:cover;\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2026\/04\/bgl-wallet-kak-skachat-ustanovit-i-polzovatsya-oficzialnym-koshelkom-image-2-300x300.png 300w, \/\/crypto-mining.blog\/wp-content\/uploads\/2026\/04\/bgl-wallet-kak-skachat-ustanovit-i-polzovatsya-oficzialnym-koshelkom-image-2-120x120.png 120w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/crypto-mining.blog\/en\/software\/bgl-wallet-bitgesell-how-to-download-install-and-use-the-official-wallet\/\" target=\"_self\" >BGL Wallet (Bitgesell): How to Download, Install, and Use the Official Wallet<\/a><\/h2><\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-18969 post type-post status-publish format-standard has-post-thumbnail hentry category-cryptocurrencies category-cryptocurrency-wallets category-user-manuals category-software tag-dapps-en tag-defi-en tag-metamask-en\">\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><figure class=\"wp-block-post-featured-image\"><a href=\"https:\/\/crypto-mining.blog\/en\/software\/metamask-crypto-wallet-installation-and-usage-guide-for-web3\/\" target=\"_self\"  ><img decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2026\/03\/metamask2026walletf483d1b4-d4c3-4676-a299-d8752b3b78cb-300x300.png\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"MetaMask Crypto Wallet \u2013 Installation and Usage Guide for Web3\" style=\"object-fit:cover;\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2026\/03\/metamask2026walletf483d1b4-d4c3-4676-a299-d8752b3b78cb-300x300.png 300w, \/\/crypto-mining.blog\/wp-content\/uploads\/2026\/03\/metamask2026walletf483d1b4-d4c3-4676-a299-d8752b3b78cb-120x120.png 120w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/crypto-mining.blog\/en\/software\/metamask-crypto-wallet-installation-and-usage-guide-for-web3\/\" target=\"_self\" >MetaMask Crypto Wallet \u2013 Installation and Usage Guide for Web3<\/a><\/h2><\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-18931 post type-post status-publish format-standard has-post-thumbnail hentry category-cryptocurrencies category-mining category-amd-gpus-en category-antminer-asic-en category-cpu-mining-en category-mining-on-gpu category-nvidia-gpus-en category-review tag-alephium-alph-en tag-bitcoin-btc-en tag-dash-en tag-dogecoin-doge-en tag-dynex-dnx-en tag-ethereum-classic-etc-en tag-flux-flux-en tag-grin tag-kaspa-kas-en tag-litecoin tag-microvisionchain-space-en tag-mining-ravencoin-rvn-en tag-monero-xmr-en tag-neurai-nrn-en tag-nexa-coin-nexa-en tag-phicoin-phi-en tag-proof-of-work-pow-en tag-vertcoin-vtc-en tag-zcash-zec-en\">\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\"><figure class=\"wp-block-post-featured-image\"><a href=\"https:\/\/crypto-mining.blog\/en\/mining\/the-most-profitable-coins-for-mining-in-2026-a-review-and-comparison\/\" target=\"_self\"  ><img decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2026\/03\/samye-pribylnye-monety-dlya-majninga-v-2026-obzor-i-sravnenie-300x300.png\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"The Most Profitable Coins for Mining in 2026: A Review and Comparison\" style=\"object-fit:cover;\" srcset=\"\/\/crypto-mining.blog\/wp-content\/uploads\/2026\/03\/samye-pribylnye-monety-dlya-majninga-v-2026-obzor-i-sravnenie-300x300.png 300w, \/\/crypto-mining.blog\/wp-content\/uploads\/2026\/03\/samye-pribylnye-monety-dlya-majninga-v-2026-obzor-i-sravnenie-120x120.png 120w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/figure><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><h2 class=\"wp-block-post-title\"><a href=\"https:\/\/crypto-mining.blog\/en\/mining\/the-most-profitable-coins-for-mining-in-2026-a-review-and-comparison\/\" target=\"_self\" >The Most Profitable Coins for Mining in 2026: A Review and Comparison<\/a><\/h2><\/div>\n<\/div>\n\n<\/li><\/ul><\/div>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial shows the steps to create a basic end-to-end decentralized application. With this app, users can check the current Ethereum price and store it in a smart contract.<\/p>\n","protected":false},"author":4,"featured_media":9973,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,8031,10],"tags":[8338,114,8204],"class_list":["post-10001","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cryptocurrencies","category-user-manuals","category-software","tag-dapp-en","tag-ethereum-eth-en","tag-metamask-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to create a DApp in NodeJS for MetaMask<\/title>\n<meta name=\"description\" content=\"This tutorial shows the steps to create a basic end-to-end decentralized application. With this app, users can check the current Ethereum price and store it in a smart contract.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a DApp in NodeJS for MetaMask\" \/>\n<meta property=\"og:description\" content=\"This tutorial shows the steps to create a basic end-to-end decentralized application. With this app, users can check the current Ethereum price and store it in a smart contract.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/\" \/>\n<meta property=\"og:site_name\" content=\"CRYPTO MINING BLOG\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-28T18:33:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-28T18:34:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/what_is_dapp21_09460eb821.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Crypto Blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Crypto Blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/how-to-create-a-dapp-in-nodejs-for-metamask\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/how-to-create-a-dapp-in-nodejs-for-metamask\\\/\"},\"author\":{\"name\":\"Crypto Blog\",\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/#\\\/schema\\\/person\\\/c73216e1ca1b39f2d1ee619b6527b39e\"},\"headline\":\"How to create a DApp in NodeJS for MetaMask\",\"datePublished\":\"2023-02-28T18:33:56+00:00\",\"dateModified\":\"2023-02-28T18:34:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/how-to-create-a-dapp-in-nodejs-for-metamask\\\/\"},\"wordCount\":2314,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/#\\\/schema\\\/person\\\/9f660b842db38e47a561a4f462d90d28\"},\"image\":{\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/how-to-create-a-dapp-in-nodejs-for-metamask\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/crypto-mining.blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/what_is_dapp21_09460eb821.png\",\"keywords\":[\"DApp\",\"Ethereum (ETH)\",\"MetaMask\"],\"articleSection\":[\"Cryptocurrencies\",\"Guides\",\"Software\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/how-to-create-a-dapp-in-nodejs-for-metamask\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/how-to-create-a-dapp-in-nodejs-for-metamask\\\/\",\"url\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/how-to-create-a-dapp-in-nodejs-for-metamask\\\/\",\"name\":\"How to create a DApp in NodeJS for MetaMask\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/how-to-create-a-dapp-in-nodejs-for-metamask\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/how-to-create-a-dapp-in-nodejs-for-metamask\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/crypto-mining.blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/what_is_dapp21_09460eb821.png\",\"datePublished\":\"2023-02-28T18:33:56+00:00\",\"dateModified\":\"2023-02-28T18:34:37+00:00\",\"description\":\"This tutorial shows the steps to create a basic end-to-end decentralized application. With this app, users can check the current Ethereum price and store it in a smart contract.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/how-to-create-a-dapp-in-nodejs-for-metamask\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/how-to-create-a-dapp-in-nodejs-for-metamask\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/how-to-create-a-dapp-in-nodejs-for-metamask\\\/#primaryimage\",\"url\":\"https:\\\/\\\/crypto-mining.blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/what_is_dapp21_09460eb821.png\",\"contentUrl\":\"https:\\\/\\\/crypto-mining.blog\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/what_is_dapp21_09460eb821.png\",\"width\":800,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/how-to-create-a-dapp-in-nodejs-for-metamask\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f\",\"item\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guides\",\"item\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/user-manuals\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to create a DApp in NodeJS for MetaMask\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/\",\"name\":\"CRYPTO-MINING.BLOG\",\"description\":\"Your guide to cryptocurrency mining\",\"publisher\":{\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/#\\\/schema\\\/person\\\/9f660b842db38e47a561a4f462d90d28\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/#\\\/schema\\\/person\\\/9f660b842db38e47a561a4f462d90d28\",\"name\":\"CRYPTO MINING BLOG\",\"logo\":{\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/#\\\/schema\\\/person\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/crypto-mining.blog\\\/en\\\/#\\\/schema\\\/person\\\/c73216e1ca1b39f2d1ee619b6527b39e\",\"name\":\"Crypto Blog\",\"sameAs\":[\"https:\\\/\\\/crypto-mining.blog\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a DApp in NodeJS for MetaMask","description":"This tutorial shows the steps to create a basic end-to-end decentralized application. With this app, users can check the current Ethereum price and store it in a smart contract.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/","og_locale":"en_US","og_type":"article","og_title":"How to create a DApp in NodeJS for MetaMask","og_description":"This tutorial shows the steps to create a basic end-to-end decentralized application. With this app, users can check the current Ethereum price and store it in a smart contract.","og_url":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/","og_site_name":"CRYPTO MINING BLOG","article_published_time":"2023-02-28T18:33:56+00:00","article_modified_time":"2023-02-28T18:34:37+00:00","og_image":[{"width":800,"height":600,"url":"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/what_is_dapp21_09460eb821.png","type":"image\/png"}],"author":"Crypto Blog","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Crypto Blog","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/#article","isPartOf":{"@id":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/"},"author":{"name":"Crypto Blog","@id":"https:\/\/crypto-mining.blog\/en\/#\/schema\/person\/c73216e1ca1b39f2d1ee619b6527b39e"},"headline":"How to create a DApp in NodeJS for MetaMask","datePublished":"2023-02-28T18:33:56+00:00","dateModified":"2023-02-28T18:34:37+00:00","mainEntityOfPage":{"@id":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/"},"wordCount":2314,"commentCount":0,"publisher":{"@id":"https:\/\/crypto-mining.blog\/en\/#\/schema\/person\/9f660b842db38e47a561a4f462d90d28"},"image":{"@id":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/#primaryimage"},"thumbnailUrl":"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/what_is_dapp21_09460eb821.png","keywords":["DApp","Ethereum (ETH)","MetaMask"],"articleSection":["Cryptocurrencies","Guides","Software"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/","url":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/","name":"How to create a DApp in NodeJS for MetaMask","isPartOf":{"@id":"https:\/\/crypto-mining.blog\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/#primaryimage"},"image":{"@id":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/#primaryimage"},"thumbnailUrl":"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/what_is_dapp21_09460eb821.png","datePublished":"2023-02-28T18:33:56+00:00","dateModified":"2023-02-28T18:34:37+00:00","description":"This tutorial shows the steps to create a basic end-to-end decentralized application. With this app, users can check the current Ethereum price and store it in a smart contract.","breadcrumb":{"@id":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/#primaryimage","url":"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/what_is_dapp21_09460eb821.png","contentUrl":"https:\/\/crypto-mining.blog\/wp-content\/uploads\/2023\/02\/what_is_dapp21_09460eb821.png","width":800,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/crypto-mining.blog\/en\/user-manuals\/how-to-create-a-dapp-in-nodejs-for-metamask\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f","item":"https:\/\/crypto-mining.blog\/en\/"},{"@type":"ListItem","position":2,"name":"Guides","item":"https:\/\/crypto-mining.blog\/en\/user-manuals\/"},{"@type":"ListItem","position":3,"name":"How to create a DApp in NodeJS for MetaMask"}]},{"@type":"WebSite","@id":"https:\/\/crypto-mining.blog\/en\/#website","url":"https:\/\/crypto-mining.blog\/en\/","name":"CRYPTO-MINING.BLOG","description":"Your guide to cryptocurrency mining","publisher":{"@id":"https:\/\/crypto-mining.blog\/en\/#\/schema\/person\/9f660b842db38e47a561a4f462d90d28"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crypto-mining.blog\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/crypto-mining.blog\/en\/#\/schema\/person\/9f660b842db38e47a561a4f462d90d28","name":"CRYPTO MINING BLOG","logo":{"@id":"https:\/\/crypto-mining.blog\/en\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/crypto-mining.blog\/en\/"]},{"@type":"Person","@id":"https:\/\/crypto-mining.blog\/en\/#\/schema\/person\/c73216e1ca1b39f2d1ee619b6527b39e","name":"Crypto Blog","sameAs":["https:\/\/crypto-mining.blog\/"]}]}},"_links":{"self":[{"href":"https:\/\/crypto-mining.blog\/en\/wp-json\/wp\/v2\/posts\/10001","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crypto-mining.blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crypto-mining.blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crypto-mining.blog\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/crypto-mining.blog\/en\/wp-json\/wp\/v2\/comments?post=10001"}],"version-history":[{"count":0,"href":"https:\/\/crypto-mining.blog\/en\/wp-json\/wp\/v2\/posts\/10001\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/crypto-mining.blog\/en\/wp-json\/wp\/v2\/media\/9973"}],"wp:attachment":[{"href":"https:\/\/crypto-mining.blog\/en\/wp-json\/wp\/v2\/media?parent=10001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crypto-mining.blog\/en\/wp-json\/wp\/v2\/categories?post=10001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crypto-mining.blog\/en\/wp-json\/wp\/v2\/tags?post=10001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}