Fetch FIDO, fetch!
The struggle is real
And this article might not be what you had expected.
Why even bother?
Today I wanted to clean up some stuff on the webserver space I rent. Too many folders spread out over 3 domains and some subdomain. Finally I had found a couple of solutions to some site issues. How to find out if an external server is offline? That's what I need for an online radiostation. And I had found something that worked, using PHP. It is a programming language that functions on the webserver. For this particular solution it would be a waste of time if the rest of the program would have to wait for a time out. Normally, 1 second would be enough. Just to be safe I decided to go for 2. Such joy, it did what it had to do. Unfortunately I deleted the file, while cleaning up the server, straight into the void. Because I bypassed the bin.
Think I will be able to recall how I actually made it happen. Luckily this was a thing on the side. As I actually wanted to create a container system for an experimental thing on the Arweave blockchain Permaweb. Publishing a webpage on there was quite simple. Pay once, serve it as long as Arweave exists, not bad. But this address thing, I would not even want to try and remember it, let alone tell you the address in person. That is a downside to the way Arweave functions. (But I still do prefer it over IPFS.) And I thought about a way to actually serve these Arweave dAppsites and webpages through a usual domain, or subdomain.
JavaScript [JS] was an option and I would rather not use PHP, as I wanted to keep it as lightweight as possible. PHP is done at the server side, JS runs in your browser (clientside). And why would anyone use the Permaweb when it would still need a powerful webserver? Just serving a tiny webpage, that hides the complex Arweave address, would be all that would be needed. JavaScript has a function that is known as fetch(). And that might actually do the trick. The name I came up with for this little program was FIDO, or: Fit In Document Object. In case you did not know, I'm a Graphical Designer by profession. Programming is just something that fits in with my Geeky nature. And I really can get a nifty migraine when I see example programming code that contains funny farm stuff like: _feckIt(.then => <- ^:: {object<=.!getItYet})_.
Search and though shall find
What the bleeding bleep happened to normal Javascript...!? Okay for C(++) I do get it, it has to be as cryptical as possible, but for JS too? Come on! Anyhow, somehow I managed to decrypt it and I was finally able to use fetch() in a simple Javascript program. All it does is fetch the webpage from the Permaweb and put it inside of the current page. Which has a readable address. And when you look at the page source then it has no Permaweb page in there. Still it works, well sort of. Before I FIDO it, I should remove the html tags from the Permaweb data. But it is a proof of concept and as such it did the job. Also added some JS confirm popup window. If you cancel that one you will go to the actual webpage on the Arweave Blockchain Permaweb. Even though it seems to function, I have my doubts if it could do the job for a complete dApp. If you're interested you can have a look at the JS code which I added in.
When I was fiddling about with the JavaScript I thought that I might need to use PHP. And I had a CURL based version, but I had another idea. More like a FIDO kind of thing. Even though technically the CURL webpage fetching was doing what it should. There was another way, using PHP, maybe even more effective and lightweight? The 'file_get_content()' function seemed to be well suited for the job. And I could replace an HTML remark with some JavaScript before the Fit In Document Object [FIDO] thing. And to my surprise it actually worked! Pitty about throwing away 1 solution, but I still have two different ones at the end of the day. And do I really want to move ahead with this? To be honest, I'm a kind of undecided right now. So far it has been a real pain in the neck. But hey, on the other hand, things can only get better. The PHP you can find underneath the JS part, if you're interested.
Have a great one!
Not a real dApp yet, but the concept proved to work.
Image CC0 licensed.
PS You are free to use the code, but at your own risk.
JS FIDO
<!DOCTYPE html>
<html id="fido" name="fido">
<head>
<title>dApp dot LilyPictures dot NodeLess / FIDO dot html</title>
</head>
<body>
<script>
fidoGetText("https://gm4ofsz7zrgluqwryfknr6pdanlf6bn33mtahjeodb5eu4mojzja.arweave.net/Mzjiyz_MTLpC0cFU2PnjA1ZfBbvbJgOkjhh6SnGOTlI");
async function fidoGetText(file) {
let dataObject = await fetch(file);
let dataText = await dataObject.text();
document.getElementById("fido").innerHTML = dataText;
}
vArweave="https://gm4ofsz7zrgluqwryfknr6pdanlf6bn33mtahjeodb5eu4mojzja.arweave.net/Mzjiyz_MTLpC0cFU2PnjA1ZfBbvbJgOkjhh6SnGOTlI#version";
choice=confirm("This is a subdomain container for a dApp\n Do you want to stay here {click OK},\n or go to the Permaweb version {click Cancel}?\n Use [CTRL]+[D] to add Arweave site to favorites.");
if (!choice){
window.location = vArweave;
}
</script>
(html comment removed: FIDO = Fit In Object Document )
</body>
</html>
PHP FIDO
<?php
$fidoData = file_get_contents('https://gm4ofsz7zrgluqwryfknr6pdanlf6bn33mtahjeodb5eu4mojzja.arweave.net/Mzjiyz_MTLpC0cFU2PnjA1ZfBbvbJgOkjhh6SnGOTlI');
if ($fidoData){
$findInData = "(html comment removed: Stored on the Arweave Permaweb )";
// Maybe just put a LINK, instead of this script...
$replaceInData = "<script>varweave='https://gm4ofsz7zrgluqwryfknr6pdanlf6bn33mtahjeodb5eu4mojzja.arweave.net/Mzjiyz_MTLpC0cFU2PnjA1ZfBbvbJgOkjhh6SnGOTlI';choice=confirm('This is a subdomain container for a dApp. Do you want to stay here {click OK}, or go to the Permaweb version {click Cancel}. Use [CTRL]+[D] to add Arweave site to favorites.');if (!choice){window.location=varweave;}</script>";
$outputPage = str_replace($findInData,$replaceInData,$fidoData);
echo $outputPage;
}else{
echo "Trouble...";
// Redirect?
}
?>
JS FIDO is at:
https://dapp.lilypictures.nl/fido.html
PHP FIDO is at:
Edit: text changed.
Note: the html comment tag was removed from the source code text. Which is actually key for the find and replace part...
For the record:
Added spaces so you can see how it looks:
< ! - - FIDO = Fit In Object Document - - >