Deploy to Github Pages (#70)

jojozhuang · web-flow · commit d6a95d717c05 · 2025-11-15T10:33:37.000-08:00
* Deploy to Github Pages

* trigger build

* add back homepage

* add hash

* add base url for monaco

* update base href

* add deploy url

* hard code url

* configure base herf with env vairables

* update build for pages

* add build for github page deployment

* remove base href

* remove href from build

* fix build env

* fix test

* revert to main

* keep original layout for netlify
diff --git a/.github/workflows/main_github_pages.yml b/.github/workflows/main_github_pages.yml
@@ -0,0 +1,32 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.x'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Angular app
+        run: npm run build:pages2
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages
+          folder: dist/browser
+          clean: true
diff --git a/.gitignore b/.gitignore
@@ -35,6 +35,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+/cypress/screenshots/
 /cypress/videos/
 /cypress/downloads/
 
diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ Three available demos:
 * `Live Demo on Netlify:` <a href="https://text-compare.netlify.app/" target="\_blank">https://text-compare.netlify.app/</a>
 * `Live Demo on Render:` <a href="https://text-compare.onrender.com/" target="\_blank">https://text-compare.onrender.com/</a>
 * `Live Demo on Azure:` <a href="https://text-compare.azurewebsites.net/" target="\_blank">https://text-compare.azurewebsites.net/</a>
+* `Live Demo on GitHub Page:` <a href="https://bit-developer.github.io/text-compare-angular/" target="\_blank">https://bit-developer.github.io/text-compare-angular/</a>
 
 *Note: The demo websites may be slow when you access them for the first time. Be patient!*
 
diff --git a/angular.json b/angular.json
@@ -99,6 +99,44 @@
                 }
               ]
             },
+            "pages": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.pages.ts"
+                }
+              ]
+            },
+            "pages2": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.pages2.ts"
+                }
+              ]
+            },
             "nas": {
               "budgets": [
                 {
@@ -156,6 +194,12 @@
             "render": {
               "buildTarget": "text-compare-angular:build:render"
             },
+            "pages": {
+              "buildTarget": "text-compare-angular:build:pages"
+            },
+             "pages2": {
+              "buildTarget": "text-compare-angular:build:pages2"
+            },
             "nas": {
               "buildTarget": "text-compare-angular:build:nas"
             },
diff --git a/package.json b/package.json
@@ -9,12 +9,18 @@
   "scripts": {
     "start": "ng serve",
     "start:prod": "ng serve --configuration production",
+    "start:azure": "ng serve --configuration azure",
+    "start:netlify": "ng serve --configuration netlify",
+    "start:render": "ng serve --configuration render",
+    "start:pages": "ng serve --configuration pages",
     "start:nas": "ng serve --configuration nas",
-    "start:mock": "node server.js",
+    "start:server": "node server.js",
     "build": "ng build --configuration production",
     "build:azure": "ng build --configuration azure",
     "build:netlify": "ng build --configuration netlify",
     "build:render": "ng build --configuration render",
+    "build:pages": "ng build --configuration pages",
+    "build:pages2": "ng build --configuration pages2 --base-href /text-compare-angular/",
     "build:nas": "ng build --configuration nas",
     "build:cross:env": "rimraf dist compiled && cross-env SOURCE_MAP=0 ng build --configuration production",
     "test": "ng test",
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { HomeComponent } from './home/home.component';
+import { CompareEditorComponent } from './compare-editor/compare-editor.component';
+import { environment } from '../environments/environment';
+
+const defaultComponent = environment.envName === 'Netlify'
+  ? CompareEditorComponent
+  : HomeComponent;
+
+const routes: Routes = [
+  { path: '', component: defaultComponent },
+  { path: 'home', component: HomeComponent },
+  { path: 'textcompare', component: CompareEditorComponent },
+  // otherwise redirect to home
+  { path: '**', redirectTo: '' },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -17,6 +17,6 @@ describe('AppComponent', () => {
   it('should have as title app', waitForAsync(async () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance as AppComponent;
-    await expect(app.title).toEqual('app');
+    await expect(app.title).toEqual('Text Compare');
   }));
 });
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -7,5 +7,5 @@ import { Component } from '@angular/core';
   standalone: false
 })
 export class AppComponent {
-  title = 'app';
+  title = 'Text Compare';
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { APP_BASE_HREF } from '@angular/common';
 
 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
@@ -12,7 +12,8 @@ import { FormsModule } from '@angular/forms';
 import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 
 // routes
-import { appRoutes } from './app.route';
+import { AppRoutingModule } from './app-routing.module';
+import { environment } from '../environments/environment';
 
 @NgModule({
   declarations: [
@@ -25,10 +26,12 @@ import { appRoutes } from './app.route';
   imports: [
     BrowserModule,
     FormsModule,
-    MonacoEditorModule.forRoot(),
-    RouterModule.forRoot(appRoutes, {})
+    AppRoutingModule,
+    MonacoEditorModule.forRoot({
+      baseUrl: environment.monacoBaseUrl
+    })
   ],
-  providers: [],
+  providers: [{ provide: APP_BASE_HREF, useValue: environment.baseHref }],
   bootstrap: [AppComponent]
 })
 export class AppModule {}
diff --git a/src/app/app.route.ts b/src/app/app.route.ts
diff --git a/src/app/compare-editor/compare-editor.component.html b/src/app/compare-editor/compare-editor.component.html
@@ -2,7 +2,7 @@
   <div class="text-center">
     <h1>Text Compare</h1>
     <p>
-      Built with <a href="https://angular.io/">Angular</a> and
+      Built with <a href="https://angular.dev/">Angular</a> and
       <a href="https://microsoft.github.io/monaco-editor"
         >Monaco Editor</a
       >
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -1,10 +1,18 @@
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <!-- Links -->
-  <ul class="navbar-nav">
+  <ul class="navbar-nav" *ngIf="envName==='Netlify'">
     <li [ngClass]="{ 'nav-item': true, active: router.url === '/' }">
       <a class="nav-link nav-home" routerLink="/">Text Compare</a>
     </li>
   </ul>
+  <ul class="navbar-nav" *ngIf="envName!=='Netlify'">
+    <li [ngClass]="{ 'nav-item': true, active: router.url === '/' }">
+      <a class="nav-link nav-home" routerLink="/">Home</a>
+    </li>
+    <li [ngClass]="{ 'nav-item': true, active: router.url === '/textcompare' }">
+      <a class="nav-link nav-home" routerLink="/textcompare">Text Compare</a>
+    </li>
+  </ul>
   <span class="badge badge-success" *ngIf="envName">
     {{ envName }}
   </span>
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
@@ -14,6 +14,6 @@ export class HeaderComponent implements OnInit {
   protected router = inject(Router);
 
   ngOnInit() {
-    this.envName = environment.env_name;
+    this.envName = environment.envName;
   }
 }
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -1,4 +1,4 @@
 <div class="jumbotron text-center">
   <h1> Angular - Text Compare Tool</h1>
-  <p>Built with <a href="https://angular.io/">Angular</a> and <a href="https://microsoft.github.io/monaco-editor">Monaco Editor</a></p>
+  <p>Built with <a href="https://angular.dev/">Angular</a> and <a href="https://microsoft.github.io/monaco-editor">Monaco Editor</a></p>
 </div>
diff --git a/src/environments/environment.azure.ts b/src/environments/environment.azure.ts
@@ -1,4 +1,6 @@
 export const environment = {
   production: true,
-  env_name: 'Azure'
+  envName: 'Azure',
+  baseHref: '/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
 };
diff --git a/src/environments/environment.nas.ts b/src/environments/environment.nas.ts
@@ -1,4 +1,6 @@
 export const environment = {
   production: true,
-  env_name: 'Nas'
+  envName: 'Nas',
+  baseHref: '/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
 };
diff --git a/src/environments/environment.netlify.ts b/src/environments/environment.netlify.ts
@@ -1,4 +1,6 @@
 export const environment = {
   production: true,
-  env_name: 'Netlify'
+  envName: 'Netlify',
+  baseHref: '/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
 };
diff --git a/src/environments/environment.pages.ts b/src/environments/environment.pages.ts
@@ -0,0 +1,6 @@
+export const environment = {
+  production: true,
+  envName: 'GitHub Pages',
+  baseHref: '/text-compare-angular/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
+};
diff --git a/src/environments/environment.pages2.ts b/src/environments/environment.pages2.ts
@@ -0,0 +1,6 @@
+export const environment = {
+  production: true,
+  envName: 'GitHub Pages',
+  baseHref: '/',
+  monacoBaseUrl: '/text-compare-angular/assets/monaco/min/vs'
+};
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
@@ -1,4 +1,6 @@
 export const environment = {
   production: true,
-  env_name: 'Production'
+  envName: 'Production',
+  baseHref: '/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
 };
diff --git a/src/environments/environment.render.ts b/src/environments/environment.render.ts
@@ -1,4 +1,6 @@
 export const environment = {
   production: true,
-  env_name: 'Render'
+  envName: 'Render',
+  baseHref: '/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
@@ -5,5 +5,7 @@
 
 export const environment = {
   production: false,
-  env_name: 'Local'
+  envName: 'Local',
+  baseHref: '/',
+  monacoBaseUrl: '/assets/monaco/min/vs'
 };

Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,5 @@ import { Component } from '@angular/core';`
`7`	`7`	`standalone: false`
`8`	`8`	`})`
`9`	`9`	`export class AppComponent {`
`10`		`- title = 'app';`
	`10`	`+ title = 'Text Compare';`
`11`	`11`	`}`