How to deploy a front end for a contract writen in Remix

Ethereum Smart Contract Programming 101
#1

Hello… I’ve completed the Hello World project in Remix IDE … … … and now I’m thinking about writing a Front End for it. . . Is this possible ? surely. I’ve setup a localhost environment. Is anyone available to discuss this ?

Thanks,

#2

This is my basic front end code…

image
image646×672 65.2 KB

and i get this big ol error… any thoughts ?

image
image911×531 104 KB

#3 
Invalid JSON RPC response: "Cannot POST /\n"
#4

Are you running the web3 code to interact with the smartcontract at the same index?
What software are you using?

#5

Ultimately, the problem was with my Web3 Provider. I found this as an example and it works.
( I don’t fully understand it yet. )

const web3 = new Web3(Web3.givenProvider);

I’m using Remix for the contract and localhost for the front end.

1 Like
#6

@bhaun
Amazing to see you solve the problem.

Basically, you are using web3 to create an instance of the givenProvider that is Network (mainnet, Ropsten, Kovan, etc.).

This is the ideal sample code you could use for your front-end web3 connection henceforth.

create main.js and add below

var web3 = new Web3(Web3.givenProvider);
var contractInstance;
var account;
$(document).ready(function() {
    window.ethereum.enable().then(function(accounts){
       account = accounts[0];
      contractInstance = new web3.eth.Contract(window.abi, "your contract address", {from: accounts[0]});
    });
});

Create an abi.js file separately to add contract ABI.
Loan both files in your HTML.

2 Likes
#7

Thanks… does the abi.js file have a variable inside it, or is it somehow automatically bound to window.abi ?

#8

This is the sample ABI inside the abi.js file.

Then we access the abi using the window as you mentioned. It is not automatically bound :+1:

var abi = [
    {
      "anonymous": false,
      "inputs": [
        {
          "indexed": false,
          "internalType": "string",
          "name": "name",
          "type": "string"
        },
        {
          "indexed": false,
          "internalType": "bool",
          "name": "senior",
          "type": "bool"
        }
      ],
      "name": "personCreated",
      "type": "event"
    },
    {
      "anonymous": false,
      "inputs": [
        {
          "indexed": false,
          "internalType": "string",
          "name": "name",
          "type": "string"
        },
        {
          "indexed": false,
          "internalType": "bool",
          "name": "senior",
          "type": "bool"
        },
        {
          "indexed": false,
          "internalType": "address",
          "name": "deletedBy",
          "type": "address"
        }
      ]
1 Like
#9

thanks for your help

1 Like