Hosting your React Application on Github

#github #react #npm

In this article, I'll guide you on how to host your frontend applications using GitHub's free hosting service.

N.B They are other free hosting services like Netlify, Heroku, Vercel, and so on but today, our focus would be using GitHub.

The steps are as follows:
First you need to create a react application and push to Github. In this article, we would be building a simple input element inspired by Google's Material Design.

Create the react application you want to host using the steps below
a. npx create-react-app app-name where app-name is the name of your application. Feel free to choose whatever name you want.
b. Open the application in your preferred code editor. I'll be using vscode.
copy and paste the following code in your App.js file.

<form>
    <div className="input__element">
      <input type="text" autocomplete="off" name="name" />
      <label>Your name</label>
    </div>
</form>

N.B Delete the header tag and all of it's content before pasting the code you copied.

Your App.js should look like this:

import React from 'react';
import './App.scss';

function App() {
    return (
     <div className="app">
      <form>
       <div className="input__element">
    <input type="text" autocomplete="off" name="name" />
     <label>Label</label>
       </div>
       </form>
      </div>
   );
}
export default App;

Notice the App.scss import.

Copy the scss code below and paste in you App.scss file.

$primary-color:#296EF9;

.app{
  display: flex;
  justify-content: center;
  align-items: center;
form{
  margin-top: 300px;
.input__element {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
  label{
    position: absolute;
    font-size: 1rem;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    color: #909090;
    padding: 0 0.3rem;
    margin: 0 0.5rem;
    transition: .1s ease-out;
    transform-origin: left top;
    pointer-events: none;
    font-size: 14px;
   }
   input {
    font-size: 1rem;
    outline: none;
    border: 1px solid #f3f1f1;
    border-radius: 5px;  
    padding: 1rem 0.8rem;
    color: #909090;
    transition: 0.1s ease-out;
    width: 100%;
     &:focus {
      border-color: $primary-color;  
     }
     &:focus + label {
      color: $primary-color;
      top: 0;
      transform: translateY(-50%) scale(.9);
     }
   }
 }
}
}

You can easily setup scss in your react app by running:
npm install --save node-sass and renaming your .css files to .scss

Open your teminal and run npm start. This command should automatically open your application in your default browser and you should see something like the screenshoot below.

After creating your application, you need to push it to GitHub.

Now the interesting part.

Open your terminal and run this command:
npm install gh-pages --save-dev. This would install the gh-pages package as a dev dependency.

Open your package.json file and add the following:
Add
"homepage":"http://your-github-username.github.io/repo-
name",
as one of the properties

Go to your scripts section and add these lines too:

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

Finally, run npm run deploy to deploy your application.
Your application is finally live and can be access over the internet.

Thanks for reading.

This is my first technical article. Feel free to comment on it, give feedback on where I can improve on and also, like this article if it was helpful.