Deploying React App to Github Pages.

This post is about deploying the React.js project using Github Pages, assuming that you have a Github account and profile.

1. First of all, create a React project using a command:

npx create-react-app my-app
cd my-app

2. After creating and updating the code for your app, create a Repository in GitHub.

Then do the first commit using a terminal with these commands:

3. Head over to the package.json file in your app and insert “homepage” with the URL: “HTTP:// <yourusername>.github.io/<your_repo_name>”. It’s important not to put it inside of the object. Keep it in the main root:

4. In the same file, inside of the “scripts’ insert “predeploy” and “deploy”:

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

5. Run this command in the terminal:

npm run deploy

6. Once it was “published”, head over to GitHub newly created repo, to “Settings”:

7. Navigate to the GitHub Pages section. It’s important to make sure that the Source is Branch: gh-pages (example below). Here is also a link where the app is being published (highlighted in green):

A couple of tips:

• If you are using an external API, Chrome may block access to it due to Mixed content. See here. What helped me to solve the issue is to change my fetch request to API using “HTTPS://…” instead of “HTTP://…”.
• For deploying the Fullstack app with backend and frontend, the best practice is to use Heroku.

That’s pretty much it! The app was deployed!