Deploying a React App using Github Pages

So you just finished building your first React App, well maybe not your first(but you understand what I mean). You push your code to GitHub -> Goto Settings -> Click on Github Pages and host your Application like you normally do while you were still building web applications with HTML, CSS and Vanilla JavaScript. Github generates a URL for you but when you click on the URL, the site is blank you then begin to wonder, What happened? What did I do wrong?

not to worry, I faced the same challenge too when I deployed my first React App. There are very simple things you need to do before you can successfully deploy your site on Github pages.

Allow me to walk you through the steps in getting your React App live using Github Pages.

Step 1: Install gh-pages npm package

You do this by opening your terminal and running this npm or yarn command

npm install gh-pages --save-dev

yarn install gh-pages --save-dev

the npm package may likely take some time to complete, depending on your network strength. This step installs the gh-pages npm package and also designate it as a development dependence. To confirm if the installation was successful, go to the package.json file on your project, you should see something like this

Step 2: Add a homepage property to your package.json file

While you are still on the package.json file in your project, add a homepage property using this format:

"homepage": "https://{insert your Github username}.github.io/{insert the repo-name}",

NOTE: This format is only for your project, for a Github user page and a Custom domain page, you will use a different format. "homepage": "https://{insert your Github username}.github.io" for a Github user page and "homepage": "https://{website URL}" for a custom domain page.

Step 3: Add a deployment script to your package.json file

Still, on your package.json file, locate your script object and add a predeploy property and a deploy property.

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

at this point, your React App now includes deployment scripts

Step 4: Add a remote path

If you haven't added a remote path, that points to your Github repository, this will be the best time to do so using this Git command

git remote add origin https://github.com/{insert your username}/{insert repo-name}.git

in my case, I'll run

git remote add origin https://github.com/Aviatorscode2/pexels-photoapp.git

This is so that you can Git can push changes made on your local repository to the repository of the same project on Github.

We are almost there

Step 5: Deploy your React App to Github Pages

Open your terminal and run

npm run deploy

yarn run deploy

This code will cause the predeploy and deploy scripts we added in Step 3 to run

How it works: The predeploy script will create a distributed version of your React App, it creates a folder name build and stores it there. Then the deploy script will push the content built during predeploy to the gh-pages branch of the Github repository.

Step 6: Buiding your site from Github pages

This is the final step, when you return back to your project repository on Github, you will notice that you have an additional branch called gh-pages

1. Click on settings from your Github repository
2. click on pages
3. Select gh-pages as the Branch Github pages will build your project from and root as the folder
4. Click on save

Wah Lah, your React App is live

Programming Term

Concurrency: Is a property of programs and systems that allows tasks to run in overlapping time pperiods.