DEV Community

loading...
Cover image for Hosting your React Application on Github

Hosting your React Application on Github

cigwe416
・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
     }
   }
 }
}
}
Enter fullscreen mode Exit fullscreen mode

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.

Screen Shot 2021-03-01 at 5.32.24 PM

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

  1. Go to your scripts section and add these lines too:
      "predeploy":"npm run build",
      "deploy":"gh-pages -d build"
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (2)

Collapse
masterbrian99 profile image
pasindu p konghawaththa

Thank you.i had no idea this is possible

Collapse
cigwe416 profile image
cigwe416 Author

I'm glad you found it helpful