How to develop for the SAFE Network (draft)

General
69

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
70

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
71

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
72

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.

73

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
74

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
75

http? Wasn’t it something else?

2 Likes
76

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
77

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?

78

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
79

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

2 Likes
80

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
81

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
82

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
83

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
84

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
85

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

3 Likes
86

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

6 Likes
87

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

1 Like
88

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? :sunglasses: :slightly_smiling_face:

2 Likes