Github Free Angular React Application Hosting
Wall Script
MailxEngine
Wednesday, August 19, 2020

Github Free Angular React Application Hosting

Developing and hosting your own Angular, React applications has never been easier, but now there are many options like Google Firebase, Heroku and etc. Github Pages is offering some great features with free of cost no credit card required and no bandwidth limitations. Just create a public repository and commit all of your product ready files. It has a custom domain support with HTTPs enforcement.

Github Free Website Hosting


Live Demo  Live Demo


Video Tutorial


Create Repository
Create a GitHub repository with your project name.
Github Free Website Hosting

Master Branch
Master branch with readme file.
Github Free Website Hosting

Create File
Create a new file directly.
Github Free Website Hosting

index.html
Create a simple HTML to display a title.
Github Free Website Hosting

style.css
Styling for H1 tag.
Github Free Website Hosting


Master branch
Updated master branch
Github Free Website Hosting


Setting Github Pages
Go to branch settings and scroll bottom, you will find the Github pages.
Github Free Website Hosting

Domain CNAME Record - WWW
You can map your main domain with CNAME @
Github Free Website Hosting

Sub Domain CNAME Record
Github Free Website Hosting

Clone Github Project

Copy Repository URL
Github Free Website Hosting

Clone Github hosting repository.
Build Project
$git clone https://github.com/username/hosting
$cd hosting

Github Free Website Hosting

Create an Angular Project
Generate an Angular project using ng command.
$ng new hosting-angular

Angular create project

Build Angular Project
$cd hosting-angular
$ng build --prod

Host Angular Project
Copy past all of the dist directory files into hosting directory. Then execute the following command.
$cd hosting
$git add .
$git commit -m "Angular project"
$git push

Angular build command


Create a React Project
Generate a React project using create-react-app command.
$npx create-react-app hosting-react

React create project

Build Project
$cd hosting-react
$npm run build --prod

React build command

Host React Project
Copy past all of the build directory files into hosting directory. Then execute the following command.
$cd hosting
$git add .
$git commit -m "React project"
$git push
web notification

1 comments:

Make in India