DEV Community

loading...
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 profile image Nikita Guliaev🧩 ・2 min read

If you are reading this article I’m assuming you already have the following done:

  1. Create a project using Create-React-App;
  2. You are using Json-Server & have a db.json file that you are using as a fake REST API for quick prototyping;
  3. Your application is working in your local environment;
  4. 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:

Alt Text

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

Alt Text

  • 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.

Alt Text

Discussion (9)

pic
Editor guide
Collapse
fbolaji profile image
Francis.B

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
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
isaackomeza profile image
Isaac Komezusenge

Same question here

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
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
tarekhassan410 profile image
Tarek Hassan

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

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',