How to use IPFS with pure html and javascript in the browser - javascript

I'm working on a decentralized p2p chat system that runs exclusively in the browser. There literally is no server to speak of. I want to persist message history, and IPFS looks like a good way to do that. However, every tutorial and example I can find requires a node.js server, React or Angular (per this)--none of which will work with what I've built.
I have identified some public IPFS gateways that I could potentially use here. But without a server hosting the IPFS api, and no html/javascript exclusive examples, how can I build this?
One idea I was going to explore was running node with express in the browser, which I've done in the past for other projects not using IPFS. But I would like to avoid that if possible.
Is using IPFS without a server hosting the page impossible at this time? What am I missing/overlooking?

I found my own answer and was able to successfully upload and retrieve a file from IPFS using js-ipfs.
One caveat is the example code in index.html at the GitHub link is referencing a local node.js module.
Simply replace:
<script src="./node_modules/ipfs/dist/index.min.js"></script>
With:
<script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"></script>

Related

How to fetch data as .csv file from client with node.js application

i have written a game in javascript with the p5.js library. Now i want to host the game on a server to conduct a survey on a service like amazon turk. Ideally the clients recieve a URL to the game and play it while in-game actions are tracked and stored in node.js or on the server and exported as a .csv file once they are done playing. After they finish the game the csv. file should be sent automatically to a location that i can then access. I have zero experience in server hosting or similar topics.
So a couple questions arise:
Is a hosting service like Heroku suitable for hosting the game?
Do i need to use node.js to make this happen?
Which of those two would extract the data and store it to a csv? And where is the file stored?
How do i get or access the csv. after?
Any alternative takes to solve the problem?
Thanks alot in advance!
github repository: https://github.com/luuuucaaa/schaeffers-charade
game on github pages: https://luuuucaaa.github.io/schaeffers-charade/
If I were you, I would do it like below:
Host
Since your project is basically a html & JavaScript static contents,
AWS S3's static hosting would be sufficient (Also, the current git hub pages is another option if you just want to host it).
Hosting on node.js environment is also available using webpack serving, but it requires additional works. (but if you require other npm packages to generate .csv file, you need webpack anyway to bundle js file and attach it to html)
Data Storing
Two ways are considerable,
the first is to store it on the filesystem. Generate .csv via JS script within your app, and save it where the app is hosted (if you go with s3, you can access it afterwards, but I'm not sure if it can write objects by script)
The second is to post the data to another API endpoint. (for example building an API Gateway on AWS that triggers Lambda, which stores it on S3)
It's merely an example and I don't know exactly what you want to achieve, but take it into considerations. Good luck. Cool game BTW.

I'm looking to connect a Google VM to a website

I need reflection, vision and documentation on my problem.
I wrote a python script to calculate something from an API and export the result in a CSV file. Then, I use a JavaScript script to display the data from this CSV file on a building website.
I need to have the latest data available for my website, so I opened a VM instance in Google Cloud Platform (Google Compute Engine) and set a Crontab job to run automatically my python script. The calculation is now executed every day and the result is exported to the CSV file, but stored in this VM instance.
Here is my goal: How can I get my CSV file on my website? The CSV is always on the virtual machine and I do not know how to communicate with my JavaScript script to the VM. Do I have to communicate directly with the VM? Do I have to go through another step before (server, API, etc.)?
I cannot find a specific solution for my problem on the internet.
Thanks in advance.
How can I get my CSV file on my website?
By making your python script output the CSV into your website's root folder.
Example, if you're running apache, chances are your root folder is somewhere in /var/www/html/...
If the script is generated from another machine (not the one with your website), then I would host it and make the server hosting your website fetch it via cronjob.
Basically:
If your CSV is generated from the same machine as the website that will use it - simply output it to the website's folder
If your CSV is generated from another machine, make it publicly accessible and have your website's machine cronjob fetch that CSV a few minute after it's generated.
I would suggest you a different approach than using a VM for calculating and storing your CSV.
The idea would be using a Python Cloud Function instead, that will be run by Cloud Scheduler and Pub/Sub.
This function will generate your CSV file, that will be stored on Cloud Storage. Here you can find an example of how to upload an object to Cloud Storage using Python.
Then, you need to give your website the ability to access that CSV file in Cloud Storage when required. As indicated by #guillaumeblaquiere, the exact way will be dependent on where your website is hosted: especially, it will constraint the auth mechanisms that you need to use to download your data. The documentation in GCP provides several examples about this matter.
The documentation of Google Cloud provides an example of the proposed architecture.
I came across an article that, in a certain way, describes the setup I suggested as well.
Please, consider review the costs of the different mentioned products.

Angular - how to test Internet upload speed without backend?

I want to upload file into folder from which my Angular app is served while running on localhost. I'm not able to find any solution without using backend.
For example I just want to upload an image file and that file should copy in specified folder of the project. This should be done only with Angular without using any Backend script or hitting any API endpoint.
Depending on your webhost, you can make your assets-folder accessible via FTP.
Making a FTP-call from javascript (angular is javascript) isn't that difficult. And there are plenty of example and questions about it on the internet (like this)
Why you wouldn't do that:
The credentials for your ftp-connection will be accessible in the compiled javascript-code. With a little bit of effort, everyone can find it.
Each gate you open through the webhosts firewall, is a extra vulnerability. Thats why everybody will recommend you to add an API endpoint for uploading files so that you keep holding the strings of what may be uploaded.
Edit:
As I read your question again and all the sub-answers, I (think) figured out that you are building an native-like app with no back-end, just an angular-single page front-end application. An I can understand why (you can run this on every platform in an application that supports javascript), but the problem you are encountering is only the first of a whole series.
If this is the case, I wouldn't call it uploadingas you would store it locally.
But the good news is that you have localstoragefor your use to store temporary data on the HDD of the client. It isn't a very large space but it is something...
The assets folder is one of the statically served folders of the Angular app. It is located on the server so you can't add files to it without hitting the server (HTTP server, API, or whatever else...).
Even when running your app on localhost, there's a web server under the hood, so it behaves exactly the same than a deployed application, and you can't add files to the assets folder via the Angular app.
I don't know what exactly you want to do with your uploaded files, but:
If you want to use them on client side only, and in one user session, then you can just store the file in a javascript variable and do what you want with it
If you want to share them across users, or across user sessions, then you need to store them on the server, and you can't bypass an API or some HTTP server configuration
Based on your clarification in one of your comments:
I'm trying to develop a small speed test application in which user can upload any file from his system to check upload and download speed.
The only way to avoid having you own backend is to use 3rd party API.
There are some dedicated speed test websites, which also provide API access. E.g.:
https://myspeed.today
http://www.speedtest.net
https://speedof.me/api.html
Some more: https://duckduckgo.com/?q=free+speedtest+api
Note, that many of these APIs are paid services.
Also, I've been able to find this library https://github.com/ddsol/speedtest.net, which might indicate that speedtest.net has some kind of free API tier. But this is up to you to investigate.
This question might also be of help, as it shows using speedtest.net in React Native: Using speedtest.net api with React Native
You can use a third party library such ng-speed-test. For instance here is an Angular library which has an image hosted on a third party server (ie GitHub) to test internet speed.

How do I host/deploy a Node.js app/server on a web hotel?

I can’t seem to find a good answer to this, no matter where I look. All I see are code examples of a basic Node.js application, to get things started.
But after having created all prerequisite code and files like this, how am I supposed to make it work on a web server? How do I upload it and make it run on my domain at my web hotel?
Do I upload the files and run them via an SSH command, or how do I make Node.js run in the first place? I already have a domain and a web hotel account, so services like Heroku are probably out of the question (unless I’ve missed something).
Thank you!

How to set up a FCM app server alongside a website to send push notifications?

I am trying to implement Firebase Cloud Messaging to send push notifications to my app's users. I have found this tutorial by the Firebase team and read the documentation, in particular the one about the server.
It seems fairly simply but I am struggling with where I need to put Node.js code as it is not something I have done before. I currently have a website complete with index.html, style.css, etc. Where should I be putting the JavaScript code in order to make it run? If I simply create a file called Node.js at the root of my web server will that be enough to do the tutorial I linked earlier?
You will need a host that will allow you to run node.js scripts. Node that typical web hosts, such as Firebase Hosting, will not allow you to run node.js scripts. So you'll typically have a separate web site (which you can run almost anywhere) and a node host, which allows you to run node.js scripts on their server.
The blog post you refer to has a link to running node.js on Google Cloud Platform, which is one of the many platform that can run node.js scripts for you.
Since recommending a specific platform is off-topic on StackOverflow, the next best thing is a search like https://www.google.com/webhp?#q=Where+can+I+run+node.js+scripts.

Categories