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

#deploy #github #jsonserver #createreactapp

Aug 18, 2020 ・2 min read

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-Server & have a db.json file that you are using as a fake REST API for quick prototyping;
Your application is working in your local environment;
Your app has a repo on GitHub

Now you want to deploy your app to GitHub so you could share the link with someone. Here is a step by step process to do that.

Step 1:
Got to Json-Server page and follow the instructions:

Create a separate repo on GitHub;
Upload your db.json file there;
Go to https://my-json-server.typicode.com/<your-github-username>/<your-repo-name> to access your server.

Step 2:
Deploy your application to GitHub following the usual process:

Add a “Homepage” property to your package.json file: e.g. http://<github-username>.github.io/<repo-name> so it it looks like that:

Add to your existing “Scripts” property 2 new properties - predeploy & deploy:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

As shown down below:

Run the following commands in your terminal subsequently:
npm run build
npm run deploy

Almost done. Keep in mind that it may take a moment for Github to upload and build your app.

Step 3:
Go to your app’s repo and open Settings. In the GitHub Pages section select gh-pages branch from the drop-down menu. Hit save. If you see the following that means that everything is good & your app is being built. It usually takes up to 20-30 mins to see your app live on gihub pages.

Discussion (22)

Danny-Mousa • Dec 26 '20

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?

Nikita Guliaev🧩 • Apr 9 • 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...

Isaac Komezusenge • Jan 24

Same question here

códigoisaac • Apr 6

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.

Nikita Guliaev🧩 • Apr 9

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

códigoisaac • Apr 6 • 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??

Nikita Guliaev🧩 • Apr 9

Hey Isaac, is your repo private by any chance?

códigoisaac • Apr 10

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 :)

códigoisaac • Apr 12

Fixed.
Just did this: stackoverflow.com/a/63972301/12177597

Francis.B • Jan 7 • 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.

Mateo Loaiza Rios • Nov 9 '20

Hello,

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

Thanks.

Pravunath Singh • Jan 26

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

Nikita Guliaev🧩 • Apr 9

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

Isaac Komezusenge • Jan 23

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????????

Daniel Johnson • Jun 25

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.

Artem Kolinko • Dec 10 '20

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?

Francis.B • Jan 8

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

Nikita Guliaev🧩 • Apr 9

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

lukaskairys • Apr 2

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?