Deploying your angular application to GitHub-pages

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 [e-mail]:<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

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

Comments

[Tom Reifenberg]

Thanks for the article, so helpful in getting things deployed! For anyone else who might be foolish enough to wonder why the deployment is pulling your README, going to the github repo settings and changing the route from /root to /docs should fix that problem.

[viveksingh30]

iam getting cors issue when iam trying to access the application