Keen to start a side-project with solidity but have no idea how to get started? I was in the same spot few weeks back. In this post, I’ll guide you all the way from developing a front-end to uploading a smart contract. The demo of the project can be found here [https://steve-ng.github.io/](https://steve-ng.github.io/) (MetaMask required for trying the app)

_This tutorial requires programming experience and you should have a private ETH wallet (perhaps from myEtherWallet)_

![](https://hackernoon.com/hn-images/1*VWTl6Naruu2E61HX1InHIg.png)

Example app that we will be building

### Getting started (Estimated: 20 mins)

You have to have the following installed, they will take some time

1.  **Node** with **npm**, follow this quick guide: [https://docs.npmjs.com/getting-started/installing-node](https://docs.npmjs.com/getting-started/installing-node)
2.  **Ganache.** It allows you to have a local ethereum network running, download from [http://truffleframework.com/ganache/](http://truffleframework.com/ganache/)
3.  **MetaMask with google chrome:** It’s a chrome plugin where you will create your eth account from. This is a quick guide on metamask: [https://www.cryptocompare.com/wallets/guides/how-to-use-metamask/](https://www.cryptocompare.com/wallets/guides/how-to-use-metamask/)
4.  A text editor such as **Sublime text**

### Running the front-end locally connected to production Ethereum network (10 mins)

First, we are going to try and run the demo app locally connecting to the main Ethereum network. Run the following commands in your terminal

_\> git clone_ [_https://github.com/steve-ng/verify-file_](https://github.com/steve-ng/verify-file)

_Next, we have to ensure you have the right node version, try the following command and you should get 6.0 and above.  
\> node -v_ _  
\> cd verify-file/verify-frontend  
\> npm install_

_We are going to copy the production config into dev config   
\> cp properties/prod.json properties/dev.json_

\> npm start -s

After the last command `npm start -s` , you should see `localhost:3000` booted up. If you have your meta-mask running, you should see what you seen earlier at [https://steve-ng.github.io/](https://steve-ng.github.io/). Otherwise if you see “_metamask not connected, this website requires metamask to be set-up”,_try clicking ur metamask icon in ur chrome and click unlock then refresh your browser at`localhost:3000` and it should work.

If you are adventurous to try the app, try to upload a file hash and view your uploads. Use **1 or 2 gwei** to minimise the transaction fees. We will explain how the code works shortly.

### Deploying the smart contract on local Ethereum network (15mins)

Next, we are going to try and run a local Ethereum network and uploading a smart contract. Open **Ganache** that you have downloaded earlier. You should see something as below.

![](https://hackernoon.com/hn-images/1*R8Gl4DaEn5UrI_yIfNyJGA.png)

Ganche screen when booted up. 10 Ethereum wallet will be preloaded with 100 ETH for you. You can click on the key icon on each row to view its private key.

Go to settings (windows -> settings) and take note of your **port number** and **hostname**.

![](https://hackernoon.com/hn-images/1*5D3dnmw6IzoIePwFTOiFPA.png)

In this screenshot, my hostname is localhost and port number is 8545. I’ll be using this config setting.

We are going to upload the smart contract next.

1.  Visit [Remix — Solidity IDE](http://remix.ethereum.org) and copy the smart contract at [https://github.com/steve-ng/verify-file/blob/master/contract/Hashfile.sol](https://github.com/steve-ng/verify-file/blob/master/contract/Hashfile.sol) in there.
2.  Next, click select the **run** tab, and under environment select **Web3 Provider**. There will be a pop up asking for ur web3 provider endpoint. Key in your host name and port number. If you have the same port number and hostname as mine, it will be _http://localhost:8545_

![](https://hackernoon.com/hn-images/1*1Maq5EtVgG86tCpLmgyM3w.png)

3\. Finally under the same **run** tab, click the pink colour **Create** button. Once you have clicked it, follow the screenshot below and click on the icon to the copy the contract address.

![](https://hackernoon.com/hn-images/1*nx7Ow-ITpY3ZKBEU6KUFUA.png)

> If you open Ganache, under transaction tab, you should also see 1 **contract creation** transaction.

4\. Lastly go back to the front-end app, and replace the `hashContractAddress` at `properties/dev.json` with the address you have copied and start the app again with `npm start -s`

5\. Before proceeding to [http://localhost:3000](http://localhost:3000), you have to connect your meta-mask to the local Ethereum network as well. (For reference, see the below screenshot). Also, this is the time where you go back to Ganche and copy an Ethereum wallet private key and import into MetaMask (preloaded with 100 ETH)

![](https://hackernoon.com/hn-images/1*ItQbdbPEwbRJxdlcBMlgRQ.png)

That’s it! At this stage, you would have the local front-end application running connected to your local Ethereum network with MetaMask connected to the local network as well!

### Calling smart contract from front-end (10mins)

This section is an introduction of how a front-end application would talk to the smart contract uploaded at the Ethereum network. We used a library called [**web3JS**](http://web3js.readthedocs.io/en/1.0/index.html)**.** We will be referencing the file at `src/utils/hashContract.js`

There are a total of 3 steps that are common in all applications interacting with the smart contract

#### 1) Initialising web3 provider environment

You will notice this at the first few lines of the file:

if (typeof web3 !== 'undefined') {  
  myWeb3 = new Web3(web3.currentProvider);  
} else {  
  // set the provider you want from Web3.providers  
  console.log('No Web3 Detected... using HTTP Provider');  
  return null;  
}

What it does is to get your metaMask instance and assign it to the variable`myWeb3`

#### 2) Initialising smart contract

hashContract = new myWeb3.eth.Contract(\[  
      {  
        "constant": true,  
        "inputs": \[\],  
        "name": "getUserHashFile",  
        "outputs": \[  
          {  
            "name": "",  
            "type": "uint256\[\]"  
          },  
          {  
            "name": "",  
            "type": "bytes32\[\]"  
          },  
          {  
            "name": "",  
            "type": "bytes32\[\]"  
          }  
        \],  
        "payable": false,  
        "stateMutability": "view",  
        "type": "function"  
      },  
      {  
        "constant": false,  
        "inputs": \[  
          {  
            "name": "name",  
            "type": "bytes32"  
          },  
          {  
            "name": "md5Hash",  
            "type": "bytes32"  
          }  
        \],  
        "name": "addHashFile",  
        "outputs": \[\],  
        "payable": false,  
        "stateMutability": "nonpayable",  
        "type": "function"  
      }  
    \],  
    hashContractAddress,  
    );

#### 3) Lastly, calling smart contract

Notice the above you have declared your contract as `hashContract` and by doing so, you allow web3JS to know the methods available in your smart contract.

You can call your smart contract using the methods below `hashContract.methods.xxx`

hashContract.methods.getUserHashFile().call({from: address});

hashContract.methods.addHashFile(nameHash, hexHash).send({from: address})

That’s it! I hope you have gained some insights on how to develop a front-end application which interact with the Ethereum network.

_If you like this post or think that it has helped you, you can join an exchange using my referral link (I get some commission if you join and trade):_

*   [https://hitbtc.com/?ref\_id=59f3f03a31222](https://hitbtc.com/?ref_id=59f3f03a31222)
*   [https://www.binance.com/register.html?ref=10050322](https://www.binance.com/register.html?ref=10050322)

Alternatively, try out coinbase we get $10 worth of bitcoin each once you traded $100 worth [https://www.coinbase.com/join/58e399c5641b9462a2ee6410](https://www.coinbase.com/join/58e399c5641b9462a2ee6410)

Ethereum

Binance

Coinbase

fees

Google

Too Long; Didn't Read

Build JavaScript blockchain apps easily with Lisk

Zero to something with solidity

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

@steveng

RELATED STORIES