How to create a react app and deploy it on github pages?

Node.js is a cross-platform JavaScript environment that can be used for server-side scripting. Due to its non-blocking workflow, Node.js is popular among the web developers for building a dynamic web application. Node Package Manager also known as npm is the package manager for Node.js.

You may get a doubt why we are installing Node.js for running a react application.

So here is the answer to your doubts.

Reasons To Use Node.js and React.js Together:

Some of the reasons why you should use Node JS together with React JS to make your code scalable and highly efficient include:

• Real-time Data: Using Node JS is highly recommended for a constant server connection if the core of your application is based on real time data management or streaming.
• High Server Load: Using Node JS with React can help in handling requests and maintaining server load balance.
• JSON APIs: You can easily build JSON APIs for your application using Node JS. The reusability of the code enables sharing within React JS.

<❤1❤>Installation and Setting Up:

Install node.js framework from https://nodejs.org/en/download/ . Install the application version that is compatible with your OS(Windows, MacOS, Linux)and system requirements.

For windows installation(64-bit):

open the msi installer and follow these steps.

Accept the agreement and click on ‘Next’.

Use the prompted directory for hassle free usage of the application.

Select the directory for installation in your PC and click on ‘Next’.

click on ‘Next’

Select the checkbox and click on ‘Next’.

Click on ’Next’

Click on finish and hence the app is installed.

<❤2❤>Checking if Node.js is installed or not on your pc ?:

Step 1: Open the visual studio code or any other code editor you prefer to use. Alternatively you can also use the windows command prompt(CMD).

Step 2:Open the New Terminal

Go in to the Terminal.

Step 3:Check for the node and npm versions in terminal.

Use the commands node -v and npm -v

Check for Versions

Step 4:After checking for versions, if you want to upgrade for new versions of node.js then use the following steps.

1. Go to this site: https://github.com/coreybutler/nvm-windows/releases
2. Install and unzip the nvm-setup.zip file
3. From cmd type nvm -v to ensure nvm is installed.

After installing nvm, the following can be done to update Node.js to the latest version:

nvm install <version>

Checking for nvm version and installing required version

Check the list of available Node.js version in the system using the following command:

nvm list

To use the desired version, use the following command:

nvm use <version>

Update npm: To update NPM, use the following command:

npm install -g npm

<❤3❤>Now coming to interesting part i.e is creating the react application

The React.js framework is an open-source JavaScript framework and library developed by Facebook. It’s used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript.

There are four simple steps for creating a react app

first clear the terminal by using “cls” command.

Step 1:Enter the following command.

npx create-react-app my-app

apple react application is being created

Here my react app name is apple.

This may take 5–10 mins for setting up its environment depending on your bandwidth speed .

You’ll recieve a message “Happy hacking!” at the end .

Successfully the react app is created

Step 2:Add the react app directory to the command line

cd apple

Step 3:Enter the command npm install ,this will install all the required node modules for running the react app

npm install

Adding the app to the path in terminal and installing required node modules .

Step 4: Now comes the intersting command for starting the react appliction on the host port.

npm start

Step 5: Now you can visit the development server on these links hosted on port 3000

Local: http://localhost:3000
On Your Network: http://172.30.128.1:3000

For security concern it is suggested to use local link.

This is a basic react page ,you need to edit the src/App.js file to create your own user interface.

I have modified App.js by adding my favourite photo and reloaded the development server. Hence, you can add your required features to it.

Edited react application on the same host port 3000.

<❤4❤> Creating a new repository in github

Step 1:Go to your github account and add new repository

Click on ‘New’

Step 2:Add name to the repository, here i am using apple as my repository name.

Add repository name

click on ‘Create repository’

It would look like this after creating the repository . Now you can push files into your new repository.

But wait ,there some prerequisites you need do before you deploy your react-app.

<❤5❤>Install gh-pages and modify the package.json file

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website. You can see examples of GitHub Pages sites in the GitHub Pages examples collection.

Run the following commands simultaneously one by one

git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Revan-droid/apple.git
git push -u origin main

Run the following command in terminal for installing github pages

npm install gh-pages --save-dev

You can refer the following image

Installing git hub pages

Now edit the package.json after running the above command in the terminal.

Go to the react-app>>apple>>package.json

Now, let’s configure the package.json file so that we can point our GitHub repository to the location where our React app will be deployed.

We’ll also need to add predeploy and deploy scripts to the package.json file. The script is used to bundle the React application; the deploy script deploys the bundled file.

In the package.json file, add a homepage property that follows this structure: http://{github-usename}.github.io//{repo-name}.

package.json file

Now run the following commands to commit the changes and push the changes in to the repository.

git add .
git commit -m "setup gh-pages"
git push

Pushing the changes

Github repo after pushing the files

<❤6❤>This is the final step to deploy your react-app

npm run deploy

Deploying the react-app on https://revan-droid.github.io/apple/

Hence the react-app is published and you can view it on

https://revan-droid.github.io/apple/

Hoping Ironman will return…….

❤Thank You, Keep Loving, Keep Learning❤