"APP ZERO": Beginners SAFE Web App Tutorial

I think I might have done this already but I am still having a bit of trouble with the web hosting manager so I am not able to test it

3 Likes

Great, keep us posted!

Is this still going?

Okay, so I assume that one needs to copy what’s already been built (web_hosting_manager), take it apart and then make a minimal design work.

1 Like

Yeah, we have this APP ZERO code for authenticator,

We’re just waiting for the web_hosting_manager to work so that we can upload it to SAFE (mock) and try it out.

This is the code:

//Intial function
"Use strict";

/*
 *              		   New Safe JS App Zero
 */
const app = {
  id: "net.app.zero",
  name: "Safe Web Demo",
  version: '1',
  vendor: "Joe",
};

var parmissions = {
  anydir: ['Read']
};

(function() {
  console.log('Initialising website');
  window.safeApp.initialise(app)
    .then((appInit) => {
      console.log("Initialise Token :" + appInit);
      console.log("Authorising website");
      window.safeApp.authorise(appInit, permissions)
        .then((auth) => {
          console.log(auth);
        }, (err) => {
          console.error(err);
        });
    })
    ((err) => {
      console.error(err);
    });
})();
4 Likes

Oh, so once it’s fixed, the first person here that’s not an internal dev that puts up a site wins 50 bucks?

Is the id the domain name? What about top level demains and such. Does that exist on the SAFE Network?

Well that code belongs to @Joseph_Meagher

He was the first so submit it. I’ll add some html to it, but if his js works then he wins because he submitted first

1 Like

Too bad then, but then again an opportunity to make my first real site.

[Update]

Looks like you can upload it now.

1 Like

hope u still will make other sites!!

1 Like

What do you mean?

I will make my first site on the SAFE Network.
No need to use CLEARNet.

I just got in with _public and _publiNames. No idea what to do with that though.

2 Likes

This is the new code with minor fixes

 //Intial function
"Use strict";

/*
 *              		   New Safe JS App Zero
 */
const app = {
  id: "net.app.zero",
  name: "Safe Web Demo",
  version: '1',
  vendor: "Joe",
};

var permissions = {
  _public: ['Read']
};

(function() {
  console.log('Initialising website');
  window.safeApp.initialise(app)
    .then((appInit) => {
      console.log("Initialise Token :" + appInit);
      console.log("Authorising website");
      window.safeApp.authorise(appInit, permissions)
        .then((auth) => {
          alert(auth);
        }, (err) => {
          console.error(err);
        });
    })
    ((err) => {
      console.error(err);
    });
})();
5 Likes

Note folks, I think you need to replace > with > in the above.

2 Likes

Thanks, all fixed now

1 Like

Check out the example Web app code here, includes auth and creating MD:

5 Likes

So also, this is the most current APP ZERO code.

Fit to work in an html file. Tested on mockR

<body><script>
//Intial function
"Use strict";

/*
*              		   New Safe JS App Zero
*/
const app = {
 id: "net.app.zero",
 name: "Safe Web Demo",
 version: '1',
 vendor: "Joe",
};

var permissions = {
 _public: ['Read']
};

(function() {
 console.log('Initialising website');
 window.safeApp.initialise(app)
   .then((appInit) => {
     console.log("Initialise Token :" + appInit);
     console.log("Authorising website");
     window.safeApp.authorise(appInit, permissions)
       .then((auth) => {
         alert(auth);
       }, (err) => {
         console.error(err);
       });
   })
   ((err) => {
     console.error(err);
   });
})();</script></body>
1 Like

I assume I have to write that down in an html file and then drag that file into the Beaker Browser?

My result is a console error:

Initialising website
Uncaught TypeError: Cannot read property 'initialise' of undefined

no, the only way is to use the web_hosting_manager from the update. Because your files need to actually go through the encryption processes in mock-routing so that they can be visible on mock-SAFE and in your browser

How do I use the web_hosting_manager?

I’m stuck after having it in Authorised applications. All I can do is revoke access.

[Update]

npm run start-hot

This starts SAFE Hosting Manager as well for me with added bonus that I can see dev tools.

There are several errors I can see:

app.html:26
A Parser-blocking, cross-origin script, http://localhost:3000/dist/bundle.js, 
is invoked via document.write. 
This may be blocked by the browser if the device has poor network connectivity.

warning.js:36
Warning: Accessing PropTypes via the main React package is deprecated. 
Use the prop-types package from npm instead.

warning.js:36
Warning: DropdownMenu: React.createClass 
is deprecated and will be removed in version 16. 
Use plain JavaScript classes instead. If you're not yet ready to migrate, 
create-react-class is available on npm as a drop-in replacement.

index.js:454 
You are using prebuilt antd,
please use https://www.npmjs.com/package/babel-plugin-import 
to reduce app bundle size.

action @@router/LOCATION_CHANGE @ 21:25:55.723 core.js:102 
action loadTranslation @ 21:25:55.770 core.js:102 
action setLocal @ 21:25:55.779 core.js:102 
action AUTH_REQUEST_SENT @ 21:25:55.979 core.js:102 
[HMR] connected client.js?207a:67

Are console erros kept in a log somewhere?

1 Like

Those look like warnings rather than errors. Does the web_hosting_manager open?

Yes it does. I’m just killing time until someone can tell me what I need to do to get a website running.

1 Like

Looks like it’s not authorising - does it just hang there?

1 Like