How to develop for the SAFE Network (draft)

bochaco · December 6, 2017, 9:48pm

I’ll be updating the safe-coins-wallet to work with browser v0.8.0 in the next few days.

DaBrown95 · December 7, 2017, 2:55pm

Thanks everyone for pointing out these examples! Big help Hopefully as we move forward more and more good examples will be produced. (Including native apps!)

grynca · December 15, 2017, 8:44am

Hello,
i just built newest SAFE browser from source with yarn mock
i have export NODE_ENV=dev set in my terminal
then i cloned maidsafe/safe_examples and started safe_web_api_playground via yarn gulp
it gives me Error: Cannot find module './code-snippets/safeCryptoSignKeypair' from '/home/grynca/DEV/SAFE/safe_examples/safe_web_api_playground/static/js'
but server starts.
i could not access localhost via localhost:3003 in adress bar as mentioned in playground README,(it prepends it automatically with safe://)
but both http://localhost:3003/ and localhost://p:3003 seems to access the site.
I am however getting:
client-scripts.js Failed to load resource: the server responded with a status of 404 (Not Found)
in dev. console.
Is this to be expected ? The page seeems mostly empty with only RUN button that gives another js error upon clicking:
Uncaught ReferenceError: handleSubmit is not defined at HTMLButtonElement.onclick ((index):73)
Am i doing something wrong, please guide me

bochaco · December 15, 2017, 1:49pm

Hi @grynca, that error in the shell console is definitely not expected to happen, although as you said the server starts and I’m able to use the tool on both browsers, on Beaker browser I can load it and use it with localhost://p:3003, on Peruse browser I was also able to load it and run it with http://localhost:3003 (note they support localhost in different ways).
Can you please confirm you are using the correct URL for the browser you are using?
We will need to fix the error about the missing module anyhow.

…I cannot believe we are already asking a question like: which browser are you using for SAFEnet?

grynca · December 15, 2017, 2:47pm

Thank you for swift response.
i was using the https://github.com/maidsafe/safe_browser from the OP tutorial.
However after your response i discovered Peruse and and also built it. With that i am able to access the localhost playground via http://localhost:3003 and finally without js errors.
Although when starting Peruse with yarn dev i see some other error in console:
ERROR: Error: Dynamic Symbol Retrieval Error: /home/grynca/DEV/SAFE/peruse/app/node_modules/@maidsafe/safe-node-app/src/native/libsafe_app.so: undefined symbol: test_create_app at DynamicLibrary.get (/home/grynca/DEV/SAFE/peruse/app/node_modules/ffi/lib/dynamic_library.js:112:11) at api.forEach (/home/grynca/DEV/SAFE/peruse/app/node_modules/@maidsafe/safe-node-app/src/native/lib.js:33:46) at Array.forEach (native) at Object.ffi.init (/home/grynca/DEV/SAFE/peruse/app/node_modules/@maidsafe/safe-node-app/src/native/lib.js:25:9) at SAFEApp (/home/grynca/DEV/SAFE/peruse/app/node_modules/@maidsafe/safe-node-app/src/app.js:36:9) at initializeApp (/home/grynca/DEV/SAFE/peruse/app/node_modules/@maidsafe/safe-node-app/src/index.js:61:25) at /home/grynca/DEV/SAFE/peruse/app/extensions/safe/network.js:240:24 at Generator.next (<anonymous>) at step (/home/grynca/DEV/SAFE/peruse/app/extensions/safe/network.js:31:191) at /home/grynca/DEV/SAFE/peruse/app/extensions/safe/network.js:31:437 Problems initing SAFE extension
But as i said it loads fine and i can access localhost. What exactly am i supposed to do in playground webapp?
Should i write js into the textbox?
I discovered this: http://docs.maidsafe.net/beaker-plugin-safe-app/
But as i discovered in dev console window.safeApp is undefined.
Maybe i am asking too basic questions, can you direct me to some step by step guide please ?
Edit:
also i cant sing in with SAFE authenticator from Peruse is that because i am launching in dev mode ?

bochaco · December 15, 2017, 5:13pm

That’s because you’d need to build it for mock if you are gonna run it in dev mode with NODE_ENV=dev, but I’m also having issues to use it with mock so I’ll have to research a bit more. In the meantime, I’d recommend you to just package it and run the packaged version if you wanna connect to the alpha-2 net, that should work with no issues.

Yes just use the textbox, the code you see there are just examples available for you to use, but you should be able to put any code there and run it.
You can use it to test code snippets which make use of the DOM API, usually you would do this until you know exactly what code you need for you app and then place it within your app’s code. Thus, it’s mainly for learning, testing and troubleshooting part small pieces of code.

I’m not sure if this is already available in Peruse yet, it certainly is in Beaker browser. Just make sure you use a dev console of a tab which loaded a safe protocol URL (using beaker browser), i.e. one which URL is safe://, you can even try loading an invalid URL like safe://<non existing safesite url> and after you get the error about not finding the page you will be able to access the DOM API from its dev console. Alternatively just use the API playground tool to run your code.

I think that you’d need to run it with yarn live-dev to be able to run in dev mode but against alpha-2 net and that’s not working yet. So just use the packaged version to connect to the network.

happybeing · December 16, 2017, 5:49pm

Hi Josh,

The hack I was referring to was a workaround for this problem, which I think you have implemented for safe: URLs?

I am trying SAFE Browser v0.8.0 mock build (by MaidSafe) and I still have this problem when using RemoteStorage.js with mock (i.e. the browser tab goes black, indicating a web view crash I think).

Is there a fix likely for this or should I give up asking about this? I keep asking because I had the impression you had a workaround and that it was just waiting to be merged, but may be wrong.

~~Good news is that I can run my Solid PoC with mock hooray!!!~~ er, no. It wasn’t running far enough

Oh, does Peruse include the DOM API yet?

joshuef · December 18, 2017, 2:01pm

Morning @happybeing!

You should be able to grab the latest peruse builds here and get on the version of localhost support there. (Using http://localhost:`). Peruse had DOM APIs ready and this way of accessing localhost (foregoing the custom protocol) is much less problematic. I’ve had react hot-reloading working there where it would crash the webview previously.

Let me know how you get on!

happybeing · December 18, 2017, 3:37pm

Cool, thank you.

Does Peruse suffer from this bug?

joshuef · December 18, 2017, 3:48pm

The latest release yes, but if you pull master and build from there, you should be good as I merged @bochaco’s fix just now.

happybeing · December 20, 2017, 6:42pm

@joshuef I’ve built Peruse from master (your repo).

I think it built ok but I had connectivity problems and had to ^C and restart at a few points so it might not be 100%

I’ve checked my IP is set and then run yarn dev but I’m having a couple of issues. First there’s an error when Peruse starts up (see below), and second if I try to login to my Alpha2 a/c it says it can’t connect (errors also shown below).

Does this look like a broken build or something else do you think:

$ yarn dev
yarn dev v0.27.5
$ cross-env START_HOT=1 yarn run hot-updates-server
The `setup` option is deprecated and will be removed in v3. Please update your config to use `before`
Project is running at http://localhost:1212/
webpack output is served from http://localhost:1212/dist
Content not from webpack is served from /home/mrh/src/safe/peruse/dist
404s will fallback to /index.html

> peruse@0.2.0 start-hot-renderer /home/mrh/src/safe/peruse
> cross-env HOT=1 NODE_ENV=development IS_UNPACKED=true electron -r babel-register -r babel-polyfill ./app/main.development

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
      Started with node env: development
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Running with derived constants:

isRunningUnpacked? true
isRunningPackaged? false
isRunningProduction? false
isRunningDevelopment? true
isRunningSpectronTest? false

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

flow-runtime: Cannot resolve type: array
App Ready
Loading extensions
Registering SAFE Network Protocols
safe Registering
Registering safe-auth scheme
Init mock app
ERROR:  Error: Dynamic Symbol Retrieval Error: /home/mrh/src/safe/peruse/app/node_modules/@maidsafe/safe-node-app/src/native/libsafe_app.so: undefined symbol: test_create_app
    at DynamicLibrary.get (/home/mrh/src/safe/peruse/app/node_modules/ffi/lib/dynamic_library.js:112:11)
    at api.forEach (/home/mrh/src/safe/peruse/app/node_modules/@maidsafe/safe-node-app/src/native/lib.js:33:46)
    at Array.forEach (native)
    at Object.ffi.init (/home/mrh/src/safe/peruse/app/node_modules/@maidsafe/safe-node-app/src/native/lib.js:25:9)
    at SAFEApp (/home/mrh/src/safe/peruse/app/node_modules/@maidsafe/safe-node-app/src/app.js:36:9)
    at initializeApp (/home/mrh/src/safe/peruse/app/node_modules/@maidsafe/safe-node-app/src/index.js:61:25)
    at /home/mrh/src/safe/peruse/app/extensions/safe/network.js:240:24
    at Generator.next (<anonymous>)
    at step (/home/mrh/src/safe/peruse/app/extensions/safe/network.js:31:191)
    at /home/mrh/src/safe/peruse/app/extensions/safe/network.js:31:437
Problems initing SAFE extension
Failed to load native libraries: Error: Dynamic Symbol Retrieval Error: /home/mrh/src/safe/peruse/app/node_modules/@maidsafe/safe-node-app/src/native/libsafe_app.so: undefined symbol: test_create_app
{ 1
    at module.exports (/home/mrh/src/safe/peruse/app/node_modules/@maidsafe/safe-node-app/src/native/_error.js:19:10)
    at Object.ffi.init (/home/mrh/src/safe/peruse/app/node_modules/@maidsafe/safe-node-app/src/native/lib.js:61:11)
    at SAFEApp (/home/mrh/src/safe/peruse/app/node_modules/@maidsafe/safe-node-app/src/app.js:36:9)
    at initializeApp (/home/mrh/src/safe/peruse/app/node_modules/@maidsafe/safe-node-app/src/index.js:61:25)
    at /home/mrh/src/safe/peruse/app/extensions/safe/network.js:240:24
    at Generator.next (<anonymous>)
    at step (/home/mrh/src/safe/peruse/app/extensions/safe/network.js:31:191)
    at /home/mrh/src/safe/peruse/app/extensions/safe/network.js:31:437
    at Promise (<anonymous>)
    at /home/mrh/src/safe/peruse/app/extensions/safe/network.js:31:99
  message: 'Failed to load native libraries: Error: Dynamic Symbol Retrieval Error: /home/mrh/src/safe/peruse/app/node_modules/@maidsafe/safe-node-app/src/native/libsafe_app.so: undefined symbol: test_create_app' }
HAPI Server running at: http://localhost:3984
Starting render process
safe-auth:// url being parsed: safe-auth://home/
safe-auth:// url being parsed: safe-auth://home/
safe-auth:// url being parsed: safe-auth://home/styles.css
safe-auth:// url being parsed: safe-auth://home/bundle.js
WARN 18:36:37.850478742 [crust::main::bootstrap mod.rs:96] Failed to seek peers using service discovery: ServiceDisc(Io(Error { repr: Os { code: 1, message: "Operation not permitted" } }))
ERROR 18:36:37.850576590 [crust::main::service service.rs:314] Could not bootstrap: ServiceDisc(Io(Error { repr: Os { code: 1, message: "Operation not permitted" } }))
WARN 18:37:03.738338887 [crust::main::bootstrap mod.rs:96] Failed to seek peers using service discovery: ServiceDisc(Io(Error { repr: Os { code: 1, message: "Operation not permitted" } }))
ERROR 18:37:03.738423095 [crust::main::service service.rs:314] Could not bootstrap: ServiceDisc(Io(Error { repr: Os { code: 1, message: "Operation not permitted" } }))

bochaco · December 21, 2017, 12:01am

I think you need to run it with yarn live-dev to run it in dev mode and connect to safenet, please give it a try.

bochaco · December 21, 2017, 12:25am

It’ll try to load the libs with mock routing, so in order to use yarn dev you will need to install the libs with mock, i.e. with NODE_ENV=dev yarn.

joshuef · December 21, 2017, 3:02am

Yup, @gabriel is right. live-dev (or indeed you could just run yarn package to get a build for your system. Will enable connection to the network. (if you installed without NODE_ENV=dev set).

NODE_ENV=dev and yarn dev are for the mock network.

A note on live-dev: You need to have crust config in the correct place, on OSX and linux I have helper commands for this: https://github.com/joshuef/peruse/blob/master/package.json#L43-L44 (I’m not sure what the windows equivalent is.)

[this is a temp convenience function, that we can work around at a later date]

happybeing · December 21, 2017, 12:59pm

Trying:

    yarn put-live-net-files-for-linux
    yarn live-dev

Gave a start up error (I have set my IP BTW):

$ yarn live-dev
yarn live-dev v0.27.5
$ cross-env START_HOT=1 yarn run hot-updates-server-live
The `setup` option is deprecated and will be removed in v3. Please update your config to use `before`
Project is running at http://localhost:1212/
webpack output is served from http://localhost:1212/dist
Content not from webpack is served from /home/mrh/src/safe/peruse/dist
404s will fallback to /index.html

> peruse@0.2.0 start-hot-renderer-live /home/mrh/src/safe/peruse
> cross-env HOT=1 NODE_ENV=production IS_UNPACKED=true electron -r babel-register -r babel-polyfill ./app/main.development

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
      Started with node env: production
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Running with derived constants:

isRunningUnpacked? true
isRunningPackaged? false
isRunningProduction? true
isRunningDevelopment? false
isRunningSpectronTest? false

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

App Ready
Loading extensions
Registering SAFE Network Protocols
safe Registering
Registering safe-auth scheme
Initialising unauthed app:  { id: 'net.maidsafe.peruse-browser',
  scope: null,
  name: 'Peruse Browser',
  vendor: 'Maidsafe Ltd',
  customExecPath: '/home/mrh/src/safe/peruse/node_modules/electron/dist/electron /home/mrh/src/safe/peruse/node_modules/electron/dist/resources/default_app.asar' }
this.req.uri safe-auth:AAAAACYXl-8CAAAAGwAAAAAAAABuZXQubWFpZHNhZmUucGVydXNlLWJyb3dzZXI safe-bmv0lm1hawrzywzllnblcnvzzs1icm93c2vy:AQAAACYXl-8CAAAAAAAAABkAAAAAAAAAEAAAAAAAAAAxNzguNjIuNzYuODo1NDgzEwAAAAAAAAAxMzguNjguMTg1LjIxODo1NDgzEgAAAAAAAAAxMzguNjguMTgxLjU3OjU0ODMSAAAAAAAAADEzOC42OC4xODEuNjA6NTQ4MxIAAAAAAAAAMTM4LjY4LjE4MS44Njo1NDgzEgAAAAAAAAAxMzguNjguMTgxLjg3OjU0ODMTAAAAAAAAADEzOC42OC4xODEuMTY4OjU0ODMTAAAAAAAAADEzOC42OC4xODEuMTc2OjU0ODMTAAAAAAAAADEzOC42OC4xODEuMTc5OjU0ODMTAAAAAAAAADEzOC42OC4xODEuMTgwOjU0ODMTAAAAAAAAADEzOC42OC4xODEuMTgyOjU0ODMTAAAAAAAAADEzOC42OC4xODEuMjQyOjU0ODMTAAAAAAAAADEzOC42OC4xODEuMjQzOjU0ODMTAAAAAAAAADEzOC42OC4xODEuMjQ5OjU0ODMSAAAAAAAAADEzOC42OC4xODkuMTQ6NTQ4MxIAAAAAAAAAMTM4LjY4LjE4OS4xNTo1NDgzEgAAAAAAAAAxMzguNjguMTg5LjE3OjU0ODMSAAAAAAAAADEzOC42OC4xODkuMTg6NTQ4MxIAAAAAAAAAMTM4LjY4LjE4OS4xOTo1NDgzEgAAAAAAAAAxMzguNjguMTg5LjMxOjU0ODMSAAAAAAAAADEzOC42OC4xODkuMzQ6NTQ4MxIAAAAAAAAAMTM4LjY4LjE4OS4zNjo1NDgzEgAAAAAAAAAxMzguNjguMTg5LjM4OjU0ODMSAAAAAAAAADEzOC42OC4xODkuMzk6NTQ4MxEAAAAAAAAANDYuMTAxLjUuMTc5OjU0ODMBaxUAAAAAAAEHAAAAAAAAAGFscGhhXzIA
HAPI Server running at: http://localhost:3984
I 17-12-21 12:32:26.333855 Failed to Bootstrap with 138.68.189.17:5483: (ClientNotWhitelisted) Our Client is not whitelisted

And Peruse doesn’t load (blank web view - but not black) and this in the console:

[HMR] Waiting for update signal from WDS...
external "vendor":1 Uncaught ReferenceError: vendor is not defined
    at Object.dll-reference vendor (external "vendor":1)
    at __webpack_require__ (bootstrap ec9e26b…:678)
    at fn (bootstrap ec9e26b…:88)
    at Object../node_modules/react/react.js (react.js from dll-reference vendor:1)
    at __webpack_require__ (bootstrap ec9e26b…:678)
    at fn (bootstrap ec9e26b…:88)
    at Object../app/index.js (index.js:1)
    at __webpack_require__ (bootstrap ec9e26b…:678)
    at fn (bootstrap ec9e26b…:88)
    at Object.0 (bundle.js:13164)
client?fd75:77 [WDS] Hot Module Replacement enabled.

Also tried packaging, see next reply…

happybeing · December 21, 2017, 1:14pm

yarn package built and running the packaged peruse I was able to log into SAFE alpha2. I opened a new tab and can visit safe: web apps. Hoorah! But…

After that I’m not having any luck.

I tried:

https://localhost:8443 (I’m running a Solid server there) but hitting return just blanks the window.
localhost://p:8443 does nothing

My server is *https*://localhost:8443 but I get same result for http://localhost:8443/ (no browser console or linux console output for this, whereas I see the accesses for safe: websites in the linux console).

Thank you @JPL: Right-click > Inspect Element ~~I don’t know how to open the browser console (Ctrl-Shift-I / K Ctrl-Alt-I etc. don’t do anything).~~

JPL · December 21, 2017, 1:21pm

Right click - inspect element

joshuef · December 21, 2017, 4:40pm

Your first error there, ‘bootstrap’, is normal. This is the browser trying one server, where you arent authed, it then tries the next one and so on until connected.

So you could have 5 or 6 of these before it connects. I agree though, It’s a bit misleading. We should log a final ‘connected’ message just to be clearer.

The second vendor issue is because the webpack hasn’t completed yet (i think), so if you wait a moment and try again it should load.

joshuef · December 21, 2017, 4:41pm

yeh, the localhost protocol has been abandoned.

Hmm, is your https server upgrading http connections? Right now, only http is enabled. But I can apply a tweak to enable https for localhost ips also. Just an oversight in the accepted protocol there I think. (though if it’s not upgrading the connection, there’s a bug, so let me know please!)

happybeing · December 21, 2017, 4:45pm

Thanks josh, really helpful as usual

If I type the http URL as above and hit return, it remains http. Does that answer your question about ‘upgrading’?