Feature/deploy GitHub workflow (#6)

* Added base href

* added deploy script

* added ng deploy

* Added user details for deployment

* forgot closing brace

* Added initial card for mock api module

* Fixed tests

Author: rogue-elephant

.github/workflows/deploy.yml

@@ -29,14 +29,9 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
-      - name: Install and Build
+      - name: Install and Deploy
+        env:
+          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
         run: |
           npm install
           npm run deploy:github-pages
-
-      - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@releases/v3
-        with:
-          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
-          BRANCH: gh-pages # The branch the action should deploy to.
-          FOLDER: dist/angular-component-library # The folder the action should deploy.

angular.json

@@ -23,7 +23,10 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "aot": true,
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.scss"
@@ -96,7 +99,10 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.scss"
@@ -112,7 +118,9 @@
               "tsconfig.spec.json",
               "e2e/tsconfig.json"
             ],
-            "exclude": ["**/node_modules/**"]
+            "exclude": [
+              "**/node_modules/**"
+            ]
           }
         },
         "e2e": {
@@ -126,9 +134,13 @@
               "devServerTarget": "angular-component-library:serve:production"
             }
           }
+        },
+        "deploy": {
+          "builder": "angular-cli-ghpages:deploy",
+          "options": {}
         }
       }
     }
   },
   "defaultProject": "angular-component-library"
-}
+}

package-lock.json

@@ -16,7 +16,7 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "build:ci": "npm run clean && npm run test && npm run build:prod",
-    "deploy:github-pages": "ng build --prod --base-href 'https://chapi-chapi.github.io/angular-component-library/'",
+    "deploy:github-pages": "ng deploy --base-href=/angular-component-library/ --name=\"rogue-elephant\" [email protected]",
     "start:proxy:mock:server": "concurrently --kill-others \"npm run mock:server\" \"npm run start:proxy\"",
     "package:mock-api": "ng-packagr -p ./src/app/shared/interceptors/mock-api/package.json",
     "package:publish:mock-api": "npm publish ./dist/packages/@chapichapi/mock-api --access public"
@@ -48,6 +48,7 @@
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
+    "angular-cli-ghpages": "^0.6.2",
     "codelyzer": "^5.1.2",
     "concurrently": "^5.1.0",
     "jasmine-core": "~3.5.0",

package.json

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { ProductsComponent } from './pages/components/components.component';
+import { ComponentsComponent } from './pages/components/components.component';
 
 
 const routes: Routes = [
   {
     path: 'components',
-    component: ProductsComponent
+    component: ComponentsComponent
   },
   { path: '',
     redirectTo: '/components',

src/app/app-routing.module.ts

@@ -4,7 +4,7 @@ import { NgModule } from "@angular/core";
 import { AppRoutingModule } from "./app-routing.module";
 import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
 import { AppComponent } from "./app.component";
-import { ProductsComponent } from "./pages/components/components.component";
+import { ComponentsComponent } from "./pages/components/components.component";
 import { RouterModule } from "@angular/router";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { FlexLayoutModule } from "@angular/flex-layout";
@@ -38,12 +38,13 @@ import { environment } from 'src/environments/environment';
 
 const mockApi : IMockInterceptorData[] = [
   {
-    url: "/api/products",
+    url: "/api/components",
     httpVerb: "GET",
     data: [
       {
-        name: "Product A",
-        description: "Some new product",
+        name: "Mock Api",
+        subtitle: "Interceptor",
+        description: "Provides an interceptor for mocking API calls.",
         insertedUtc: new Date(),
         updatedUtc: new Date(),
       },
@@ -54,7 +55,7 @@ const mockApi : IMockInterceptorData[] = [
 @NgModule({
   declarations: [
     AppComponent,
-    ProductsComponent,
+    ComponentsComponent,
     LoaderComponent,
   ],
   imports: [

src/app/app.module.ts

@@ -1,6 +1,7 @@
 <h1>Components</h1>
+<h3>Below is a list of available components</h3>
 
 <chapichapi-card-list
-  [cards$]="products$"
+  [cards$]="components$"
   [itemDetailsLink]="'/update-product'"
 ></chapichapi-card-list>

src/app/pages/components/components.component.html

@@ -1,25 +1,25 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ProductsComponent } from './components.component';
+import { ComponentsComponent } from './components.component';
 import { ApiService } from '../../shared/services/api.service';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { RouterTestingModule } from '@angular/router/testing';
 
-describe('ProductsComponent', () => {
-  let component: ProductsComponent;
-  let fixture: ComponentFixture<ProductsComponent>;
+describe('ComponentsComponent', () => {
+  let component: ComponentsComponent;
+  let fixture: ComponentFixture<ComponentsComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProductsComponent ],
+      declarations: [ ComponentsComponent ],
       providers: [ApiService, HttpClient],
       imports: [HttpClientModule, RouterTestingModule]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ProductsComponent);
+    fixture = TestBed.createComponent(ComponentsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });