Ng7- Github pages + angular - How to Deploy an Angular Application to GitHub

Ng7- Github pages + angular - How to Deploy an Angular Application to GitHub

------------------------------------------------------------------------------------

Soln:3 -  Angular version 11

====

Commands which I using in Tutorial Angular version 11 - on 23-mar-2022

1. npm install -g angular-cli-ghpages. 2. ng build --base-href "https://username.github.io/project-name/

". 3. ngh --dir dist/project-name

Change the index.html

<base href="/" /> replace with "https://username.github.io/project-name/"

<base href="https://gnganapath.github.io/AngularGuide/">

goto github -> settings -> pages -> you can see the url is deploy in github pages. change the branch names as well. 

instead of root -> docs will work

Step 1
To create a project using Angular CLI, run the command:

ng new demo

You need to make sure that Angular CLI is installed globally on your machine.

Step 2
Change the directory to demo and open the project in VS Code or any other IDE of your choice.

step 3
ng serve


step 4

Make sure ng build --prod is working or not.  - dist folder creation with
To deploy your Angular application, first create a repository on GitHub. To do that navigate, to https://github.com/

create github repository Name "PROJECT_NAME"

To do that, run the  below command:

git remote add origin https://github.com/USERNAME/PROJECT_NAME.git


step:5

To deploy the Angular application to GitHub, you need to first globally install the angular-cli-ghpages:

npm install -g angular-cli-ghpages

After installing ghpages, use Angular CLI to build the project. For that, run the command as shown below:

 ng build --prod --base-href https://USERNAME.github.io/PROJECT_NAME/

step:6

For the last step, run the command "ngh -no-silent" to publish the application

Soln:2
======
Deploying angular project to GitHub pages is simple and easy.

I assume that you already have a working Angular app ready to be hosted
to GitHub pages and I also assume that you pushed the local repository to Github.
If not, click the below link to follow the instructions for adding an existing angular project to Github.

Step4: in Detail ==>Putting your existing work on GitHub
-----------------

1.Create a new repository on GitHub. To avoid errors, *******=>do not initialize the new repository with README, license, or gitignore files.
You can add these files after your project has been pushed to GitHub.

Open Git Bash.

Change the current working directory to your local project.

2.Initialize the local directory as a Git repository.

$ git init
Add the files in your new local repository. This stages them for the first commit.

3.$ git add .
# Adds the files in the local repository and stages them for commit. To unstage a file, use 'github

Commit the files that you've staged in your local repository.

4.$ git commit -m "First commit"
# Commits the tracked changes and prepares them to be pushed to a remote repository. To remove this commit and modify the file, use 'git reset --soft HEAD~1' and commit and add the file again.
At the top of your GitHub repository's Quick Setup page, click  to copy the remote repository URL. [ it will avail in clone green button to show the github repo url]

In the Command prompt, add the URL for the remote repository where your local repository will be pushed.

5.$ git remote add origin (remote repository URL)
# Sets the new remote
$ git remote -v
6.# Verifies the new remote URL
Push the changes in your local repository to GitHub.

7.$ git push origin master
# Pushes the changes in your local repository up to the remote repository you specified as the origin

8. If any git remote push error
$git pull origin master
git status
git commit
git push origin master

9 ***********important
If you want create remote new branch

create branch in local repo
git checkout -b "branchName"

then git push origin branchName

It will create new branch in github.

Summary: github pages can create a new branch when we do  ->

npm install the angular-cli-ghpages
ng build --prod --base-href https://USERNAME.github.io/PROJECT_NAME/
ngh -no-silent

REf: https://dzone.com/articles/how-to-deploy-an-angular-application-to-github
https://medium.com/@swarnakishore/deploying-angular-cli-project-to-github-pages-db49246598a1 <- soln2
https://help.github.com/en/articles/adding-an-existing-project-to-github-using-the-command-line