In this article, you will learn how to deploy your angular application to GitHub pages.
Let us go through the following steps,
- Create your angular app with Angular CLI
- Create a git repository
- Push your changes from local repository
- Deploy
- Get through the hurdles (optional)
- 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
- In your GitHub pages repo settings, be sure that you have checked the Enforce HTTPS option
- 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.
Thank you for reading this article and I hope you had a useful time. Have a great day!
Top comments (2)
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.
iam getting cors issue when iam trying to access the application