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

Nikita Guliaev🧩 — Tue, 18 Aug 2020 19:58:25 +0000

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xlau4nanlugn6x4v4hfs.png)


* Run the following commands in your terminal subsequently:
1. `npm run build`
2. `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](https://dev-to-uploads.s3.amazonaws.com/i/kzrtrwf4d6141xdizrij.png)

Forem: Nikita Guliaev🧩

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