Working towards setting up your blockchain to connect with a front end application. Using an HTML file, then switch to serving this live on our local host.. We will be deploying smart contract to local ethereum blockchain by Ganache
- Ganache - One click BLOCKCHAIN
- Visual Studio Code - is a source code editor developed by Microsoft
- Install Ganache and Run the application for one click ethereum blockchain deployment on localhost.
You will find the blockchain has been deployed to http://127.0.0.1:7545
. The ganache will also create Ethereum wallet addresses for you, all addresses are loaded with 100.00 Ethers and Mnemonic passphrase.
Dependencies Used
- Web3 - Ethereum API
Dependencies Installation
- Download and open project in Visual Studio Code or any other code editors.
- Open terminal and install all dependencies by running command
npm install
Working with Project
- Open
index.html
file in your Chrome browser. - Any changes made to code you will need to refresh the page on browser to update changes.
- Copy code from
messenger.sol
and paste the code to Remix solidity EVM. Remix will help you interact with your Ganache Local Blockchain and Metamask wallet.
Once you have deployed the Ganache Local Ethereum Blockchain on localhost you need to make the following steps to this project.
- Go to Remix EVM and click start to compile.
- In Remix go to Run tab and select Web3 Provider to connect to Ganache. After selecting web3 provider you need to enter the RPC address where the Ganache blockchain has been deployed. You will find the RPC address in your Ganache Application.
- Once you have successfully connected to Ganache blockchain you should see your Ganache Ethereum addresses with 100 Ethers in Remix.
- Deploy the message contract by clicking Deploy button in Remix.
- In Remix console you will find the new section below as Deployed Contracts will show your contract there. Click on the message contract and copy the deployed contract address.
- Open
index.html
in Visual Studio Code editor and find this code:var myMessage = RemixContract.at('Enter Your Contract Address');
paste your contract address there. - We also need to copy + paste the ABI code for our contract from Remix. You will find the ABI code to copy in compile section from remix console.
- Paste ABI code in your
index.html
within this code:var RemixContract = web3.eth.contract('Enter your ABI code here');
- Now we need to connect Ganache with your
index.html
copy the RPC Server address from Ganache Application within this code:web3 = new Web3(new Web3.providers.HttpProvider("Enter RPC Server"));
- Refresh your
index.html
in chrome browser to updated all the changes we have made so far.
Testing the Project
- Open console in Google Chrome to see logs from the project. Options>More Tools>Developer Tools> Console.
- Type any secret message you want and click Set Secret Message.
- You should see the output in console log.
and you will also find the transaction in your Ganache application in the Transaction section.