"APP ZERO": Beginners SAFE Web App Tutorial

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

Yes.

[AUTO-UPDATE] Error: Disabled. Only available on macOS and Windows.

Above is part of the terminal output. I’m using Linux, could this be why?

1 Like

I don’t think so. I’m trying on Ubuntu now and am getting the same thing. From experience it’s pretty hit and miss - I’ll try on Debian see if I can get it going on that.
EDIT: Nope - same thing happens on Debian. Only works on Windows for me.

1 Like

Sorry if this is a daft question, but did you authorise it (in the browser you should see a request for authorisation)?

Looks like that might be the case for @folaht. For me at least (in Ubuntu) the authenticator does not even recognise the web_hosting_manager. I’ve had this happen before, it seems to be quite fussy.

2 Likes

Yes, that’s why safe_hosting_manager is in Authorised applications.

Ah sorry, wasn’t paying enough attention :slight_smile: I had the same intermittently when doing self build of these from the Dev branch (linked to earlier). It did get past this once or twice though, but not much further. Still seems buggy, so it may be worth reporting on github.com as an issue.

1 Like

OK - so long as it has got to the next stage from your screenshot above - ie authentication was successful - the next stage is easy, unless I’m missing something. Assuming you have a website folder ready - or just a simple index.html file - do the following.

EDIT: On re-reading the thread I realise I’m probably teaching granny to suck eggs. :blush: Hopefully useful for someone though!

  1. Create a public ID (e.g. mine is jpl1)

  1. Create a service name (mine is test) and select the default option to Create Service.

  2. Click on the URL (e.g. _public/jpl1/test-root)

  3. Navigate to the website directory on your PC - or the file if it’s just an index.html - and upload it.

  4. In the browser navigate to the site (e.g. safe://test.jpl1)

2 Likes

How do you get to the public ID page?