1. Code smart contract with remix or some other tool, copy .sol to local environment

2. Start truffle console and local chain with "truffle develop"

3. If you placed your contract in proper directory and made migration script, you can deploy it to local blockchain with "migrate --reset" command

4. Compile your smart contracts with "truffle compile"

5. Copy smart contract ABI from compiled .json and instantiate web3 object in your web2 file (.html)

6. Instantiate smart contract instance

7. Call Smart Contract function(method)

// ABI
var helloWorldABI = [
  {
    "constant": true,
    "inputs": [],
    "name": "hello",
    "outputs": [
      {
        "name": "",
        "type": "string"
      }
    ],
    "payable": false,
    "stateMutability": "pure",
    "type": "function"
  }
];

var helloWorldAddress = '0xb9A0D8302d4d77309088F9a1f81AD9D471780f44';
// Instantiated  web3 object
var web3 = new Web3('http://localhost:9545');
// Instantiated  smart contract
var helloWorld = new web3.eth.Contract(helloWorldABI, helloWorldAddress);

// Smart contract function called with vanilla JS
document.addEventListener('DOMContentLoaded', () => {
  helloWorld.methods.hello().call()
  .then(result => {
    document.getElementById('hello').innerHTML = result;
  });
});

1. Code smart contract with remix or some other tool, copy .sol to local environment

2. Start truffle console and local chain with "truffle develop"

3. If you placed your contract in proper directory and made migration script, you can deploy it to local blockchain with "migrate --reset" command

4. Compile your smart contracts with "truffle compile"

5. Copy smart contract ABI from compiled .json and instantiate web3 object in your web2 file (.html)

6. Instantiate smart contract instance

7. Call Smart Contract function(method)

// ABI
var helloWorldABI = [
  {
    "constant": true,
    "inputs": [],
    "name": "hello",
    "outputs": [
      {
        "name": "",
        "type": "string"
      }
    ],
    "payable": false,
    "stateMutability": "pure",
    "type": "function"
  }
];

var helloWorldAddress = '0xb9A0D8302d4d77309088F9a1f81AD9D471780f44';
// Instantiated  web3 object
var web3 = new Web3('http://localhost:9545');
// Instantiated  smart contract
var helloWorld = new web3.eth.Contract(helloWorldABI, helloWorldAddress);

// Smart contract function called with vanilla JS
document.addEventListener('DOMContentLoaded', () => {
  helloWorld.methods.hello().call()
  .then(result => {
    document.getElementById('hello').innerHTML = result;
  });
});