{"id":810,"date":"2018-03-30T09:48:00","date_gmt":"2018-03-30T09:48:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=810"},"modified":"2025-02-26T12:03:34","modified_gmt":"2025-02-26T12:03:34","slug":"deploy-angular-app-to-github","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/deploy-angular-app-to-github","title":{"rendered":"How To Deploy an Angular Application to GitHub"},"content":{"rendered":"\n<p>In this article, we will follow a step-by-step approach to deploying an Angular app to GitHub. We will create a project using Angular CLI \u00a0and then deploy that to GitHub. Let us get started.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"step-1\">Step 1<\/h2>\n\n\n\n<p>To create a project using Angular CLI. Run the command:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">ng new demo<\/pre>\n\n\n\n<p>You need to make sure that Angular CLI is installed globally on your machine.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"step-2\">Step 2<\/h2>\n\n\n\n<p>Change directory to demo and open project in VS Code or any other IDE of your choice. &nbsp;Modify AppComponent to add, subtract, multiply, and divide two numbers as shown in the below listing:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">export\u00a0class\u00a0AppComponent\u00a0{\n\u00a0\u00a0\u00a0\u00a0title\u00a0=\u00a0'Calculator\u00a0App';\n\u00a0\u00a0\u00a0\u00a0num1:\u00a0number;\n\u00a0\u00a0\u00a0\u00a0num2:\u00a0number;\n\u00a0\u00a0\u00a0\u00a0result:\u00a0number;\n\u00a0\u00a0\u00a0\u00a0add()\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.result\u00a0=\u00a0this.num1\u00a0+\u00a0this.num2;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0substract()\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.result\u00a0=\u00a0this.num1\u00a0-\u00a0this.num2;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0multiply()\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.result\u00a0=\u00a0this.num1\u00a0*\u00a0this.num2;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0divide()\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.result\u00a0=\u00a0this.num1\u00a0%\u00a0this.num2;\n\u00a0\u00a0\u00a0\u00a0}\n \n}<\/pre>\n\n\n\n<p>As you can see, that AppComponent is very simple and it contains code to perform basic calculator operations.<\/p>\n\n\n\n<p>Next, modify the AppComponent template<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div\u00a0class=\"container\">\n\u00a0\u00a0\u00a0\u00a0&lt;br\u00a0\/>\n\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Welcome\u00a0to\u00a0{{\u00a0title\u00a0}}!\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/h1>\n\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0&lt;br\u00a0\/>\n\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0class=\"col-md-6\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input\u00a0type=\"number\"\u00a0[(ngModel)]=\"num1\"\u00a0placeholder=\"Enter\u00a0Number\u00a01\"\u00a0class=\"form-control\"\u00a0\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0class=\"col-md-6\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input\u00a0type=\"number\"\u00a0[(ngModel)]=\"num2\"\u00a0placeholder=\"Enter\u00a0Number\u00a02\"\u00a0class=\"form-control\"\u00a0\/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0&lt;br\u00a0\/>\n\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0class=\"row\u00a0text-center\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0class=\"col-md-3\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button\u00a0class=\"btn\u00a0btn-info\"\u00a0(click)='add()'>Add&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0class=\"col-md-3\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button\u00a0class=\"btn\u00a0btn-info\"\u00a0(click)='substract()'>Substract&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0class=\"col-md-3\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button\u00a0class=\"btn\u00a0btn-info\"\u00a0(click)='multiply()'>Multiply&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0class=\"col-md-3\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button\u00a0class=\"btn\u00a0btn-info\"\u00a0(click)='divide()'>Divide&lt;\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0&lt;br\u00a0\/>\n\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div\u00a0class=\"col-md-5\u00a0col-md-offset-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h2>Result\u00a0=\u00a0{{result}}\u00a0&lt;\/h2>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<p>Like the component class template, it is also very simple. It uses:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>ngModel for two way data binding between input controls and properties<\/li>\n\n\n\n<li>event binding to call a function on click of the button<\/li>\n\n\n\n<li>interpolation to display the result<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"step-3\">Step 3<\/h2>\n\n\n\n<p>Before we publish this application to GitHub, let us run it locally. To run it locally, run the command<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">ng serve<\/pre>\n\n\n\n<p>Your application should run on default port 4200 of localhost as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/a1.png\" alt=\" calculator app\" title=\" calculator app\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"step-4\">Step 4<\/h2>\n\n\n\n<p>To deploy Angular application first create a repository on GitHub. To do that navigate to <a href=\"https:\/\/github.com\/\" rel=\"noopener\">https:\/\/github.com\/<\/a> &nbsp;and click on New Repository. &nbsp;I am creating a repository named&nbsp; \u201c<strong>demo9<\/strong>\u201c. &nbsp;<\/p>\n\n\n\n<p>&nbsp;After the repository is created, use git command to add this repository as remote to the local project. For that run command as below :<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">git remote add origin https:\/\/github.com\/USERNAME\/PROJECT_NAME.git<\/pre>\n\n\n\n<p>Do not forget to change username and project name. Once the remote repository is added, you can verify that using the command<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">git remote -v<\/pre>\n\n\n\n<p>As output, you should get repository listed as below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/a2.png\" alt=\"  output, you should get repository listed as below\" title=\" output, you should get repository listed as below\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"step-5\">Step 5 <\/h2>\n\n\n\n<p>To deploy the Angular application to GitHub, you need to first install the <strong>angular-cli-ghpages<\/strong> globally:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install -g angular-cli-ghpages<\/pre>\n\n\n\n<p>After installing that ghpages, use Angular CLI to build the project. For that run command as shown below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">ng build --prod --base-href https:\/\/debugmodedotnet.github.io\/demo9\/<\/pre>\n\n\n\n<p>Make sure that you are using your GitHub username and repository name. &nbsp;After successful execution of the command, you should get bundle.js created as shown in the image below:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/a3.png\" alt=\" After successful execution of the command, you should get bundle.js created as shown in the image\" title=\"After successful execution of the command, you should get bundle.js created as shown in the image\"\/><\/figure>\n\n\n\n<p>As the last step, run command <strong>ngh \u2013no-silent<\/strong> to publish the application as shown in the image below:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/a4.png\" alt=\" As the last step, run command ngh \u2013no-silent to publish the application as shown in the image\" title=\"As the last step, run command ngh \u2013no-silent to publish the application as shown in the image\"\/><\/figure>\n\n\n\n<p>After successful publish navigate to&nbsp; <span>https:\/\/&lt;username&gt;.github.io\/&lt;reponame&gt;\/<\/span> to navigate to the application. &nbsp;This is all you need to do to deploy the Angular application to GitHub.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span style=\"color:#333333;font-family:'Arial',sans-serif;\">Like this post?<\/span><\/h4>\n\n\n\n<p><span style=\"color:#666666;font-family:'Arial',sans-serif;\">If you like this post, please share it. In addition, if you haven\u2019t checked out\u00a0<\/span><a href=\"\/products\/ignite-ui-angular\"><span style=\"color:#03a9f4;font-family:'Arial',sans-serif;\">Infragistics Ignite UI for Angular Components<\/span><\/a><span style=\"color:#666666;font-family:'Arial',sans-serif;\">, be sure to do so! They\u2019ve got 30+ material based Angular components to help you code speedy web apps faster<\/span>.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we will follow a step-by-step approach to deploy an Angular application to a GitHub. We will create a project using Angular CLI \u00a0and then deploy that to GitHub. Let us get started.<\/p>\n","protected":false},"author":65,"featured_media":1604,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,17],"tags":[],"class_list":["post-810","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=810"}],"version-history":[{"count":3,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/810\/revisions"}],"predecessor-version":[{"id":2508,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/810\/revisions\/2508"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1604"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}