Deploying Angular Project To GitHub Using GitHub Pages

-














Note:

node --version = v14.20.0

npm --version = 6.14.17

ng version

Angular CLI: 14.0.0
Node: 14.20.0
Package Manager: npm 6.14.17
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1400.0 (cli-only)
@angular-devkit/core         14.0.0 (cli-only)
@angular-devkit/schematics   14.0.0 (cli-only)
@schematics/angular          14.0.0 (cli-only)


First Open your project in vscode editor, and then open terminal



Now open your Git account and create new repository in Git.



Go Back to vscode terminal, and type command 

ng build --configuration production --base-href "https://AbhiGit799.github.io/demo-ang-sitegit/"

Here,   "https://<username>.github.io/<repo-name>/"

https://AbhiGit799.github.io/demo-ang-sitegit/

you can take from url as shown below












After successful execution of above command dist folder get created inside your angular project.
Now right click on this folder and open terminal




And execute command git init



After that execute

git remote add origin https://github.com/AbhiGit799/demo-ang-sitegit.git

you can find this command from your git repository after creating repository git give this command




After that from left hand menu open git menu and give commit message and click on commit button

















Now go back to your git repository and refresh page.







Now go to settings--->Pages










Make changes in the Pages menu as shown in above screen shots. Now wait and refresh the page and go back to code menu and again come back to page menu







Now site is ready. You can check the link by clicking visit site.


Reference Links:-

https://medium.com/tech-insights/how-to-deploy-angular-apps-to-github-pages-gh-pages-896c4e10f9b4

https://www.npmjs.com/package/angular-cli-ghpages?activeTab=readme#prerequisites

https://www.c-sharpcorner.com/blogs/a-guide-on-how-to-deploy-angular-applications-to-github-pages


Reference Video Links:-

https://www.youtube.com/watch?v=wElk1W1BJ2o

https://www.youtube.com/watch?v=iYwboA7CVlE


Main commands used:

npm i angular-cli-ghpages

ng build --configuration production --base-href "https://AbhiGit799.github.io/demo-ang-sitegit/"

git init

git remote add origin <url_provided_by_git>














Comments

Post a Comment

Popular posts from this blog

Frequently Used Date Expressions In Pega

-
Image
 Hi, In this post I will show some of the frequently used date expressions in pega. Before starting we will see some of the date subscripts used in date functions. For Ex:   If date is =  05/March/2023 yyyy = Year => 2023 YYYY => 2023 MM = Month => 03 M=> 3 MMMM  ===> March MMM ====> Mar dd = Date/day  => 05 d ===> 5 1) pxFormatDateOnly(CurrentDateTime(),"yyyyMMdd","MM/dd/yyyy")   Here, CurrentDateTime()  = 20230618T025027.005 GMT                                                                                CurrentDateTime() returns the current date and time. pxFormatDateOnly() = Format/reformat a Date Time string using a specified parameters. Output  =  06/18/2023  { which is 18 June 2023} 2)...
Read more

pxSubscript and pxListSubscript Properties In Pega

-
Image
  .pxSubscript   And  .pxListSubscript Property-Set                         CasePg.Stakeholderlist Param.Indexpurpose  = "Index_Stakeholderlist" Param.InsIndexedKey  =  "CIGNA-CIGNAAUTO-WORK"+CasePg.pyID local.cnt  =   .pxListSubscript Param.IndexCount = local.cnt-1 How to get index value from pagelist?  The property pxListSubscript will hold the index of the current page that you are in How to get index in a pagelist during iteration While iterating in a pagelist Example : EmployeeList To refer to page at that point: we use EmployeeList(<CURRENT> ) But how to get the index if we have to write some condition, like at index= nth position => achieve some logic. Answer : pxListSubscript Pega provides one property called pxListSubscript which is declaratively calculated and kept at each page level in a pagelist. We can use it instead of setting  a property a...
Read more

pyForEachCount In Pega

-
Image
pyForEachCount holds the current iteration number. You can examine (but not alter) this value in the step.                 When processing the For loop or iterating over a Value List or Page List property, the parameter param.pyForEachCount holds the current iteration number.  You can examine (but not alter) this value in the step. For example, to iterate only over the first ten  pages or values, you can exit the iteration when pyForEachCount is greater than 10. In below example we will see how we can use pyForEachCount in data transform and set value in .pxResults.
Read more