React project with json server and db.json issue

Question:

Iam working on a project of “Restaurants” and wanted a fake api so i installed json-server in my repl. Now when i ran the “json-server --watch db.json”, and in db.json i have a json data on restaurants and genres, i got a successfull message listing the port links “http//localhost:3000/restaurants” and “http//localhost:3000/genres”, but now when i open this links in my browser iam getting “this site cant be reached” error. how do i acces my db.json data with restaurants and genres? please help me iam struggling with this past 5 days.

Hey, @atikinivris!

Can you please provide a link to the repl? This way it is easier for staff and members of the community to help you!

Also see this guide on how to share your code:

What is written below will only work if you use Replit!

The localhost link will only work on the device on which the local server was started. On Replit, the site server runs on Replit computers, which means that the link that is displayed in your console will work only if it is opened from the Replit server, which is impossible for you.

Instead of following the link that appears in the console, you can click on the New tab button in the upper right corner of the webview window. Then a page with your site will open. It is important to note that after January 1 next year, this link will only work when you are in the editor.

i just want to access my db.json data using endpoints, please tell me some other way if there…

here is my repl link:
https://replit.com/@atikinivris/Platter

Hi @atikinivris !
You repl can open in a new tab (I clicked the button in the Cover Page) and I went to this link:
https://platter.atikinivris.repl.co/
Your repl seems to be working fine.
In the repl, got to the Webview tab and you can see the output from there.
Hope this helps!

I am able to open my repl in the new tab… But what iam asking is… I want to start my json server and watch the db.json file… That runs on http//localhost:5000/restaurants and similarly for generes… I want to access this end points.

To do this, you need to open the repl in a new tab and add /restaurants to the URL of the new tab.

I have to add /restaurants to my repl project link? Or after opening the running repl in the new tab to see the output?

https://replit.com/@atikinivris/Platter/Restaurants

This doesnt work…

https://platter.atikinivris.repl.co/Restaurants
Neither this

What do you see on this page (it is important that your repl is running at this time)?
https://platter.atikinivris.repl.co/restaurants

i see the same output that is shown on
https://platter.atikinivris.repl.co

both
https://platter.atikinivris.repl.co
https://platter.atikinivris.repl.co/Restaurants
show same About page of my project

and yes my repl is running at this time

Your database is located at this link: https://platter.atikinivris.repl.co/db.json , since your database file is called db.json and is located in the root directory.

Yes i get the whole db.json file at the location you mentioned but i want the specific data from db.json sucha as restaurants, genres, image-sources etc… I want a path to this resources

You can split the file db.json into 3 separate ones. For example, in the file restaurants.json will be stored by restaurants part of the shared database.

Or, if you don’t want to split the database, you can use this JavaScript function to get a specific part of the database:

const getDataFromDB = async function(part_name) {
  const data = await fetch('https://platter.atikinivris.repl.co/db.json');
  const json = await data.json();
  return json[part_name];
}

//usage

getDataFromDB("restaurants")
  .then(data => console.log(data)) // outputs restaurants from your database to the console

getDataFromDB("image-sources")
  .then(data => console.log(data)) // outputs image-sources from your database to the console

Will i be able to do a post request to the separate files?.. Will the files will be written if i do post request?
Becauss the main issue is with the post request only… I created a normal .json file without json server and tried post request on it using axios, but the file was not getting written with the new data… That was the main problem