Contract has not been deployed to detected network

Question

I ran truffle compile and truffle migrate to deploy my contract:

admin@admin-PC ~/Desktop/Coding Projects/truffleTestProject (master)
$ truffle migrate
Using network 'development'.

Running migration: 1_initial_migration.js
  Deploying Migrations...
  ... 0xa8f3001d7778963ca08835f2d1c01c53e86dbb0922dfabcd3aca252d93ab6649
  Migrations: 0xb26e34c748a898f09af7e55875870f947b4d382b
Saving successful migration to network...
  ... 0xc38f5486655c640b692fedeb59d81217a94561e1c6b460dba3b608467e7815f4
Saving artifacts...
Running migration: 2_deploy_contracts.js
  Deploying CryptoSportsToken...
  ... 0x21d3bdfd5afe4ec96d5c37ff647f4a8fcf598272cd32e783edca47d601b47bcc
  CryptoSportsToken: 0xa076500eaafb7259535d3430e5eed8c2904651cb
Saving successful migration to network...
  ... 0x0dc395cdba01fcf01c2f2c89547bf001edc3ad7d0f69235f99e7ac48fb51fe12
Saving artifacts...

However, in my frontend I get the following message:

Contract has not been deployed to detected network (network/artifact mismatch)

My folder structure looks like the following:

The 1_initial_migration.js is the same as truffle created it in the beginning:

var Migrations = artifacts.require("./Migrations.sol");

module.exports = function(deployer) {
  deployer.deploy(Migrations);
};

My 2_deploy_contracts.js file looks like the following:

var CryptoSportsToken = artifacts.require("CryptoSportsToken");

module.exports = function(deployer) {
  deployer.deploy(CryptoSportsToken);
};

As you can see I only deploy my CryptoSportsToken. Within my CryptoSportsToken contract I am importing the "./ERC721.sol";.

I further tried to use truffle migrate --reset, however it does not change anything on my output message.

Any suggestion what I am doing wrong?

I appreciate your replies!

UPDATE

I am using truffle-contract to access the contract via web3.

See below my code how I access the contract in the frontend:

App = {
  web3Provider: null,
  contracts: {},

  init: function () {
    return App.initWeb3();
  },

  initWeb3: function () {

    // Is there an injected web3 instance?
    if (typeof web3 !== 'undefined') {
      App.web3Provider = web3.currentProvider;
    } else {
      // If no injected web3 instance is detected, fall back to Ganache
      App.web3Provider = new Web3.providers.HttpProvider('http://localhost:8545');
    }
    web3 = new Web3(App.web3Provider);

    return App.initContract();
  },

  initContract: function () {
    $.getJSON('CryptoSportsToken.json', function (data) {
      // Get the necessary contract artifact file and instantiate it with truffle-contract
      var CryptoSportsTokenArtifact = data;
      App.contracts.CryptoSportsToken = TruffleContract(CryptoSportsTokenArtifact);

      // Set the provider for our contract
      App.contracts.CryptoSportsToken.setProvider(App.web3Provider);

      return App.bindEvents();
    });
  },

  bindEvents: function () {
    $(document).on('click', '.btn-create', App.createPerson());
  },

  createPerson: function () {
    //event.preventDefault();
    var cryptosportInstance;

    console.log("test")
    console.log(owner + " " + name + " " + price)
    console.log("###################")

    console.log("App: \n");
    console.log(App);
    console.log("App.contracts: \n");
    console.log(App.contracts);

    console.log("###################")
    console.log(App.contracts.CryptoSportsToken)

    web3.eth.getAccounts(function (error, accounts) {
      if (error) {
        console.log(error);
      }

      var account = accounts[0];

      App.contracts.CryptoSportsToken.deployed().then(function (instance) {
        cryptosportInstance = instance;

        console.log(cryptosportInstance)

        var owner = $('#owner').val();
        var name = $('#name').val();
        var price = $('#price').val();

        return cryptosportInstance.createPromoPerson(owner, name, price).call();
      }).catch(function (err) {
        console.log(err.message);
      })
    });
  },
};

$(function () {
  $(window).load(function () {
    App.init();
  });
});

Further I created the following github repo to show all my current code.

UPDATE 2

The above code is from the create_app.js file and I am trying to make create.html work.

Answer 1

Contract has not been deployed to detected network (network/artifact mismatch)

I see many different problems with your code, but not what you mentioned in your question. I cloned your github repo and launched the app with npm run dev.

---

NOTE: Errors from the screenshot are not related to the original question.

---

If you are curious these errors seem to happen because you are using pet-shop-tutorial app.js file without correct adaptation for your code.

One function is simply missing in both .js files.

Also there might be a possible problem with binding function leading to incorrect sequence of code execution.

In the next lines you are declaring contract in CryptoSportsToken and right next line you are trying to setProvider to a contract Adoption, which was used in pet-shop-tutorial and obviously was overriden with your contract artifacts and name.

App.contracts.CryptoSportsToken = TruffleContract(CryptoSportsTokenArtifact);

// Set the provider for our contract
App.contracts.Adoption.setProvider(App.web3Provider);

---

[Edit 1]

I launched create.html and it was sending some errors because of the function binding that I've mentioned above.

Fixed it with these lines:

bindEvents: function () {
    $(document).on('click', '.btn-create', App.createPerson);
  },

  createPerson: function (event) {
    event.preventDefault();

After I changed these lines I didn't make any changes and here is screenshot of your create.html page after succesfull transaction via MetaMask.

To fix createPromoPerson().call() is not a function change your call to:

return cryptosportInstance.createPromoPerson.sendTransaction(owner, name, price);

---

To run your code I simply renamed create.html to index.html because my purpose was only to test it and also question about how to make website with multiple pages is not related to Ethereum.