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 (9)
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.
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?
Same question here
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????????
Hello,
The react app aplication and db.json have separate repositories?
Thanks.
Hey, I have the same question, if you have figured this out could you provide me insights regarding this
Your post helped me deploy an app I developed locally, Thank you :)
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?
Set your fetch() headers
'Access-Control-Allow-Origin': '*',
Accept: 'application/json;odata.metadata=full',
'Content-Type': 'application/json',