How to build and deploy a React app to Github pages in less than 5 minutes

How to build and deploy a React app to Github pages in less than 5 minutes

Image for post

If you?re new to the react domain, my previous article on Getting Started with React is highly recommended.

Learn React by building a To-Do App ? React Functionalities Explained

If you are one of those people who are intimidated by the buzz around React but find it difficult to get started, then?

medium.com

In this article, we are building a Personal Advisor React App which gives genuine life advice to keep us motivated amidst the chaos and deploy it to Github pages for making a great website out of it.

Prerequisite:

  • Github account and git installed
  • Node.js and npm installed in your machine(Node 8.10.0 or later versions are accepted)

Fork the following GitHub repo to get the project files: https://github.com/AnjaliSharma1234/Personal-Advisor-React-App.

AnjaliSharma1234/Personal-Advisor-React-App

A personal advisor app to keep you motivated and calm amidst the chaos. It is a React web app fetching data from an?

github.com

Getting Started

Skip these steps and move to the deployment section if you?ve already built the React app

Step1: Create the React app: npx create-react-app your-app-name

Step2: Go to the project repo: cd your-app-name

Step3: Copy the src and public folder from the following repo https://github.com/AnjaliSharma1234/Personal-Advisor-React-App(You can customize the files according to your preferences) and substitute them in the your-app-name folder.

Step4: Run your application: npm start

You can now see the app running in the localhost browser popup like this:

Image for postLocalhost browser window popup after running the application

Congratulations, you?ve created your react app, let?s move to deployment for building a website out of it.

Deployment

Make sure your react app code is already pushed to the GitHub account under some {Github-repo-name}.

Step1: Install the gh-pages package as a ?dev-dependency? of the app

npm install gh-pages ? save-dev

Step2: Add homepage property to package.json file

Open package.json and add

?homepage?: ?http://{Github-username}.github.io/{Github-repo-name}”

Image for postpackage.json file after adding the homepage property

Step3: Deploy scripts under package.json file

In the existing scripts property, add a predeploy property and a deploy property, each having the values shown below:

?scripts?: {//??predeploy?: ?npm run build?,?deploy?: ?gh-pages -d build?}Image for postpackage.json script object after deploying scripts

The predeploy command helps to bundle the react app while the deploy command fires up the bundled file.

Step4: Create a remote GitHub repository

(Skip this step if your remote GitHub repository is already initialized)

Initialize: git init

Add it as remote: git remote add origin your-github-repository-url.git

Step5: Now deploy it to GitHub Pages

npm run deploy

Image for postTerminal screenshot while deployment

This command will create a branch named gh-pages at your GitHub repository. This branch hosts your app and homepage property you created in package.json file hold your link for a live preview.

Go to {your-GitHub-code-repository} -> settings -> GitHub pages section and setup source to the gh-pages branch.

Image for post

Step6: Update your repository code (optional)

Commit and push your updated code commit to GitHub

git add .git commit -m ?Your commit message?git push origin master

That?s it! You have successfully deployed your app to the website URL defined in Step2 of this Deployment section.

Congratulations!

Hope this article is helpful, feel free to reach out for any queries.

Anjali Sharma – Software Development Intern – Twimbit | LinkedIn

View Anjali Sharma’s profile on LinkedIn, the world’s largest professional community. Anjali has 13 jobs listed on?

www.linkedin.com

Anjali Sharma

The latest Tweets from Anjali Sharma (@AnjaliiSharmaaa). @Google TSWE Scholar | #MSFTStudentPartner | @GoogleAds Top?

twitter.com

9

No Responses

Write a response