How to build the SAFE Browser and upload a website with Mock-Vault

As explained in this week’s dev update, the SAFE Authenticator is now stable enough (with the mock network) that developers can build it and try using it with the following example applications:

Limitations:

  • Deleting MutableData entries will only clear the value. See this post for more info.
  • There is a file lock issue with the mock network. If the “MockVault” file is in use by the Authenticator, it’s possible that other applications won’t work as expected. The workaround will be to close the browser and then start the application again after the authorisation is successful.
  • openUri doesn’t open the URL on Windows.

The Authenticator and the example apps have reached a point where we would value some initial feedback. The reason for releasing these apps early is to help curious devs to take a sneak peek into the APIs and report any issues they come across. They are not as stable as they will be in the coming weeks, but we look forward to improving them with your help!

The Authenticator is currently being bundled with the SAFE Browser and will enable users to securely authenticate themselves onto the network, or enable them to browse publicly available data without logging in.

In this tutorial, you will learn how to build the SAFE Browser with Mock-Vault and how to upload a website using the Web Hosting Manager app. We are also planning to add a few code examples that will help you understand how to use the SAFE Browser DOM APIs to build dynamic web applications. We are having some issues with some of the code examples, so we can only publish one of them for now. We’ll update this tutorial with more code examples once we resolve these issues. :slight_smile:

If you need help or have any questions, feel free to reply to this topic!

How to build the SAFE Browser app with Mock-Vault

  1. Clone the SAFE Browser repo.

    git clone https://github.com/maidsafe/safe_browser.git
    
  2. Go to the safe_browser folder.

    cd safe_browser
    
  3. Follow the instructions in the README (note the prerequisites). Skip the yarn start command in step 3 and make sure to package the browser in step 4 of the README.

  4. Run the browser by executing the binary found inside the ./dist/<platform> folder.

    Linux

    ./dist/linux-unpacked/SAFE\ Browser
    

    Mac

    ./dist/mac/SAFE\ Browser.app/Contents/MacOS/SAFE\ Browser
    
  5. Create a SAFE account and leave the browser running (please enter any string when you are requested to enter an invitation token and click Continue).

  6. Follow the steps below to upload a website to the mock network.

How build the Web Hosting Manager app and upload a website

  1. Clone the SAFE Examples repo.

    git clone https://github.com/maidsafe/safe_examples.git
    
  2. Go to the safe_examples/web_hosting_manager folder.

    cd safe_examples/web_hosting_manager
    
  3. Follow the instructions in the README (note the prerequisites).

  4. You can skip the “Run” step and make sure to package the app as described in the “Packaging” step of the README.

  5. Run the app by executing the binary found inside the ./release/<platform> folder.

    Linux

    ./release/linux-unpacked/web-hosting-manager
    

    Mac

    ./release/mac/Web\ Hosting\ Manager.app/Contents/MacOS/Web\ Hosting\ Manager
    
  6. Authorise the app from the SAFE Browser, and follow the instructions in the Web Hosting Manager app to register a public id and publish a service.

  7. By clicking on the path of the service you just created, upload a webpage from your local drive (see below for details on using the DOM API for creating dynamic SAFE sites).

  8. Open a new tab in the SAFE Browser, and open any of the webpages you previously uploaded (make sure you specify the protocol, i.e. safe://, as well as the webpage filename in the URL).
    E.g. if your public Id is my-public-id, your service is my-service and the html page you uploaded is called my-page.html, you can then access it with safe://my-service.my-public-id/my-page.html

Example code for creating dynamic pages using the DOM API

Example 1 - Authorising an application

function SAFE_Tutorial_Example_1() {
  console.log('SAFE Example #1: Authorising web application from: ', window.location.href);

  let app = {
    name: 'Example safe-app web page #1',
    id: 'net.maidsafe.tutorial.webapp.example1',
    version: '0.1.0',
    vendor: 'MaidSafe Ltd.',
  }

  let access = {
    _public: ['Read']
  };

  window.safeApp.initialise(app)
    .then((appToken) => {
      console.log("Application Token received:", appToken);
      window.safeApp.authorise(appToken, access)
        .then((authURI) => {
          console.log("Application was authorised by user. Auth URI received:", authURI);
          window.safeApp.connectAuthorised(appToken, authURI)
            .then(_ => {
              console.log("Application is now registered in the network");
            });
        }, (err) => {
          console.warn("Application authorisation was rejected")
        });
    })
    .catch((err) => {
       console.error("Error from webapp: ", err);
    });
};
16 Likes

On Linux…

Just to note, for the Browser build, that does not suggest skip step 5 entirely… so, for Linux still do the $ npm run rebuild
That works well for the browser then :thumbsup:


for the Hosting Manager: following Readme: Packaging at $ npm run package
… it was all going well but then barfed

npm ERR! Linux 4.4.0-21-generic
npm ERR! argv “/usr/bin/nodejs” “/usr/bin/npm” “i”
npm ERR! node v6.10.3
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! safe_hosting_manager@0.1.0 postinstall: concurrently "install-app-deps" "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the safe_hosting_manager@0.1.0 postinstall script ‘concurrently “install-app-deps” “node node_modules/fbjs-scripts/node/check-dev-engines.js package.json”’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the safe_hosting_manager package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! concurrently “install-app-deps” “node node_modules/fbjs-scripts/node/check-dev-engines.js package.json”
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs safe_hosting_manager
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls safe_hosting_manager
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/davidpbrown/node/safe_examples/web_hosting_manager/npm-debug.log

:confused:

1 Like

What Linux distro are you using? I’ve been trying a few with mixed results, so
Ubuntu 15.04 / 15.10 - success
Lubuntu 14.04 - partial success but the authenticator doesn’t work
Suse Tumbleweed - failure at npm install stage - same errors as your post on the forum

Linux Mint 18.1 Serena

I had a similar error on Ubuntu 16.04. Got further by reading https://github.com/atom/node-keytar/issues/18

and

sudo apt-get install libgnome-keyring-dev
sudo apt-get install node-gyp
npm run dev

which eventually gave me this

but I don’t get any pop-up to actually allow/deny the authorisation.
If I try to manually start anything else it fails for lack of authorisation or says the launcher is not running

2 Likes

Thanks! that works but same here then…

I don’t see a pop up or option to authorise the app in the browser [Click :rocket: to open Authenticator] doesn’t appear to do anything.

2 Likes

I’m catching up with you guys, but wondering if the OP is missing the bit needed to use mock-routing.

EDIT: I think this post is redundant, scrolling back I see cargo build --release --features "use-mock-routing" so maybe it picks up being on dev branch (as @mav just spotted too :slight_smile: - thanks) . I’d still like to know how mock-routing is being turned on here (@frabrunelle)?

How is this part of @JPL’s post being achieved, I don’t see it:

  1. In a terminal cd into the safe_client_libs-master directory and run

$ cargo build --release --features use-mock-routing

From Building SAFE Launcher with mock-routing (Linux)

2 Likes

OK its always good to get confirmation from someone else that we see the same problem and its not a daft local mistake that is preventing progress.
I think this should be in the main forum, not stuck in dev , cos I suspect there are not enough folk looking in here. I have linked in the main forum but perhaps @frabrunelle can suggest how we get better visibility on this in a clean tidy manner.

I’m currently running npm run pack-authenticator (a substep of step 3 of the OP) and there’s a line in the output that indicates mock-routing is used by the authenticator:

> cd ./native/safe_authenticator && cargo clean && cargo update && cargo build --release --features "use-mock-routing" && cd ../../
2 Likes

When I tried yesterday on Linux Mint 18.1,
I also had to install libgnome-keyring-dev. Not node-gyp: already installed or automatically installed with the keyring package.
But I also had to do the following, to make npm find file libsecret-1.pc of the just installed package libsecret-1-dev:

export PKG_CONFIG_PATH=/usr/lib/x86_64-linux-gnu/pkgconfig/

Maybe this can be solved more elegantly, but this was the way I got it to work anyway.

2 Likes

Got to deal with RealLife right now butr I’ll certainly give that a try this evening.
Now off to deal with the sheer joy of a collapsed drain round the side of the house and the extremely messy and smelly consequences.
Wellies and rubber gloves… Anybody got a spare biohazard suit - size XXXL ?

1 Like

Me too, it is sunny in Belgium now…
And when i tried yesterday, I could make an account etc and upload files, but I couldn’t surf to website.
Also deleting files didnt’ work.
I did probably something wrong, I’ll continue trying later.

Well, @southside you seem to have a bit more than I do. EDIT: I’m on debian.

I have the browser running and showing the list of authroised apps (none of course) and when I start the Hosting Manager with:

./release/linux-unpacked/safe_hosting_manager

I get a window with title SAFE Hosting Manager, and File/View/Help menus but nothing in the window itself (just grey background), and no output to the console, and no change in the SAFE Browser.

:frowning2:

I confess to one deviation from the build instructions: I stuck with node version 6.10.2 so maybe that’s why I’m getting a different outcome to you. But I’ll wait until somebody figures out why the instructions are not succeeding before doing more on this.

Thanks to the instructions of @draw I got the authenticator and hosting manager to run.

I’m on ubuntu 16.10

  • had to install libgnome-keyring-dev
  • had to install libsecret-1-dev

However like others here I don’t see any popup from the authenticator when I run the hosting manager. The authenticator is made the top window (as expected) but the authenticator doesn’t show the approve-or-decline-app-dialog.

Nope still not getting any further…:confused:

Anybody got a clue?

EDIT: OK I see the OP has been edited - off to try again from the start in case I missed anything…

1 Like

Now I get a failure at step 6 Package for local machine:

willie@gagarin:~/projects/maidsafe/safe_browser$ npm run release:linux

> @ release:linux /home/willie/projects/maidsafe/safe_browser
> build -l -p never --x64

Skip app dependencies rebuild because npmRebuild is set to false
Packaging for platform linux x64 using electron 1.4.1 to dist/linux-unpacked

Error: Application entry file "background-process.build.js" does not exist. Seems like a wrong configuration.
    at LinuxPackager.<anonymous> (/home/willie/projects/maidsafe/safe_browser/node_modules/electron-builder/src/platformPackager.ts:367:15)
From previous event:
    at tsAwaiter (/home/willie/projects/maidsafe/safe_browser/node_modules/electron-builder/src/util/awaiter.ts:10:47)
    at Object.build (/home/willie/projects/maidsafe/safe_browser/node_modules/electron-builder/out/builder.js:135:12)
    at Object.<anonymous> (/home/willie/projects/maidsafe/safe_browser/node_modules/electron-builder/out/build-cli.js:23:11)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

npm ERR! Linux 4.4.0-75-generic
npm ERR! argv "/home/willie/.nvm/versions/node/v6.9.5/bin/node" "/home/willie/.nvm/versions/node/v6.9.5/bin/npm" "run" "release:linux"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ release:linux: `build -l -p never --x64`
npm ERR! Exit status 255
npm ERR! 
npm ERR! Failed at the @ release:linux script 'build -l -p never --x64'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     build -l -p never --x64
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/willie/projects/maidsafe/safe_browser/npm-debug.log

Anybody got a clue?

EDIT : looks like _background-process.build.js_ DOES exist - possibly just not in exactly the right place - more digging

willie@gagarin:~/projects/maidsafe/safe_browser$ locate background-process.build.js
/home/willie/projects/MockRoutingPack/SAFE Browser 0.4.3/resources/app/background-process.build.js
/home/willie/projects/MockRoutingPack/SAFE Browser 0.4.3/resources/app/background-process.build.js.map
/home/willie/projects/maidsafe/safe_browser/app/background-process.build.js
/home/willie/projects/maidsafe/safe_browser/app/background-process.build.js.map
/home/willie/projects/maidsafe/safe_browser/dist/linux-unpacked/resources/app/background-process.build.js
/home/willie/projects/maidsafe/safe_browser/dist/linux-unpacked/resources/app/background-process.build.js.map
1 Like

I got that error but was able to get it running using npm start instead of npm run release:linux

Doesn’t help solve the error but is at least another data point for the debugging.

1 Like

No shit, Sherlock

willie@gagarin:~/projects$ ls -l /home/willie/projects/maidsafe/safe_browser/node_modules/electron-builder/src/platformPackager.ts
ls: cannot access '/home/willie/projects/maidsafe/safe_browser/node_modules/electron-builder/src/platformPackager.ts': No such file or directory

Yep Seems like a wrong configuration…

There is no subdir ‘src’ in '/home/willie/projects/maidsafe/safe_browser/node_modules/electron-builder and hence no file platformPackager.ts
So no chance of examining that for further clues.

As an aside, the npm-debug.log doe not contain as much info as the actua error msg itself.

0 info it worked if it ends with ok
1 verbose cli [ '/home/willie/.nvm/versions/node/v6.9.5/bin/node',
1 verbose cli   '/home/willie/.nvm/versions/node/v6.9.5/bin/npm',
1 verbose cli   'run',
1 verbose cli   'release:linux' ]
2 info using npm@3.10.10
3 info using node@v6.9.5
4 verbose run-script [ 'prerelease:linux', 'release:linux', 'postrelease:linux' ]
5 info lifecycle @~prerelease:linux: @
6 silly lifecycle @~prerelease:linux: no script for prerelease:linux, continuing
7 info lifecycle @~release:linux: @
8 verbose lifecycle @~release:linux: unsafe-perm in lifecycle true
9 verbose lifecycle @~release:linux: PATH: /home/willie/.nvm/versions/node/v6.9.5/lib/node_modules/npm/bin/node-gyp-bin:/home/willie/projects/maidsafe/safe_browser/node_modules/.bin:/home/willie/.rbenv/shims:/home/willie/.rbenv/bin:/home/willie/.nvm/versions/node/v6.9.5/bin:/home/willie/.cargo/bin:/home/willie/.local/share/umake/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/usr/lib/jvm/java-8-oracle/bin:/usr/lib/jvm/java-8-oracle/db/bin:/usr/lib/jvm/java-8-oracle/jre/bin:/usr/local/go.bin:/home/willie/projects/fabric/bin
10 verbose lifecycle @~release:linux: CWD: /home/willie/projects/maidsafe/safe_browser
11 silly lifecycle @~release:linux: Args: [ '-c', 'build -l -p never --x64' ]
12 silly lifecycle @~release:linux: Returned: code: 255  signal: null
13 info lifecycle @~release:linux: Failed to exec release:linux script
14 verbose stack Error: @ release:linux: `build -l -p never --x64`
14 verbose stack Exit status 255
14 verbose stack     at EventEmitter.<anonymous> (/home/willie/.nvm/versions/node/v6.9.5/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/home/willie/.nvm/versions/node/v6.9.5/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:877:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid @
16 verbose cwd /home/willie/projects/maidsafe/safe_browser
17 error Linux 4.4.0-75-generic
18 error argv "/home/willie/.nvm/versions/node/v6.9.5/bin/node" "/home/willie/.nvm/versions/node/v6.9.5/bin/npm" "run" "release:linux"
19 error node v6.9.5
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error @ release:linux: `build -l -p never --x64`
22 error Exit status 255
23 error Failed at the @ release:linux script 'build -l -p never --x64'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the  package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     build -l -p never --x64
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
/home/willie/projects/maidsafe/safe_browser/npm-debug.log (END)

@frabrunelle Can anyone from Maidsafe help here?
Am I doing something stupid?
It must work in Troon (or somewhere) otherwise it would not be released but I don’t hear of anyone in the community actually getting it to work.

Not that I tried that much, but I did have different issues.
I’ve been able 1 time to publish an index.html and surf to it in the browser.
But the link to a mp4 in that index.html didn’t work.

1 Like