How to develop for the SAFE Network (draft)

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.

@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.

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. :blush:

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?

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 :slight_smile:

1 Like

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.

1 Like

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?

2 Likes

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!

2 Likes

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.

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.

1 Like

Some feedback on the OP, which contains:

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.

5 Likes

http? Wasn’t it something else?

2 Likes

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

Thanks for spotting that :slight_smile:

3 Likes

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?

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.

1 Like

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

2 Likes

I agree; you’re right. At this moment I’m not aware of any simple example applications… Anyone else? (@happybeing, @WhiteOutMashups, @oetyng) This might be something for @maidsafe_team to start working on now that the APIs are becoming more stable. I hope we’re going to see programming idioms for the SAFE APIs being pushed forward. It’s also up to the community to come up with good practices and examples.

1 Like

It sure is. I am producing an application (possibly two) for my final year dissertation at University. I am hoping that by the time I am done my programs can act as a good exemplar too. What I think we need is examples that are pure JS, not mixed with React/Redux or anything else. I feel that, although useful to see, it’s hard for a beginner to discern what is the essence of the SAFE functionality within the larger examples that Maidsafe provide. Although maybe that is just my lack of knowledge hurting me there.

3 Likes

If you visit some of the sites that people have posted to Alpha2 network, I think you will find some simple javascript only examples (like the site that I did to learn: safe://checklists). Also safe://webapi.playground/ is useful for showing you code snippets and for experimentation.

4 Likes

Good idea to check the existing applications. I believe quite a few applications are open sourced on GitHub too.

Found a few:

Not sure if they’re all as up-to-date.

6 Likes

safe://todo (Vue.js) still seems to work with SAFE Browser v0.8.0. and the source code on github is up-to-date with it.

5 Likes