Having trouble with web app quickstart tutorial

I followed the instructions on https://hub.safedev.org/platform/web/
and my console looks like this right now:

log.js?4244:23 [HMR] Waiting for update signal from WDS...
safenetwork.js?4198:12 Uncaught (in promise) TypeError: Cannot read property 'initialise' of undefined
    at Object.eval (safenetwork.js?4198:12)
    at Promise (<anonymous>)
    at Object.authoriseAndConnect (safenetwork.js?4198:5)
    at VueComponent.eval (eval at ./node_modules/babel-loader/lib/index.js?{"cacheDirectory":true,"plugins":[["/home/folatt/Cloud/workspace/atom/Sites/Quickstart/node_modules/fast-async/plugin.js",{"spec":true}],"/home/folatt/Cloud/workspace/atom/Sites/Quickstart/node_modules/babel-plugin-syntax-dynamic-import/lib/index.js"],"presets":[["/home/folatt/Cloud/workspace/atom/Sites/Quickstart/node_modules/babel-preset-env/lib/index.js",{"debug":false,"modules":false,"useBuiltIns":true,"exclude":["transform-regenerator","transform-async-to-generator"],"targets":{"browsers":["last 2 Chrome versions","last 2 Firefox versions","last 2 Edge versions","last 2 Opera versions","last 2 Safari versions","last 2 iOS versions"]}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue (index.js:750), <anonymous>:89:42)
    at Promise (<anonymous>)
    at VueComponent.created (eval at ./node_modules/babel-loader/lib/index.js?{"cacheDirectory":true,"plugins":[["/home/folatt/Cloud/workspace/atom/Sites/Quickstart/node_modules/fast-async/plugin.js",{"spec":true}],"/home/folatt/Cloud/workspace/atom/Sites/Quickstart/node_modules/babel-plugin-syntax-dynamic-import/lib/index.js"],"presets":[["/home/folatt/Cloud/workspace/atom/Sites/Quickstart/node_modules/babel-preset-env/lib/index.js",{"debug":false,"modules":false,"useBuiltIns":true,"exclude":["transform-regenerator","transform-async-to-generator"],"targets":{"browsers":["last 2 Chrome versions","last 2 Firefox versions","last 2 Edge versions","last 2 Opera versions","last 2 Safari versions","last 2 iOS versions"]}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue (index.js:750), <anonymous>:88:12)
    at callHook (vue.runtime.esm.js?ff9b:2917)
    at VueComponent.Vue._init (vue.runtime.esm.js?ff9b:4626)
    at new VueComponent (vue.runtime.esm.js?ff9b:4794)
    at createComponentInstanceForVnode (vue.runtime.esm.js?ff9b:4306)
(anonymous) @ safenetwork.js?4198:12
authoriseAndConnect @ safenetwork.js?4198:5
(anonymous) @ App.vue?26cd:39
created @ App.vue?26cd:38
callHook @ vue.runtime.esm.js?ff9b:2917
Vue._init @ vue.runtime.esm.js?ff9b:4626
VueComponent @ vue.runtime.esm.js?ff9b:4794
createComponentInstanceForVnode @ vue.runtime.esm.js?ff9b:4306
init @ vue.runtime.esm.js?ff9b:4127
createComponent @ vue.runtime.esm.js?ff9b:5604
createElm @ vue.runtime.esm.js?ff9b:5551
patch @ vue.runtime.esm.js?ff9b:6126
Vue._update @ vue.runtime.esm.js?ff9b:2656
updateComponent @ vue.runtime.esm.js?ff9b:2784
get @ vue.runtime.esm.js?ff9b:3138
Watcher @ vue.runtime.esm.js?ff9b:3127
mountComponent @ vue.runtime.esm.js?ff9b:2791
Vue.$mount @ vue.runtime.esm.js?ff9b:7995
Vue._init @ vue.runtime.esm.js?ff9b:4636
Vue @ vue.runtime.esm.js?ff9b:4725
(anonymous) @ index.js?1fdf:4
./src/index.js @ index.js:1043
__webpack_require__ @ index.js:679
fn @ index.js:89
0 @ index.js:1059
__webpack_require__ @ index.js:679
(anonymous) @ index.js:725
(anonymous) @ index.js:728
vue.runtime.esm.js?ff9b:8010 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.runtime.esm.js?ff9b:8021 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
client?0485:77 [WDS] Hot Module Replacement enabled.

safenetwork.js


let safeAppHandle;
let mdHandle;

async function authoriseAndConnect() {
  let appInfo = {
    name: 'Hello SAFE Network',
    id: 'net.maidsafe.tutorials.web-app',
    version: '0.1.0',
    vendor: 'MaidSafe.net Ltd.'
  };
  safeAppHandle = await window.safeApp.initialise(appInfo);
  console.log('Authorising SAFE application...');
  const authUri = await window.safeApp.authorise(safeAppHandle, {});
  await window.safeApp.connectAuthorised(safeAppHandle, authUri);
  console.log("Application connected to the network");
}

async function createMutableData() {
  const typeTag = 15000;
  mdHandle = await window.safeMutableData.newRandomPublic(safeAppHandle, typeTag);

  const initialData = {
    "random_key_1": JSON.stringify({
        text: 'Scotland to try Scotch whisky',
        made: false
      }),
    "random_key_2": JSON.stringify({
        text: 'Patagonia before I\'m too old',
        made: false
      })
  };
  await window.safeMutableData.quickSetup(mdHandle, initialData);
};

async function getItems() {
  const entriesHandle = await window.safeMutableData.getEntries(mdHandle);
  let items = [];
  await window.safeMutableDataEntries.forEach(entriesHandle, (key, value) => {
    if (value.buf.length == 0) return;
    const parsedValue = JSON.parse(value.buf);
    items.push({ key: key, value: parsedValue, version: value.version });
  });
  return items;
};

async function insertItem(key, value) {
  const mutationHandle = await window.safeMutableData.newMutation(safeAppHandle);
  await window.safeMutableDataMutation.insert(mutationHandle, key, JSON.stringify(value));
  await window.safeMutableData.applyEntriesMutation(mdHandle, mutationHandle);
}


async function updateItem(key, value, version) {
  const mutationHandle = await window.safeMutableData.newMutation(safeAppHandle);
  await window.safeMutableDataMutation.update(mutationHandle, key, JSON.stringify(value), version + 1);
  await window.safeMutableData.applyEntriesMutation(mdHandle, mutationHandle);
};

async function removeItems(items) {
  const mutationHandle = await window.safeMutableData.newMutation(safeAppHandle);
  items.forEach(async (item) => {
    await window.safeMutableDataMutation.remove(mutationHandle, item.key, item.version + 1);
  });
  await window.safeMutableData.applyEntriesMutation(mdHandle, mutationHandle);
};

module.exports = {
  authoriseAndConnect,
  createMutableData,
  getItems,
  insertItem,
  updateItem,
  removeItems
};

Hello @folaht,

Happy to hear you are starting to get to grips with developing for the SAFE Network.

I’d say it’s always worth having a search through the forum as we’ve ran into a few of these situations before.
Have you read this thread?

Webapp quick start tutorial,Cannot read property 'initialise' of undefined

David.

1 Like

Ah, I should have accessed localhost://p:5000/

Thank you.

2 Likes

Good news @folaht - happy that got you sorted.
David.

1 Like