Local Development / polyfill help

safe-js

#1

Guys I’ve been trying very hard to get polyfill / local development working for all the apps I’m making for the SAFE Browser and just setting this all up has proven to be the most difficult part :stuck_out_tongue:

I have had help from @happybeing and @joshuef so far, and now I am running my code (using Demo Web App code for this example) from my Apache’s /var/www/html/ folder and opened that localhost in my SAFE Browser. So I can see my demo web app running, but I can’t get any of the commands (auth is the first page that pops up on the demo app) to run

I am not even at the polyfill part yet, just trying to get a simple command running.

So I tried changing the safeAuth.authorize…etc part in my app’s JS to safejs.auth.authorize like this polyfill says. No luck. Tried lots of other thngs too.

Do I have to have a safe-js folder somewhere??

npm doesn’t even let me install safe-js.

Result of running npm i safe-js:

~$ npm i safe-js
/home/wook
└── safe-js@0.3.3 

npm WARN enoent ENOENT: no such file or directory, open '/home/wook/package.json'
npm WARN wook No description
npm WARN wook No repository field.
npm WARN wook No README data
npm WARN wook No license field.

sorry for all this mayhem…

just someone pleeease help me get polyfill running!! :stuck_out_tongue:


#2

don’t. the polyfill tries to fill the shoes of the actual API. You just have to include the distribution bundle in the html and let it load.

After installing copy the polyfill from the distribution bundle, to where you need it. It should genreally be in node_modules/safe-js/dist/, so from wherever you installed it do something like this:

cp node_modules/safe-js/dist/polyfill.js /var/www/html

(you might have to sudo this)


Now add the polyfill in your (index.)html file to be loaded before your script:

    <script src='polyfill.js'></script>

Now you can serve it from any localhost server (like apache). It won’t work on any system that doesn’t have the launcher running though.

It’s exactly what I did for development for the noBackend Invoice Example App. See here and here.

Hope this helps!


#3

EDIT #2: I put the compiled polyfill.js file by itself into my apache website folder (var/www/html/) and now I guess the polyfill part is working maybe? but this error is still stopping my local version of my SAFE-FS Demo App from working at all. The page loads up but none of the buttons (authorize, etc) can ever work. Do I need to install safe-js somewhere maybe?


#4

You have to follow the instructions I gave earlier, otherwise you’ll get these CORS errors when you are running from localhost. Otherwise, looks like you are there!


#5

well I guess I’m stuck at the “build from source” part, never ever done anything like that

I cloned from github, so I have all the files, but everything I find on google about building from source is either irrelevant or doesn’t work for this browser

so I just tried typing in “NODE_ENV=debug npm run start” after cd into the beaker-master folder, but got all these errors:

> @ start /home/wook/Desktop/beaker-master
> gulp start

sh: 1: gulp: not found

npm ERR! Linux 4.4.0-47-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "start"
npm ERR! node v6.9.2
npm ERR! npm  v3.10.9
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @ start: `gulp start`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the @ start script 'gulp start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! Please include the following file with any support request:
npm ERR!     /home/wook/Desktop/beaker-master/npm-debug.log
wook@wook-ThinkPad-T410:~/Desktop/beaker-master$ sudo apt-get install gulp
Reading package lists... Done
Building dependency tree       
Reading state information... Done
E: Unable to locate package gulp

then tried installing ‘gulp’ but no package exists.

How did you guys install this browser from source?


#6

I followed the instructions on github, but may have already had some things installed. In the early days of my adventures with npm, gulp etc I remember having various problems, so don’t be discouraged.

@bochaco did say that he managed to do this without building from source, even though that is supposed to be required, and because of that I’ve always done so. The CORS issue does suggest to me that building from source will solve the error you found in the screenshot.

Anyway, back to your gulp error… Did you follow these instructions in the reader before trying the above?

If so, did they seem ok or have any errors?


#7

Correct, that’s how I’m currently developing, just using the AppImage v0.4.0-5 and then the option “Toggle WebSecurity for new tabs”.

I was also able to build it from source. If you got the gulp error from following the instructions on the breaker’s README.md file, I guess you then need to overcome the issue related to installing gulp.


#8

I think I’m super close!

I installed all that, and it gave a few errors but at least the browser loads up when I run the commands.

Here are the errors:

and

despite that, I now have my beaker running (although it looks like a generic beaker, and looks different than @joshuef 's build.

I looked for the “BeakerDev” menu and only see this at the top, which only gives two options ("Reload Shell-Window" and “Toggle Shell-Window Devtools”. I’ve tried both and neither let my safe-js commands work.

Is this the right menu? it’s the only similar type of thing I can find to what you described:

sorry for all these questions! This seems to be an important part of building SAFE Web Apps and (like everything I do), once I understand it I will definitely write a tutorial so no other new SAFE App Developers will ever have to go through all this craziness again :stuck_out_tongue:


#9

According to Ben the “Uncaught Exception” you see at the end is a known refcounting bug with the safe-js and launcher and it can be ignored: https://riot.im/app/#/room/!zLJyvagfyZYGKZNiTc:matrix.org/$1479321982720917PmdIE:matrix.org


#10

The BeakerDev menu should have the option mentioned in my other post as well, so that’s not right, but I don’t know why. You are building a later version than me though so that might be it.

You can build an earlier version by checking it out and repeating the build steps - I suggest the “burnthemall” option just to be safe.

So in your beaker directory:

git checkout tags/v0.4.2
npm run burnthemall

The above may not be correct - so check the syntax etc if it doesn’t work, but after that highly you’ll get the full BeakerDev menu!

Happy Christmas Will!


#11

Hmm, seems the readme steps there on the repo were still referencing a line about changing branch. I’ve removed this now, so you should just be on the master git branch of https://github.com/joshuef/beaker/.

If you do need to change the branch back to master there, be sure to run npm i again in the root project folder before running npm run start.

You should also need to run export NODE_ENV=development to get the dev menus in beaker.


I’m travelling today but I’ll try and check later to see how you get on @WhiteOutMashups


#12

#Success!!! POLYFILL!!! :smiley: :smiley:

so happy, thanks so much everyone!! Lots of people helped get me working so I’ll definitely be repaying all the time I’ve sucked from you all with cool apps coming out!!!

Looks like that 'master' branch was the issue; I did what you said there and now I have polyfill working from my http://localhost/ & VERY EXCITED about that!! app devv-ing will be so much faster :smiley: :smiley:

Thanks very much all you guys @happybeing @joshuef @Joseph_Meagher @wes @bochaco @ben and everyone! I’ll definitely make a tutorial on this part too, because it can be confusing and it is a very important part for new devs to be able to do


#13

And @joshuef , having just gone through this I have 2 questions:

  • can the polyfill.js file be somehow embedded into the Browser so new app devs won’t have to grab a compiled copy and place it into their localhost app files?
  • is there a way we can get this dev option of “Toggle WebSecurity for New Tabs” into the production release builds? I can definitely see that this may lower security, so NO is a totally acceptable answer, but I was thinking maybe it could be put deep in the “Advanced Options” somewhere or something, so people would only need one build of the browser, and would remove many of the steps I just did.

Either of these would make it easier for new people to make SAFE Web Apps in the future


#14

You can place this in your code to conditionally use the polyfill.js only in dev mode, when you run the app from the SAFEnet it uses the functions embedded in the browser:

if (process.env.NODE_ENV !== ‘production’) {
require(‘safe-js/dist/polyfill’)
}


#15

also, looks like I don’t even really need the apache part,

I’m running an index.html straight from my desktop in SAFE Browser Dev version and I can get all the polyfill etc commands to work

so maybe when I’m making my polyfill tutorial, I’ll be able to simplify it a ton by removing all the server steps?


#16

I see, I use nodejs to develop at the moment.


#17

I think a guide would be a great idea, here are the safe-js polyfills links from dist folder of npm (these won’t be updated)
https://drive.google.com/open?id=0B5yEgXGejLibRmRYcTVVa3czVVk safe-js polyfill
https://drive.google.com/open?id=0B5yEgXGejLibcHJhd201S1hQTVE safe-js polyfill minified.


#18

The steps I follow at the moment (they may become obsolete when the new Authenticator and safe_client_libs get released) to create a SAFE web app are the following:

  1. Install nodejs and create the skeleton of the app with create-react-app
  2. Add safe-js module to the app: npm install safe-js --save
  3. Place the following code in your app:
if (process.env.NODE_ENV !== 'production') {
   require('safe-js/dist/polyfill')
}
  1. Place your code which calls the safe-js functions, e.g. window.safeAuth.authorise(app).
  2. Run the SAFE Launcher.
  3. Run your app: npm start
  4. Open the SAFE Browser, and select from the menu: “BeakerDev” -> “Toggle WebSecurity for new tabs”
  5. Open a new tab on the browser, and go to your web app’s URL, e.g. http://localhost:3000

You might need to manually patch the polyfill.js located at node_modules/safe-js/dist/polyfill.js if you invoke window.safeStructuredData.readData (see issue 21)


EASIEST API TUTORIAL website
#19

That’s a great guide, I might steal that

I’ll still make one for web apps though


#20

What do you mean?, that guide is for a web app