Deploying your angular application to GitHub-pages
Tags: angular, github
Published: 2019-11-08 17:27:52

In this article, you will learn how to deploy your angular application to GitHub pages.

Let us go through the following steps,

1. Create your angular app with Angular CLI
2. Create a git repository
3. Push your changes from local repository
4. Deploy
5. Get through the hurdles (optional)
6. Safety tips


###Create your angular app with Angular CLI
```ng new my-app --routing=true --style=scss```

Now move to the project folder

```cd my-app```

Install all the dependencies
```npm install```

Check your application locally
```ng s -o```

###Create a git repository

1 . Log in to your github account
2 . On the top-right corner click the + icon and then select new repository
3 . Check the “Initialize this repository with a README” if you need a README file to document your project, else just ignore it
4 .  Now go ahead and click the “Create repository” button

###Push your changes from local repository

Again go to the terminal/command window and initialize your local application with git

```git init```

Check the status of the upstages files
```git status```

To stage all the changes use
```git add . ```

Commit all the stages changes to your initial commit with a message
```git commit -m "Initial commit"``` **(If you miss this step, you will get an error saying *“src refspec master does not match any.”* So don’t forget your commit)**
	
Now set your origin to the remote repository
```git remote add origin https://github.com/<username>/my-app.git```

While **connecting over HTTPS is recommended by GitHub**, If you still don’t want to type the GitHub password each and everytime you commit, just use the below command instead of the previously mentioned one. 
```git remote add origin git@github.com:<username>/<remote_repo_name>```
But be sure to setup SSH in your device before using this method. 

Did you get ‘**Github “fatal: remote origin already exists”**’ error? 
Then use,

```
git remote rm 
git remote add origin https://github.com/<username>/my-app.git
```

This will remove the associated origin from remote and add it again.
Note: **git remote rm does not delete the remote repository** from the server. It simply removes the remote and its references from your local repository.

Now push all changes to remote repository
```git push origin master```

###Deploy

Since you have pushed everything to your remote, you are now ready to deploy your application.

Build your application with “**--prod**” for production mode and provide the --base-href to which link your application has to be hosted. In your case this would be

```ng build --prod --base-href "https://<username>.github.io/my-app/"```

If everything is fine, then continue. Else go to the 2nd troubleshoot of the “**Get-through the hurdles**” section below and comeback soon.

If you don’t have **angular-cli-ghpages** installed globally in your system,

```npm install -g angular-cli-ghpages```

Now deploy,
```angular-cli-ghpages --dir=dist/angular-app```

Angular 6 & below

```angular-cli-ghpages ```

Did you get a message “Successfully published!” ? Hooray!!! You have deployed your app successfully!

Now goto **https://*username*.github.io/my-app/**(the link provided by you as the “base-href”) and check your application up and running.

For updating your application with any new changes, just commit, push and follow the steps mentioned under the topic “Deploy”.
**Note:** After your first deployment, you don’t need to use the “**--base-href**” flag again as it is already set.

Why do we provide --dir in newer versions?
In older versions(6 or below) the output folder is dist itself. 
But **in newer versions the output folder is dist/project-name/ by default**. To output to a different folder, change the outputPath in angular.json.

Get-through the hurdles

1 . After creating your remote repository, if you receive some message saying: “**We found a vulnerable dependency in a repository you have security alert access to.**”, 
open a terminal/command window on your project location and then run
```npm audit fix```
This will fix your problem

2 . While running ‘ng build --prod --base-href "https://*username*.github.io/my-app/“‘ some of you may have got the below error

```Error: Schema validation failed with the following errors:
  Data path ".builders['app-shell']" should have required property 'class'.
    at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (/Users/<username>/git/my-app/node_modules/@angular-devkit/core/src/workspace/workspace.js:215:42)
    at MergeMapSubscriber._tryNext (/Users/<username>/git/my-app/node_modules/rxjs/internal/operators/mergeMap.js:69:27)
    at MergeMapSubscriber._next (/Users/<username>/git/my-app/node_modules/rxjs/internal/operators/mergeMap.js:59:18)
    at MergeMapSubscriber.Subscriber.next (/Users/<username>/git/my-app/node_modules/rxjs/internal/Subscriber.js:67:18)
    at MergeMapSubscriber.notifyNext (/Users/<username>/git/my-app/node_modules/rxjs/internal/operators/mergeMap.js:92:26)
    at InnerSubscriber._next (/Users/<username>/git/my-app/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (/Users/<username>/git/my-app/node_modules/rxjs/internal/Subscriber.js:67:18)
    at MapSubscriber._next (/Users/<username>/git/my-app/node_modules/rxjs/internal/operators/map.js:55:26)
    at MapSubscriber.Subscriber.next (/Users/<username>/git/my-app/node_modules/rxjs/internal/Subscriber.js:67:18)
    at SwitchMapSubscriber.notifyNext (/Users/<username>/git/my-app/node_modules/rxjs/internal/operators/switchMap.js:86:26)```

To fix this,
Goto your working directory
Delete the *node_modules* folder
Also delete *package_lock.json* file

Now open package.json file
In the “devDependencies” change the “*@angular-devkit/build-angular*” version to "*~0.13.4*"

Run 
```npm install``` 

####Safety tips

1. In your GitHub pages repo settings, be sure that you have checked the Enforce HTTPS option
2. While deploying, always provide your --base-href with a https prefix rather than a http.

#####Reason: 
Otherwise you may get few errors like,

```Mixed Content: The page at ‘<your_gpages_remote_url>’ was loaded over HTTPS, but requested an insecure stylesheet ‘<url_provided_with_http_prefix_while_deploying>/styles.acb808cb000123f5c6ec.css'. This request has been blocked; the content must be served over HTTPS.```
[Read more here] (https://help.github.com/en/github/working-with-github-pages/securing-your-github-pages-site-with-https)

Thank you for reading this article and I hope you had a useful time. Have a great day!