DEV Community

jSON Server with ReactJS

Mario Rodeghiero on July 05, 2018

jSON Server with ReactJS JSON Server helps you to set up a REST API simply and quickly. As they report in the Github repository, you can...
Read full post
Collapse
 
mariorodeghiero profile image
Mario Rodeghiero •

Hi ariana, I have two repositories in my Github:

In development yet: github.com/mariorodeghiero/react-p...

github.com/mariorodeghiero/react-g...

Collapse
 
stefanvrecic profile image
StefanVrecic •

If your client is on 3000 and your API is on 3001, do you not get a 403 error? I'm doing a little job takehome test and I've been provided with the server/API which I'm not allowed to edit, it's using JSON-server.

Whenever I run my client and API, one of them goes on 3002 (or I could specify a different port) - they can't run on the same port, and also trying to access localhost:3002/api returns a 403 error, which I'm assuming is because cors is not enabled. How does yours work?

Collapse
 
q118 profile image
Shelby Anne •

You just need to open another console window and run both commands at the same time. One for 3000 and one for 3001 :)

 
mariorodeghiero profile image
Mario Rodeghiero •

JSON-server is ideal for a development environment, but you can still make a GET and POST.
If you want to use a real-time data server, it would be better to use the firebase. and to perform GET and POST you can use the Https://github.com/axios/axios.

This link has a repository using firebase and axios: github.com/mariorodeghiero/reactjs...

Collapse
 
rapidtables1 profile image
rapidtables •

Thank you Mario for this article, I have been looking similar to that, along the way found nice JSON tool, jsonformatter.org which helped me to formate and validate json data.

Collapse
 
devlist profile image
Devlist •

Thanks for sharing, I used jsonhome.com for a long time, which helps me a lot on json format and validate works with clean UI.

Collapse
 
mariorodeghiero profile image
Mario Rodeghiero •

Thank you for liking this article. interesting this link you reported, thanks for sharing ✌🏼

Collapse
 
ashifmohammad profile image
Ashif Zafar • • Edited

is it still possible to run json-server on node < 10 version?

Collapse
 
mariorodeghiero profile image
Mario Rodeghiero •

I think it works yet, I didn't find any note about it, but you can check more details here: github.com/typicode/json-server
thanks

Collapse
 
vlatdina profile image
vlatdina • • Edited

Thank you for this article.

Can you plz tell me why Im getting this error constantly? :( :(

Unhandled Rejection(TypeError): data.map is not a function

Collapse
 
mariorodeghiero profile image
Mario Rodeghiero • • Edited

Thanks !
Probably because your "data" isn't an array.
If you agree, share your repository link and I can try to help you.

Collapse
 
rashidbik7 profile image
RashidBik7 •

it dose not work for me the error says "Cross-origin request blocked"

Collapse
 
andreshkurko profile image
AndreSkurko •

Hey. Tell me how to configure json-server on firebase so that it is always active?

Collapse
 
mariorodeghiero profile image
Mario Rodeghiero •

Hi CodingDevHub,
You can use only firebase.
In this repository github.com/mariorodeghiero/reactjs..., I have an example with React and firebase.

Collapse
 
johannchopin profile image
johannchopin •

Really nice article 👏 Do you think that the tool Restapify could be a nice way to mock Rest API like json-server do? 😄

Collapse
 
changtraisitinh profile image
Hiep Nguyen •

ii using mockoon for mockup api server