How to initialize my contract with front end?

Question

I've compiled and deployed my contract and tested it successfully and also connect Metamask to ganache and all works fine.

The problem is when I try to interact my smart contract with my front end I always end up by getting errors and I guess it's because of my initialization code in the App.js.

This is my initialization. I'm using truffle v 5.3.11 and web3 1.0.0 beta

 initSupplyChain: function () {
        
        var jsonSupplyChain = '../../build/contracts/SupplyChain.json';

        /// JSONfy the smart contracts
        $.getJSON(jsonSupplyChain, function (data) {
            console.log('data', data);
            var SupplyChainArtifact = data;
            App.Contracts.SupplyChain = TruffleContract(SupplyChainArtifact);
            App.Contracts.SupplyChain.setProvider(App.web3Provider);

         App.fetchItemBufferOne();
           App.fetchItemBufferTwo();
           App.fetchEvents();

        });

        return App.bindEvents();
    },