Web App version of MaidSafe's Demo App (by SAFE-FS)

Apps
,
1

Hey guys we now have a web version of the Demo App.

Access it with the SAFE Browser here: safe://demo.wom/

This is something I wanted the community to have for a while, and finally took a few days to hack it out with Avash. Hopefully it can take some pressure off MaidSafe to have others working on this area. Also it lets us all manage our folders, files, IDs and URLs completely online (only need to download the SAFE Browser since Launcher / Authenticator will soon be all built in). So it’s all-in-one :slight_smile:

We all need to work together to make SAFE happen!! (Tutorial vid:)

#Open Source Repo

30 Likes
2

Very cool, Will! I see how this sort of app could be really useful and intuitive.
Looking forward to that walk through.

5 Likes
3

Thanks very much! I hope people find it useful

2 Likes
4

will be great once we have mobile browsers, so anyone can super easily make websites on the go from their phones!

4 Likes
5

This is really amazing and super creative.

LOVE the colorful presentation :stuck_out_tongue:

Mindblown and still trying to wrap my head around how you guys did this

4 Likes
6

Nice work! Will be so cool if we have an all in 1 solution. Just start a browser and you’re good to go, love it :thumbsup:. I guess web-apps like this are great for sharing files as well.

4 Likes
7

Hey Will, that is awesome :rocket:

Just watched the video and it’s an amazing step forward for us all. The code will also be a great example for people to pick apart.

Hat’s off to you and Avash.

6 Likes
8

Excellent job Will! :+1:

5 Likes
9

Nice, that’s gonna be useful, good work!

4 Likes
10

Oh right I forgot to make the repo last night I’ll do that now

EDIT: RIGHT HERE

Safe-js! The javascript library built into the SAFE Browser by @joshuef , it makes all the SAFE Network API commands available

8 Likes
11

Good work Will! Your are an asset to this community!

5 Likes
12

Everyone is!! :smiley: ,…,20xr

1 Like
13

Mark just wanted to push it again, but have you ever got polyfill working yet? Development could have been much faster if I didn’t have to delete and re-upload to SAFE for every… single… code change :stuck_out_tongue:

Burned through 8 accounts (500put limits)

14

Yes, it works fine.

Include it in the head section of your HTML file like any other script. You will then have access to the safeAuth and other safe-js objects.

This only works with localhost, so you will need to:

  • run a web server on your machine that serves up the directory containing your HTML (I use ws -d ~/myapp on Linux, but there are lots if ways to run a web server of course).
  • run Beaker from source so you get the development tools menu. So clone and build beaker, and to get the menu to show, run it with NODE_ENV=debug npm run start
  • in beaker, on the ‘BeakerDev’ menu to select ‘Toggle WebSecurity for new tabs’
  • open a new tab and use it to visit the localhost app - note that it defaults to https which won’t work, so you must type the full URL including the http://

Let me know if you get stuck. Catch me on riot.im/Slack in a bit if you like.

3 Likes
15

Ahhhhhhhhh OK I had no idea, that’s good to know

Is this different from the Ctrl+Alt+I debugging console? There’s even more tools?? :smiley: :smiley:

1 Like
16

Yes - it’s a beaker menu item, you must do this, or it won’t work.

EDIT: I just fixed up the command to start beaker. This works:

NODE_ENV=debug npm run start
1 Like
17

Just went through the walk through. Very cool. This takes a touch of getting used to, in terms of how it relates to what we’re used to, but this sort of thing puts some incredibly powerful tools in the hands of literally anyone.

The easy creation and access to different IDs, making and managing files, sites, etc. Wow!

With this, it’s easier to appreciate the sort of power SAFE will deliver to all users.

Thanks for your work, Will.

5 Likes
18

Definitely! Things will be very different once we actually have to start paying for our uploads / IDs etc so we should enjoy everything being free while we can!! :smiley:

1 Like
19

Update: Added link to the new GitHub repo in the OP

Pick apart that code! Mostly all the important parts are in the main index.html file

2 Likes
20

Nice job @whiteoutmashups!

I’m able to run it with just the AppImage, as discussed here, where it is suspected to be a bug but not confirmed.

2 Likes