DEV Community

Cover image for Deploying Create-React-App with Json-Server as backend to Github

Deploying Create-React-App with Json-Server as backend to Github

Nikita Guliaev🧩 on August 18, 2020

If you are reading this article I’m assuming you already have the following done: Create a project using Create-React-App; You are using Json-Ser...
Collapse
 
dannymousa profile image
Danny-Mousa

Thanks for this helpful article, i have one question please:
If my json-server has not only the db.json, but an images folder in the public folder, what should i do to upload the whole json-server content in this case?

Collapse
 
nikita_guliaev profile image
Nikita Guliaev🧩 • Edited

Hey Danny, as an option you could include the links to your images in the db.json file like shown on the image below.

dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
isaackomeza profile image
Isaac Komezusenge

Same question here

Collapse
 
codigoisaac profile image
Isaac Muniz

I've tried this and I can't update the values dynamically. Once I set a value to true it can't be set to false again... And once I delete some entry, all the entries I added before are also deleted. This makes this application suited for internal testing but it's not cool to publish it to people to use, as they'll think it's full of bugs.

I'll try another host like heroku.

Collapse
 
nikita_guliaev profile image
Nikita Guliaev🧩

Absolutely right, Isaac. This is for quick prototyping only and can't be used in production.

Collapse
 
codigoisaac profile image
Isaac Muniz • Edited

"Go to your app’s repo and open Settings. In the GitHub Pages section select gh-pages branch from the drop-down menu."

I don't see the 'gh-pages' branch. I have followed all the previous steps. What can be wrong, please??

Collapse
 
nikita_guliaev profile image
Nikita Guliaev🧩

Hey Isaac, is your repo private by any chance?

Collapse
 
codigoisaac profile image
Isaac Muniz

Hey Nikita, thanks for the answer! No, my repo is not private.
Actually I switched from using json-server to using localStorage yesterday.
But yet the deploy to gh-pages doesn't work, when I visit the address I see the project's readme instead.
If you have another guess of what might be the problem, I'll appreciate.
Thanks again :)

Thread Thread
 
codigoisaac profile image
Isaac Muniz
Collapse
 
fbolaji profile image
Francis.B • Edited

Thanks for this write up on making json-server db.json access on repo. Meanwhile, your repo on GITHub must be in public mode because if private then you can't deploy to the gh-pages and as well as no access to your db.json. So people should keep that in mind.

Collapse
 
jolomitee profile image
Taiwo Jolomi

Would it also work if im deploying a private repo to vercel? can the public repo containing the db still be accessed? and also, do i need to change the base urls? because json-server provides a localhost:3000/routes, can they still be accessed outside the local server?

Collapse
 
loaizamateo profile image
Mateo Loaiza Rios

Hello,

The react app aplication and db.json have separate repositories?

Thanks.

Collapse
 
pravunathsingh profile image
Pravunath Singh

Hey, I have the same question, if you have figured this out could you provide me insights regarding this

Collapse
 
nikita_guliaev profile image
Nikita Guliaev🧩

Hi Mateo, yes, the db.json needs to have a separate repo.

Collapse
 
isaackomeza profile image
Isaac Komezusenge

Thanks, I've followed all steps and all is working fine but image are not displaying, means I can get images from json-server
Can anyone plz help me????????

Collapse
 
artemkolinko profile image
Artem Kolinko

Hi, thanks for article!

I've made a request to my-json-server.typicode.com// from my app by fetch() and get CORS error.

How I can resolve it?

Collapse
 
fbolaji profile image
Francis.B

Set your fetch() headers
'Access-Control-Allow-Origin': '*',
Accept: 'application/json;odata.metadata=full',
'Content-Type': 'application/json',

Collapse
 
nikita_guliaev profile image
Nikita Guliaev🧩

Hi Artem, you can do it by setting headers. This article should help: medium.com/@dtkatz/3-ways-to-fix-t...

Collapse
 
lukaskairys profile image
lukaskairys

I get the following error when trying to access my server repo from my-json-server:
maxContentLength size of 10000 exceeded.
I have about 4000 lines in json file. Is this not gonna work?

Collapse
 
nikita_guliaev profile image
Nikita Guliaev🧩

Hey Lukas, it seems to be an issue with IIS configuration. Try this article:
stackoverflow.com/questions/586555...

Collapse
 
djphantasy5 profile image
Daniel Johnson

This was very helpful for a beginner. Is there an article available to help with publishing my app I built using JSON-server to a a live hosting service like BlueHost? I want to take that next step getting this thing online and I'm not sure where to begin.

Collapse
 
tarekhassan410 profile image
Tarek Hassan

Your post helped me deploy an app I developed locally, Thank you :)

Collapse
 
nikita_guliaev profile image
Nikita Guliaev🧩

Happy to help, Tarek!

Collapse
 
akaricypher profile image
akaricypher

Good day brothers, please 🙏 am still struggling to solve this, i will so grateful if I get a screenshot of how it's done

Collapse
 
yongchanghe profile image
Yongchang He

Thank you for sharing this, which is exactly what I want.

Collapse
 
prathuu profile image
Prathuu

I have one question however.
this only works for reading data from the repo.
but how do I manipulate the data?

Collapse
 
harish8435 profile image
Harish Parmar

same question.

Collapse
 
harish8435 profile image
Harish Parmar

Hey Nikita, Why my post request data is not reflecting on the typicode server?

Collapse
 
davidprabudt profile image
David-Prabu-DT

Is this method only retrieve data from github. How can i update the json data on github.

Collapse
 
ismail-888 profile image
ismail-888

i got a white screen with any error why ?

Collapse
 
prathuu profile image
Prathuu

just right on point and effective !
thank you so much.