How to develop for the SAFE Network (draft)

happybeing · October 2, 2017, 2:29pm

I think another may be cross origin requests within safe:// (although even moreso when users turn on clearnet access). Much less risky than on clearnet, but still may provide ways to unintentionally leak information.

Again, this is left to the app developer (e.g. applying minimum CORS headers), and that is the nub of the problem Mike Hearn is highlighting: developers needing to pay attention to and knowing how to design for security when this is not a prerequisite for building a useful, slick looking app or delivering a product to market.

intrz · October 2, 2017, 4:22pm

Turning on clearnet access shouldn’t be done if you want security.

With SAFE only, there’s no ajax requests and the security model is built around the SAFE api. You’re basically connecting directly to the database and not through a server, so there isn’t really directly CORS is there?

CORS allows you to specify who or what can access your endpoint on the server side, but with SAFE, you do that with MD permissions.

happybeing · October 2, 2017, 4:25pm

Yes, I’m probably worrying about nothing here. I certainly don’t understand security well enough to say one way or another. I’d love to see somebody write about SAFE web app security and show what the possible vulns are and point out how x, y, z etc of clearweb issues don’t apply and why. Not me I’m afraid! Thanks for the comments.

joshuef · October 3, 2017, 7:17am

At this point, 'fraid so.

Interesting articles there from Hearn there!

loziniak · October 5, 2017, 2:58pm

Funny, that electron seems to be part of that broken web technology stack Mike Hearn writes about, and then SAFE makes native apps with it. For me it’s double-broken I think it’s C/Java bindings that we need and then make truly native apps with qt, java, whatever.

happybeing · October 24, 2017, 5:18pm

Does the ‘hack’ work around the electron crash I was having with mock browser and RS.js? If so, is it in these mock binaries or likely to be in master soon? Thanks.

happybeing · November 4, 2017, 1:45pm

@joshuef Repeating the above…

I’ve tried the MaidSafe mock build and can load an index.html but it won’t load CSS, images or jpg etc in the HTML or directly in the address bar (for the latter it adds a trailing slash which is odd).

This may be because I hacked the gulp stuff, but I don’t know so I’ll see if I can get the safe_api_playground running.

This way of developing seems to require a lot of garbage in your working directory (first clone safe_api_playground etc). Is that still the recommended route?

Thanks.

joshuef · November 7, 2017, 10:36am

sorry @happybeing, I thought I’d replied there.

Not sure to which ‘hack’ you’re referencing, exactly (I dont see it above). Though I think that might be from another thread. In which case, probably about avoiding the electron/devtools crash?

This wont be in master yet (nor the mock bins), I didnt get a chance to test it out properly.

Sorry if I’m reapeating Qs @happybeing , I’m a bit lost in this thread.

I don’t think you should be needing to grab the safe playground for dev. You’re saying that currently with localhost dev you dont get any images/css loading? Right?

And you’re using gulp to run a server which is serving all this?

happybeing · November 7, 2017, 10:45am

No worries Josh, I know you guys are busy and I have other things I can get on with while waiting. So…

The OP instructions lead me to think I should start with the playground (“Clone this repo…”) but I see that’s just to get the gulpfile so I can start again and try it, but…

Yes, I was visiting localhost:3003 which was loading my index.html but not the included js, css etc. Perhaps that’s why I am not yet seeing the bug (black view screen). So I guess I need to wait for your changes to be in the mock build or to try again building it myself? If so, no worries. I’d like to be able to use mock but can get by with extra invites mean time

joshuef · November 7, 2017, 11:52am

aha, okay.

Well, just be sure you’re serving your CSS from a location that the gulp files can handle:

Currently the gulpfile is just piping bootstrap into the build folder (from the examples/playground):

gulp.task('css-deps', function () {
  gulp.src([
      './node_modules/bootstrap/dist/css/bootstrap.css'
    ])
    .pipe(concat('deps.css'))
    .pipe(gulp.dest('./build/css'));
});

which is serving:

gulp.task('serve', function () {
  var env = envfile.parseFileSync('.env');
  nodemon({
    script: './index.js',
    ext: 'html js',
    ignore: ['build/**/*.*', 'static/**/*.*', 'node_modules'],
    tasks: [],
    env: env
  }).on('restart', function () {
    console.log('server restarted....');
  });
});

So if that’s not set correctly for your files they wont be retrieved.

bzee · November 7, 2017, 4:10pm

Does anyone recognize the following error from the Web Hosting Manager?

Failed to load native libraries: Error: Dynamic Symbol Retrieval Error: Win32 error 127

I’m trying to run the Web Hosting Manager by building it and running it with yarn dev (and running it on the Alpha network). I’ve apparently made a mistake by removing a Public ID which makes the Web Hosting Manager unable to start. I’d like to see what error the Web Hosting Manager encounters.

I’m able to run it fine with the pre-built binaries from the SAFE examples GitHub repository, but I can’t get a console to show there.

Edit: I think I know why the Web Hosting Manager is unable to start. I’ve inserted an unencrypted entry into the Public Names Container. While the value is empty, the Web Hosting Manager still tries to decrypt the key. I will test this hypotheses tonight. @joshuef, any recommendation on how to proceed if this is the case? Could I make a pull request for the Web Hosting Manager to handle such a case?

bochaco · November 7, 2017, 7:49pm

You might have missed setting NODE_ENV=dev when doing yarn install. Remove the node_modules folder and run $env:NODE_ENV = "dev" in PowerShell or set NODE_ENV=dev in command prompt, then run yarn install again.

You are actually more than welcome to do so if you know how to solve it!

bzee · November 7, 2017, 7:53pm

I am trying to build it for the Alpha 2 network, so not for mock routing.

I made an attempt, however I didn’t get the Web Hosting Manager to work on the latest revision. I still get the error from my previous post.

bochaco · November 7, 2017, 8:19pm

I don’t think you can run the app in dev mode and to connect with Alpha-2, that only works with mock at the moment. So you will need to run the packaged version if you want to connect to the network.

happybeing · November 8, 2017, 12:23pm

Some feedback on the OP, which contains:

maidsafe:

Developing a SAFE website

Clone this repository and follow the instructions in the README to get it running on localhost:3003.

Open a new tab in the SAFE Browser and navigate to localhost://p:3003, where you’ll be able to view the site and work with the SAFE Web API. Try making changes in the code and see how gulp is watching for file changes so that you don’t have to restart the server. Just refresh your browser tab.

Using this repo as an example of how to quickly develop your own site:

Run npm init in your own project folder, follow command-line instructions, and then observe your newly created package.json file

Run npm install --save express body-parser

Copy gulpfile.js into your project folder, if you’d like to automate tasks like restarting the server and concatenating JS modules. Otherwise you don’t need it but it does speed up development. If you do want to use it, be sure to npm install gulp -g

Copy the index.js file into your project folder. This program serves your index.html and broadcasts it on port 3003.

If you are working with gulpfile.js, simply run gulp.

If you are not working with gulp, simply run node index and your server will start.

I found the above difficult to follow and have only just realised (after a few attempts to get this working) that I don’t need gulp. It does say so, so if I’d read it fully and carefully I’d have noticed the last line. But for a newcomer there’s so much new and confusing information there. I didn’t know what gulp was or did, so it was hard for me to realise it wasn’t an important part of this myself, and I missed that last line.

Intsructions work better if somebody who doesn’t understand what is happening can just follow them, so I suggest starting with the absolute minimum - don’t even mention gulp - it is entirely irrelevant to getting a website working with the mock browser. You can always add a subsequent section about gulp or anything else so people can come back to it once the basics are working.

So for example:

Developing a SAFE website

When you create a website it will need at least one file, which must be called index.html. There may be other files, but just index.html containing very simple HTML is enough to get you started. For an example, see What is index.html and how can I make a simple safe:// website

Create your website and put the files and folders all in one place, under folder just for that website:

make a folder for your website, for example ./mysite
put your website files in that folder (including at least index.html)
if your website uses other HTML files, scripts, images, CSS files and so on they should go in there too or in subfolders of ./mysite

To visit the website in SAFE Browser (mock build) you will need start a local web server:

install a web server on your machine. For example on Linux using node package manager type:
npm install -g ws
start your web server telling the location of your website folder. For example, again on Linux type:
ws -d ./mysite
start the SAFE Browser (mock build) and visit the URL of the web server - but using this format localhost://p:8000 (i.e. typing that into the address bar).

Your website should now be displayed inside SAFE Browser and work as normal.

drehb · November 8, 2017, 12:36pm

http? Wasn’t it something else?

happybeing · November 8, 2017, 12:41pm

EDIT: Yes! I hadn’t got far enough I can’t test but think it should be localhost://p:8000 (for my example)

Thanks for spotting that

DaBrown95 · December 5, 2017, 5:19pm

If building your own application, there are a number of options depending on what you need. Take a look at this very basic Electron application, https://github.com/hunterlester/safe-app-base17, which uses the SAFE App Node.js library15 as a dependency to connect to the network.

As far as I can tell this app doesn’t work. It gets as far as generating an auth uri and sending it to the SAFE Browser, but beyond that the ‘auth-response’ never returns to the application. Is there an issue with the code or am I doing something wrong my side?

bzee · December 6, 2017, 3:31pm

Looks like that app hasn’t been updated since august 1. A lot has probably changed since then.

You might want to take a look at the maidsafe/safe_examples repository for more up-to-date example apps.

DaBrown95 · December 6, 2017, 4:23pm

Although those examples are fantastic, they are not as ‘beginner friendly’ as I am looking for.