I know I’ll have lots of elementary questions as I personally break into this, so I’m making this thread for my such questions and for anyone else who has questions of this miniscule caliber.
1 Like
To start, I’m trying to just get a simple /auth API command running. Using the new SAFE API Docs (awesome resource, by the way!) and a few REST tutorials I’ve found, I got this far:
That’s my HTML page. Super simple. Loaded jQuery and tried to invoke the auth command (and yes, alpha launcher is running)
I made that button, and I get this error when I try clicking it?
Any ideas?
This is the part of development that is newest to me. I might look into making a Django / SAFE crossover if I can get my head around all this distributed backend stuff. More of a frontend guy.
From a web page url should be http://api.safenet/auth rather than http://localhost:8100/auth.
@Krishna, I think documentation should really be updated on that matter, because people won’t be able to figure that out.
1 Like
Another thing I forgot: html and javascript should be split in 2 different files. @DavidMtl has a delivered a very helpful demo of this.
1 Like
Oh yeah thanks I keep forgetting that part.
When will that be fixed?
You are using chrome(ium) and looking at a file on the local file system. From within that chrome doesn’t allow you to do XHR requests. You need to serve that file from a HTTP-Server.
The plan is to have this fixed by the beaker browser – which will accept safe://api for you for local development, too. Then all docs will be replaced to only state safe://api, until then localhost is still kinda sufficient.
So I’d need to upload the site to SAFE first?
How are other people doing SAFE web apps at this point?
No, you can also install and run one locally. This is how you usually do web-development. I here use pythons simplehttpserver, node http server or webpack dev server (bundled in create-react-app). But you could also just install XAMPP/Apache HTTPd.
1 Like
Once you upload your web apps using the demo app, you can edit your files directly using the SafeEditor.
That’s actually how I made the SafeEditor, the moment it add the ability to save a file on Safe it was more efficient to use it directly to build itself instead of always uploading through the demo app.
Only works on Chrome and Firefox though.
1 Like
Oh sorry, the other comments didn’t load for me, so this question didn’t make sense in context.
Making it work in SAFE Beaker?
I believe so. I think I just need to add a switch to detect which browser it’s running on so it use the correct API. Just didn’t have time to do it yet.
I would usually do this for my Django sites (nginx/ apache), but that’s because the end result was always going to be a website running from a server.
But this is not the end result here. I’m trying to ultimately make a SAFE web app, so wouldn’t a local server be irrelevant?
Like, if I wanted to make a version that everyone can see and use.
I wouldn’t think a server would be involved here.
Would uploading it to SAFE be a valid option also? In addition to sever-based testing? I just want to know if that will work. I’ll give it a shot now
Ultimately that is yes, for the SAFE web app, the server is irrelevant. But it isn’t for the browser. That is still a client that expects (as the time being) some form of end-point, server-like interface. That is what the launcher and also beaker kinda “emulate” to the browser (though beaker also being the browser) when they map URLs from the HTML the browser requests onto the actual location inside the SAFE network and fetch and store the data.
We don’t provide an extensive developer “browser emulation” setup as of now (though we have plans to provide better tooling for it), so this is left to the developer for now: for your own local development you need to provide the server interface to the browser.
I want to point out, that this particular problem of the server interface is largely caused by browsers having restrictions on what they allow files on the local file system to do – specifically chrome not allowing XHR requests. That is the main reason that you need to “emulate a server” for local development. Not so much any SAFE specific thing. Without their stronger restrictions on local files, there wouldn’t be that need.
Can anyone see what I’m tying to do here, on a higher level, and give a suggestion?
I’m sorry but I feel like I’ve been posting this question for weeks now and still everyone’s struggling with an answer.
I just want to make a 100% as simple as possible web app that people can use, that uses the SAFE API commands (starting with “/auth,” like in this example above).
I’ll try the ideas given here, but I didn’t expect it to be this complex for everyone.
Just a html file and a js file that together, can make that “app authentication” popup thing happen on the launcher.
Thanks again for bearing with me guys!
Did you get a chance to look at the example I gave in the other thread? It’s exactly that, a html and a js file. You can take them and upload them using the demo app and you’ll have a very basic safe web app. Maybe the size of the js file looks daunting but it’s basically just the same function repeated multiple time.
No worries man, we all start somewhere.
2 Likes
Will this stuff is confusing. I still don’t understand it all by any means, and so when others answer questions like these I avidly read the responses in the hope a bit more will stick.
I’m lucky that I have managed to get some things working - in part because that was before they implemented all the CSP headers which have made things even more treacherous! But soon they will be gone, I think, phew 
My advice is to carry on exactly as you are. Have a go, ask for help, try again. You are nearly there I think and once you have something that works you can use it to build the next thing, then the next thing, bit by bit. Good luck!
1 Like
Thanks very much for the advice! Needed that
I thought I was close, and really want that breakthrough of just getting one API working successfully. Then I feel like I can really start going from that.
My PoC dev really seemed to get all of this, and I think he was using safe-js for most of it. I really need to finally get him to walk me through a few things himself.
Great community, as always!
1 Like
Are you thinking that the recent merging of Launcher + Browser might spell the end of the CSP header injections?
Although I understand it’s just guesswork at this point
1 Like
Kind of. My understanding is that switching to SAFE Beaker’s “injected” API (which is based on safe-js) bypasses some of this at least - BUT I will believe it when I see it!
I haven’t found time to try it at all yet though 
I hope to get back to some code this week, but have some bugs to squash in my version of RS.js before I get to Beaker/safe-js.
EDIT: Aaaaand I want to play with Elm (Lang) after Mr Irvine bigged it up on twitter last week.
Also, I just did the suggestions by @tfa , @ben & @DavidMtl & doesn’t work yet
I made a codepen so everyone can see & use my code if you’re trying it yourself.
I put everything into separate files even copied all of this jQuery code into its own local .js file) and uploaded it to SAFE as a server, so it’s live at this safe:// link for testing.
Still really want to get this working