Last updated on 22 Mar. 2024
Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html .
I am simply curious about whether for tutorial/learning kind of non-critical projects like learning React projects, whether we can switch from localhost json-server to an online json-server which allows us to do CRUD operations and persist the data. In the React tutorial the author/teacher drops the json-server related api data and code tutorial lesson (blog) when the tutorial gets to deploying the app. online (netlify or github pages) and switches to a Grocery List app. which uses local storage to store the data. If I recall correctly, he says that we cannot use json-server when we deploy online. That triggered this curiousity about knowing if there are online json-servers we can use which persist our data (different from fake json-servers which may not persist our data).
I have not invested enough time to explore this well. But I did do some browsing on it. Given below is some info. I gathered.
Easiest way to store JSON files online?, https://stackoverflow.com/questions/61401657/easiest-way-to-store-json-files-online ... From the post, "I didn't want to use MongoDB, Firebase, or anything similar since those are pretty overkill for the data that I want to store. What would be the easiest way to persist data in this case?" This is the query I had and so the responses here are interesting to me. But there seems to be no good solution among the responses and the advice seems to be to go for a database (like MongoDB).
Interesting option but is a trial offer (10,000 API requests) after which it seems to require payment, https://jsonbin.io/ "JSONBin.io provides a simple REST interface to store & retrieve your JSON data from the cloud."
This seems to be a free service: https://www.npoint.io/ - "Set up a lightweight JSON endpoint in seconds, then add a schema to edit your data safely at any time".
Another such service: https://extendsclass.com/json-storage.html .
I am quite sure now that even if such online JSON servers with persistent CRUD (or CUD to be more precise) operations are available they would have some issues and so should not be considered for any real world app. However, I do want to experiment a little with the above and other related stuff just for my knowledge. I mean, if I need to deploy a simple test app, I repeat test app, online, do I need to create a backend server (using Express or something similar) and connect it to a real database like MongoDB? I am not sure that I must always do that and not go for super-simple solutions like an online JSON server that persists CRUD ops. data (or CUD ops to be more precise).
----
21 Feb. 2024 Update:
npoint.io works for get requests only even though first look at the site gave the impression that it works for all CRUD APIs. Later I saw this in its website: https://www.npoint.io/ - "n:point is a one-way JSON store: edit online, fetch via GET requests over API. Editing data over the API via POST requests is in private beta. Even once released, n:point is not meant to be a full backend for your app."
https://extendsclass.com/json-storage.html gives an error when trying to access the created bin:
{"status": 1, "message": "you have exceeded the call limit (10000)"}
Note that I got such a message (messages) right from the outset. I think I totally made only a few attempts and so less than 10 requests for sure.
I think it is clear the above free online JSON bins are unreliable to be used for CRUD ops.
https://jsonbin.io/ may be worth a deeper look though it is not a free service but has a trial period. I tried out its "Quick Start". I created a single post json file bin which is valid only for 24 hours and upto 100 reads only. It gave an access url: https://api.jsonbin.io/v3/qs/65d456ffdc74654018a733cd.
Accessing the url in the browser gave this output:
// 20240220131030
// https://api.jsonbin.io/v3/qs/65d456ffdc74654018a733cd
{
"id": "65d456ffdc74654018a733cd",
"record": {
"Posts": [
{
"id": 1,
"datetime": "2024-01-28T08:49:12.133Z",
"title": "Test Post 1 title",
"body": "Test Post 1 body"
}
]
},
"metadata": {
"name": "onepostdb.json",
"readCountRemaining": 98,
"timeToExpire": 86288,
"createdAt": "2024-02-20T07:38:39.134Z"
}
}
------
I don't want the extra stuff it added to Posts. As per its documentation https://jsonbin.io/api-reference/bins/read , "/b/<BIN_ID>?meta=false" is an example of how to disable the meta data. But the quick start I tried gives a /qs instead of /b. Anyway I tried https://api.jsonbin.io/v3/qs/65d456ffdc74654018a733cd?meta=false . It continued to give the metadata. Perhaps this meta query string parameter works only for bins and not qs (quickstart) stuff. Creating a bin seems to need an account. So created a free account with my regular email id. I have free 10000 requests now.
Created a bin with id: 65d459d71f5677401f31c0ff with same data as above (single post).
Tried https://api.jsonbin.io/v3/b/65d459d71f5677401f31c0ff .. Got the response:
// 20240220132435
// https://api.jsonbin.io/v3/b/65d459d71f5677401f31c0ff
{
"message": "You need to pass X-Master-Key or X-Access-Key in the header to read a private bin"
}
-----
Couldn't figure out how to make the bin public.
Created a new bin and saw that I could change default private to public at bin creation time. Also settings let me name the bin as OnePostPublic. Its id: 65d45b93266cfc3fde8cb08e
Tried https://api.jsonbin.io/v3/b/65d45b93266cfc3fde8cb08e . Its response:
// 20240220133005
// https://api.jsonbin.io/v3/b/65d45b93266cfc3fde8cb08e
{
"record": {
"Posts": [
{
"id": 1,
"datetime": "2024-01-28T08:49:12.133Z",
"title": "Test Post 1 title",
"body": "Test Post 1 body"
}
]
},
"metadata": {
"id": "65d45b93266cfc3fde8cb08e",
"private": false,
"createdAt": "2024-02-20T07:58:11.439Z",
"name": "OnePostPublic"
}
}
----
Good. Now tried https://api.jsonbin.io/v3/b/65d45b93266cfc3fde8cb08e?meta=false ... Its response:
// 20240220133122
// https://api.jsonbin.io/v3/b/65d45b93266cfc3fde8cb08e?meta=false
{
"Posts": [
{
"id": 1,
"datetime": "2024-01-28T08:49:12.133Z",
"title": "Test Post 1 title",
"body": "Test Post 1 body"
}
]
}
---------
Great!
But https://api.jsonbin.io/v3/b/65d45b93266cfc3fde8cb08e/Posts?meta=false gave the response:
// 20240220133229
// https://api.jsonbin.io/v3/b/65d45b93266cfc3fde8cb08e/Posts?meta=false
{
"message": "Bin version is invalid"
}
---------
Hmm. I think I got it. The CRUD operations it provides are operations related to entire bin and not individual json entries within it (like what JSON-server provides). Its FAQ,
https://jsonbin.io/support/tags/bins-api#questions has this question: "How do I Create and Store a JSON record"?. Its answer is about creating bins (entire JSON file) rather than individual entries within the bin.
If my above understanding is right, then this service may have to be used like one uses Local Storage to store JSON files. Every time posts changes, the whole array of posts has to be sent to jsonbin.io to update the entire bin's contents. In other words, it is like an online JSON file storage service. An alternative is to load data from the JSON bin at app startup and save at exit, and also provide option to user to save in between (as sometimes the app exit related events may not fire or complete properly like say when the Internet connection breaks).
But if one uses it in such a way, can one not consider some simple free file storage service instead of jsonbin.io?
...
Wrote a test HTML + JS file (
jsonbin.html) to test out programmatic copying of Local Storage (LS) posts item/variable (or similar JSON item/variable) to JSON BIN io and the reverse. Initially I used sample code provided in jsonbin.io for these requests (which use JS XMLHttpRequest for JS). Later I changed it to use axios (with async await).
Once I figured out the code, the apis worked as expected for most cases. I got 403 error when I tried to update a bin with posts having one very large post. ERROR REFERENCE in
https://jsonbin.io/api-reference/bins/update states, "Free users cannot create a record over 100kb. Upgrade to Pro plan https://jsonbin.io/pricing to create records upto 1mb". But for other small set of small sized posts, the entire posts array got written to jsonbin.io and got read from jsonbin.io correctly, it seems, based on my limited testing.
So jsonbin.io is more reliable than the earlier online json server options I tried but the big issue is that one has to copy the whole posts array and there is no facility to individually add, update and delete posts (single entries). So I don't think it will be so useful for me. However, I am glad that I figured out how to use it and understand its limitations better.
Comments
Post a Comment