Full React Tutorial #16 - Using JSON Server

[@hamzahmd_]

Honestly, I really like his react tutorials not only because of his British accent but he also explained them quite remarkably.

[@Banjer]

true..but I guess he has more an Irish accent than British....

[@kashmirtechtv2948]

@@Banjer may be

[@peekaboosteam]

@@Banjer It's definitely English. I'd guess Manchester-ish, perhaps Preston.

[@phucnguyen0110]

@@peekaboosteam I remember he mentioned in the past that he's from Manchester. Or maybe the information was shown on his blog or something similar in one of his tutorial series, idk.

[@petrostragoudaras]

it's a bit noice innit? :P

[@fethidogan89]

{ "blogs":[ { "title":"My First Blog", "body":"Why do we use it? It is a long established fact that a reader will be distracted ", "author":"mario", "id":1 }, { "title":"Opening Party", "body":"Why do we use it? It is a long established fact that a reader will be distracted ", "author":"yoshi", "id":2 } ] }

[@raviel_0422]

thank you, it makes my tutorial experience easier.

[@dusanvulic7275]

@@raviel_0422 data incomplete

[@intensiveadvancedmath5281]

Thank you, just specially entered comment section for that

[@darksder2944]

ty

[@ajmainmahtab981]

thanks bro

[@erkkasep]

I have learned more in this 3 hours course than in 30+ hours of Udemy courses. You are amazing.

[@NetNinja]

That's awesome to hear, thank you! :)

[@juliigameplays]

Same I agree. I learned much better with these videos rather than Udemy's

[@WaddupBoi]

These bite size tutorials are so much better than slogging through 2+ hour ones.

[@shuumishuum]

this

[@donnazukowski]

Shaun is the best teacher period. I've been trying to learn React and spent quite a few $$$ but with this one, it's all making sense. BTW, as of 2/11/2022, I just ran the JSON Server npx command in a new terminal and it worked like a charm.

[@Wangaruro]

I second you on this!!! He has a unique teaching style that makes it easy to understand.

[@mmmisaaagh]

Halfway through and I have to say: you are a phenomenal educator. You are doing a great job explaining everything. After every short session I have more confidence in what I just learned. Thank you. Great job and keep up the good work!

[@paulfg1967]

I am an 'older' new to coding just approaching the end of a 3 month bootcamp. I have learnt more from the Full Modern React Tutorial than anything on the bootcamp. Well done Net Ninja, you are a very talented teacher and thanks for putting these out there, and yeah as a Prestonian (living in Manchester) your Manchester accent helps!

[@sofiatruta2]

I am doing a coding bootcamp and I'd be lost without your tutorials! you explain everything so well that it helps me truly understand what is going, I watch them after class to bring everything together - thank you!

[@iltanoia6865]

Modern Redux should be the next playlist! best teacher on youtube along with traversy media ahha

[@erickbroos7233]

npx json-server --watch data/db.json --port 8000

[@alcezeri]

sudo npm i json-server -g use without npx :)

[@annisaautami]

@@alcezeri thank you!

[@alcezeri]

@@annisaautami We give free javascript course every weekend on saturday-sunday

[@Mr___Khan1]

Jazak Allah Brother ♥️☝🏻

[@satyamsaurabh8583]

The Best Ever Instructor on KZbin🙂

[@davidho1258]

I've been using json server as part of my workflow since the series you did 2 months ago. thx net ninja

[@annisaautami]

for anyone experiencing an error said "could not install from [your computer name] as it does not contain a package.json file" when run the npx json-server --watch data/db.json --port 8000 command, please run this command first "npm i json-server -g" it works for me.

[@jaya3688]

Thank you!

[@aak_581]

I know this is old but thank you sm

[@TaroWalnut]

Thanks!

[@batu4605]

There is NO course well explained form React js but i saw your courses im surprized. You have unique teaching style and explaining little things for understand and combine all theese things. Thanks ❤️

[@NetNinja]

Wow, thanks Batu :) that means a lot

[@batu4605]

@@NetNinja Can you make Pinia state managment videos for VUE JS if possible?

[@ucthanhle7029]

If any one have problem when running npx json-server --watch data/db.json --port 8000 and you are using powershell on terminal. (It didn't run like me) Try to switch to Command Prompt instead of powershell on terminal. Hope this will help :"3 Thank Net Nija for this tutorial

[@mohitgangwani6054]

It works.Thanks for suggestion

[@GreenPear-mz4dl]

Thanks a lot friend, it works

[@islamgoher]

If anyone may face this Error in the terminal """"" Oops, data/db.json doesn't seem to exist. Creating data/db.json with some default data """". the solution is to 'Go to the folder where your db.json file resides. then run the command json-server --watch db.json in terminal and it would work with you.

[@pauloferreira4040]

I got a similar error, but I realized that the folder data was not created in the right spot (directly under the DOJO-BLOG), but rather in the src directory. So my solution was just to drag and drop the folder data at the very bottom of the project explorer area (the left area that displays all sort of project files) and by moving data to the right location, the command shown in the video works.

[@rtubiras644]

Thank you so much! ☺️☺️☺️☺️

[@firstname-nq7qc]

thx!

[@minou00701]

the net ninja is definitemy the best of ninjas , kudos mate :)

[@sinhaneha1987]

Thank you for showing a perfect way of running JSON-server with my existing React app for testing purposes. This was a wonderful solution, not discussed in tutorial/blogs I had seen soo far.

[@HaiderAli-oi5fm]

This json server really saves my neck from creating database. Its really a good thing you have taught me to play around with the app. 3:29 I marked the time for future reference. Thank you Shaun!

[@kashmirtechtv2948]

How have you marked the time?

[@HaiderAli-oi5fm]

​@@kashmirtechtv2948 Just wrote the time to mark it just like we drop the pin on the map to mark the location.

[@kashmirtechtv2948]

Si a g

[@Zephyr-tg9hu]

If anyone else was having trouble running json-server try "json-server --watch data/db.json --port 8000" and omit the npx part.

[@mickelelkhoury2378]

Shaun you are a legend!!

[@razaj]

Hi I'm having a problem, when trying to start the server with "npx json -server watch data/db.json --port 8000", it returns " json: error : unkown option '-s' ". I'm not sure how to fix that or work around it

[@asimssheikh]

Best explanation of React I have seen on youtube.

[@neehargadam1613]

The Best Teacher on the internet, Thank you Shaun

[@bewareofsarcasm775]

can we host the json server on the internet using netlify

[@Amauriking]

If anyone wants just a json sample { "blogs": [ { "title": "My first blog!", "body" : "lorem ipsum", "author": "mario", "id": 1 }, { "title": "My second blog!", "body" : "lorem ipsum", "author": "yoshi", "id": 2 } ] }

[@loneliestday0289]

thank you bro

[@juliosamaniego6585]

if anyone is having trouble with CORS here is the solution, run the json server like this: npx json-server --watch data/db.json --port 8000 --no-cors

[@pjTechLand]

this tutorial is great because every videos is short and totaly useful tnx :)

[@NetNinja]

Thanks :) that means a lot

[@mwebazenicholas7075]

Thanks for the great explanations your teaching is on another level. I have an inquiry, how can I deploy a JSON server file so that data can be accessed globally from anywhere other than from the local server? I will be glad to have your positive feedback

[@OzzTheWizzard]

do you have videos on how to fetch data from backend api through react then post those on a website, or using wordpress?

[@dever312]

Where do front-end developers hold the data? I know things such mockAPI, Fire Base. But what is the regular one devs actually use? Can i use just json request (localhost) then deploy it?

[@ghwhg341]

Just a dumb question. Both GET and DELETE requests use the same endpoint /blogs/{id}, how does the server know which is the action I intended to do?

[@charlesloehle7998]

If you are having trouble making json server work, another thing i did that worked was re-run yarn start

[@Soap_js]

Great Tutorial but i think you did not mention that we need to have the json-server thing installed before we can ues the npx json-server command do npm install -g json-server to install it and then run the command

[@hamzaidrees8703]

Thank you

[@ashurawat850]

Thank you , I was struggling with this how to use this tutorial command

[@abdullahyusuf1790]

God bless. you just save my a$$

[@entupropiocanvas]

You never disappoint, man.

[@amjadaliafridi1023]

favorite teacher

[@NetNinja]

Thanks Amjad!

[@renukamore677]

I must write everytime 'npc json-server --watch db.json --port 8000; to run the web-app, then I am not able to deploy it, What Shall I do?

[@vallydon1788]

Good tutorial. Please I am getting error when installing the Json server. How can I correct it, please.

[@sojumoscow]

I have an error when im doing json thing. I put exactly what you code but it gives me error. npm ERR! code ENOLOCAL etc etc

[@syedabdullah6815]

Amazing Explanation! but can I do this JSON database thing in Next.js? please help. Thankyou

[@jayashriborse8783]

Thank you very much! Great tutorial! I already know basic react. But from this series, I learned lot of new things.

[@NetNinja]

Glad it was helpful! :) thanks Jayashri

[@Vermillion999-y2n]

Pls why is that json server can't display imagies.. I'm having issues on that,i need help

[@JiteshGosar]

Thank you for the fantastic tutorial. Is there any video showing how to connect react with SQLite database? Since I have a ".db" file, I need to display its contents using react.

[@KtNizin]

npx: installed 1 in 4.974s json: error: unknown option "--watch" why is it showing like this?

[@leonardobruksch8603]

got the same error. i am on a mac an was using the app "notes" to copy the command to the terminal. turns out the dashes were being converter to a dif character. try typing directly in the terminal :) worked for me

[@maureenifeoma3969]

Your teachings are very easy to understand and I want to say very big thank you for that. But I have errors trying to use the json server, it's giving a lot of errors, I would like some help with it, Thank you and I will be waiting

[@caanha]

Really really nice teaching you present. But I wish you would include the DB (SQLite) part since it so common. But Thank you for making sense to React!

[@kashmirtechtv2948]

I didn't get about the 2 options you have told about installing Json pakage. Can someone guide?

[@sakibhasan2592]

hey shaun? do you have any plan for FullStack dev

[@sakibhasan2592]

@@raslanismail9691 yeah but I am struggling to start my MERN scack project...:-)

[@Tejas-e9d]

I keep on getting a fetch error and am not able to fetch the data from the JSON file. I have retried everything multiple times.

[@sangdilbiswal30]

how can this amazing content be free. Hats off to you man!

[@NetNinja]

Thanks

[@thebeerministry]

I'm getting thin error😞😞 After running 3:18 npx thingy Error: EPREM: operation not permitted, mkdir 'C\usere\username' Command not found: json-server Edit : 😁😁😁😁 It worked, sm1 at stack.o said run cmd w adminstrator Sooo 🍉✨✨!!

[@born_to_matter2140]

how did it work can you pls explain

[@gowrisankarpokuri]

@@born_to_matter2140 This error comes when your username has a spaces. For this one you would have to replace the username on the path for npm config that has spaces with the alternative username windows generates which you can get by using the cmd DIR /X if you are in the location. "c:\Users\". After getting the alternative name you have to run this command. npm config set cache "C:\Users\\AppData\Roaming pm-cache" --global

[@afewthoughts7755]

I'm curious if you can do Solidity or any web3 related content tutorials(you are really a good teacher)

[@ibukunagotola3495]

Thank you Mr Net Ninja, please how can I use firebase database instead of local json server.

[@davidbister2684]

if u have problem with this method npx ..... solution is npm install -g json-server, json-server --watch data/db.json --port 8000

[@alltoall]

Amazing Explanation Thanks, Sir!!!

[@NetNinja]

No probs :) thanks

[@abdulkadirguven1173]

I appreciate a lot your tutorials. Thanks a lot.

[@mithulan.s5984]

Sir Creating datebase and rest api from stratch. If you have these videos please do share.

[@premprem4095]

Finally I found a solution for my error here.

[@taofiqcodes4303]

Hi Shaun and everyone here, please how can I make my dbjson file work on other devices apart from my PC

[@oluwatoyinj8991]

How do I host this app in codesandbox? I get the "failed to fetch" error after hosting it. How do I fix this error please

[@jengzarate9087]

im getting an error : enoent : no such file or directory pls help

[@realtorBG]

verygood course....is it possible to make React + Ant Design please

[@geraldinerios7068]

thank you, this video help me to create an api fake with json server, i have an error and that was from the terminal, i didn't know that i need open an individual terminal in my vs code

[@jotasenator]

Good evening everybody. Is there a 'how' of nesting data in this json server data.?

[@chiranjeevichowdary5948]

Is this also a way of storing data in local storage

[@PhongVNguyen123]

for my future ref: npx json-server --watch data/db.json --port 8000

[@lostbear1600]

hi, when i tried to run npm i json-server --watch data/db.json etc. etc. on vscode terminal, a small window pops out asking me to connect to github (sth about connecting github and vscode...), not sure why, is this happening to anyone?

[@sharriceowens913]

my terminal has 1:bash instead of node is that alright?

[@MaksymMinenko]

Actually, json-server has an option: --delay ... , so there's little point in using setTimeout.

[@henry3862]

SyntaxError: The requested module 'node:util' does not provide an export named 'parseArgs'

[@hoanglongpham5907]

hello Shaun, can you make a video for Route ??

[@NetNinja]

That will come later in the series :)

[@mymarginalia8349]

Is there a way to have localhost:8000 show the default homepage? As it is, it would try to render the react public folder, but is there a way to tell it to ignore that?

[@KhaledSAB]

Great tutorials ...thank you so much

[@dev504]

this shows when I try to use command When I try to run the command this shows Error: EPERM: operation not permitted, mkdir 'C:\Users' command not found: json-server

[@ChandanKumar-of1je]

Request you to make a project series using Nodejs* & React* , very next or later..

[@tarekghosn3648]

you my man. are awesome.

[@xenoxel]

I am am getting the error, uncaught TypeError: blogs.map is not a function. Does anybody know how to solve this error i have tried to run the code from github but still get he same error. I am using vs code.

[@qwertmom]

My terminal doesn't show any resources?

[@timm2233]

go into your terminal and run: npm install -g json-server. after that you can run the npx command

[@MahmoudReyad]

@@timm2233 thanks it works.

[@born_to_matter2140]

@@timm2233 thanks man it worked

[@patshalaaa]

you are awesome 💟

[@naps7441]

What do I do if I want to edit a blog? Can anyone help me regarding this?

[@54321conor]

I got pretty lost here, It's my first time ever hearing about json, along with ports, etc. and my first time using the terminal and node.js was at tutorial 1 of this series 😅 Is it normal to be this lost or did anyone else feel the same? Again, another noob statement, but if anyone can recommend where I can learn more about the terminal and everything, I would really appreciate it. I will watch Net Ninjas tutorial on Json, but I feel the terminal is important to understand first before I look at json, no?

[@adeleke5140]

Hey Courage, how are you know with react? The first time I went through React, it was also super confusing. But as you learn more JS and write more react, you get used to it. don't feel bad if it is taking time for you to get everything. For learning about the terminal, are you on windows or mac? this is a good place to start from kzbin.info/www/bejne/eYeQp5iklNerntk&ab_channel=WebDevSimplified

[@kashmirtechtv2948]

Shaun bro. Update the error command for the newbies. Thanks

[@roshdyessam3480]

Amazing

[@TaniaLacognata-z9m]

Terrell Plains

[@erickbroos7233]

gracias ! thank nice video

[@ridl27]

ty.

[@Parendinate]

Just imagine when u are a kid and ur math techer is him...

[@mehmetsayn573]

adamim supersin:)

[@Mahmudulhasan-ts5hm]

thanks

[@candle-likeghost9523]

the db.json :

[@candle-likeghost9523]

{ "blogs": [ { "title": "My First Blog", "body": "Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Where can I get some? There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.", "author": "mario", "id": 1 }, { "title": "Opening Party!", "body": "Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from \"de Finibus Bonorum et Malorum\" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Where can I get some? There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.", "author": "yoshi", "id": 2 } ] }

[@ricardoreis4172]

If you have problem with json-serve follow these steps: first install json-server globally: npm install -g json-server after use the comand: npx json-server --watch data/db.json --port 8000 problem fixed

[@nikhargangwar]

thanks it worked for me!!

[@kashafkhan6999]

Thank you so much dude :)

[@ChristieCara-g1m]

Benton Crossing

[@noobyxd]

After npx json-server --watch data/db.json --port 8000 installation, I'm not getting the link under the Resources, but it shows the link under Home. Anyone having the same issue?

[@rachitmittal1131]

Yeah i have the same issue!!

[@rachitmittal1131]

I solved it by restarting the vs code and then tried again and it worked!!

[@noobyxd]

@@rachitmittal1131 I’ll try that. Thanks so much for the response! 🙂

[@LandrieMarManait]

anyone face this error No endpoints found, try adding some data to data/db.json?

[@JJ-lx7do]

You need to add the code he did in the video to the data/db.json file or it will show this error code

[@dylancorr8054]

I don't have a Resources showing up only home why is this can anyone help?:)

[@calebowatah5775]

ensure you've saved the db.json file... run----- npm install -g json-server, json-server --watch data/db.json --port 8000

[@dipanshukumrawal4880]

@@calebowatah5775 thankyou for saving my time

[@kelvinamoaba9634]

I thought I was the first to watch😂

[@dequentinmiller9086]

Bro is it me or does everyone sound so much clearer when they have a british accent? I try to look at indian tutorials and they're great don't get me wrong, its just that their accent is like nails to a fucking chalk board.

[@Se.mu01]

🙏

[@victorpelumi9498]

Hey net ninja....been a great journey up to this point.. anytime I try to run the next Jason.server implementation it pops out an error message. I don't know what I doing wrong..I would appreciate if you could help out. Thanks

[@victorpelumi9498]

I have gotten it...thanks Net ninja

[@sully-kun3402]

Question, my json fake server wont work unless i turned on my Internet, is that by design? or maybe I've done something wrong because mr.Shaun's fake json server seems to not be needing a connection to start

[@codewithfarhad8594]

I might be wrong but when you do npx json-server you are essentially making connection to json-server package which is hosted on npm LIVE without having to install it locally in your dev environment. So, if you do not have internet turned on, NPX can not fetch the json-server package from npm and so it has no idea how to watch the json file or do any of the json-server stuff.