From a5c4599f1e07e5ff3f03b7299f2ee48aba92bb1a Mon Sep 17 00:00:00 2001 From: yqni13 Date: Mon, 1 Jul 2024 14:18:06 +0200 Subject: [PATCH] fixed hosting problems --- .github/workflows/{main.yml => deploy.yml} | 7 ++- README.md | 26 ++++++---- package.json | 2 +- src/api/json/project-data.json | 4 +- src/app/app.component.html | 8 ++-- src/app/app.component.scss | 4 ++ src/app/app.component.ts | 50 +++++++++---------- src/app/cv/cv.component.html | 53 +++++++++++---------- src/assets/pdf/CV_LukasVarga.pdf | Bin 0 -> 93168 bytes src/assets/pdf/Varga_Lebenslauf.pdf | Bin 98841 -> 0 bytes src/docs/update_protocol.md | 22 ++++++--- src/stylesheets/icons.scss | 13 +++++ 12 files changed, 112 insertions(+), 77 deletions(-) rename .github/workflows/{main.yml => deploy.yml} (79%) create mode 100644 src/assets/pdf/CV_LukasVarga.pdf delete mode 100644 src/assets/pdf/Varga_Lebenslauf.pdf diff --git a/.github/workflows/main.yml b/.github/workflows/deploy.yml similarity index 79% rename from .github/workflows/main.yml rename to .github/workflows/deploy.yml index d5cdc29..baf1e8d 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/deploy.yml @@ -29,9 +29,8 @@ jobs: run: npm run build:prod - name: Deploy to GitHub Pages - uses: crazy-max/ghaction-github-pages@v4 - with: - target_branch: gh-pages - build_dir: dist/portfolio + run: + npx angular-cli-ghpages --dir=dist/portfolio --repo=https://github.com/yqni13/portfolio.git --base-href=/portfolio/ --branch=production + env: GH_PAT: ${{ secrets.PORTFOLIO_PAT }} diff --git a/README.md b/README.md index 6c8ba57..8f44503 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,7 @@ # yqni13 portfolio -$\texttt{\color{teal}{v2.5.0}}$ +$\texttt{\color{teal}{v2.5.5}}$ -
-$\texttt{\color{red}{!\ !\ !\ }}$
-Currently deployment via angular-cli-ghpages does NOT work for this portfolio. That is why the deployment is running on the 'production' branch instead of the 'gh-pages' branch, which apparently DOES NOT SUPPORT angular multi page applications. Refreshing the webpage will lead to 404 and homepage must be navigated to https://yqni13.github.io/portfolio again. The new version is build into '/docs' folder (hosting is set to check all necessary files in there) and normally merged into 'production' branch. Please note that I am working on this issue parallel to some security vulnerabilities and updating to Angular 18. -
-$\texttt{\color{red}{!\ !\ !\ }}$

@@ -36,7 +31,12 @@ This project was generated with [Angular CLI](https://github.com/angular/angular Get startet with `npm install` to create necessary modules and run `ng serve` to start on local dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. ### BUILD & DEPLOY -To host the application on GitHub Pages directly from CLI, install the regarding package via `ng add angular-cli-ghpages`. See list of packages for different hosting platforms deployed by command. Firstly, try the production build locally via command `ng serve --configuration production` to see, if there are differences between development and production build. Run `ng build --configuration production --base-href https://.github.io/` to create a deployable build in the folder /dist. For deployment, run `ng deploy --base-href=//` to push the necessary code automatically and trigger the workflow starting until project on 'https://username.github.io/projectname' is deployed. In contrast to my non-framework projects, the deployment will happen for angular projects on the 'gh-pages' branch due to the CLI-deployment instead of a 'production' branch. +Hosting an Angular project via GitHub-Pages needs a bit more effort. Firstly, install the regarding package via `ng add angular-cli-ghpages`. See list of packages for different hosting platforms deployed by cli. Run tests locally to avoid failed deployments ([see 'Testing'](#testing)). To host the application on GitHub, a customized CI/CD workflow is used which automatically starts when code changes are merged into the 'master' branch. By adding 'deploy.yml' to .github/workflows folder (folder starts from same level as angular.json), the run script will execute tests (ESLint and Angular unit-tests) before building the project and deploying it via angular-cli-ghpages on the predefined 'production' branch. All commands to run are keys in 'deploy.yml' and full commands as value for the keys in 'package.json' to find. +

+build:prod >> `ng build --configuration production --base-href https://.github.com/` +
+deploy >> `npx angular-cli-ghpages --dir=dist/ --repo=https://github.com//.git --base-href=// --branch=production` +

## Features @@ -115,11 +115,21 @@ To optimize work I use the VS Code extension 'ESLint' from Microsoft.
+### Angular unit tests & other tests + +Specified unit tests in xyz.component.spec.ts files or other tests are my last step of testing locally and in the CI/CD workflow. Run the following command in Powershell/Terminal:
+`ng test --browsers=ChromeHeadless --watch=false --code-coverage` + +
+ ## Updates [list of all updates](src/docs/update_protocol.md) -### $\textsf{last\ update\ 2.5.0\ >>\ {\color{pink}2.5.?}}$ +### $\textsf{last\ update\ 2.5.0\ >>\ {\color{pink}2.5.5}}$ +- $\textsf{\color{red}Patch:}$ Addressing webpage stability issues: Disabled error alert because of fixed hosting. +- $\textsf{\color{red}Bugfix:}$ Default unit tests have all necessary declarations and imports. [Before: Template was not recognised as existing component because unit tests were missing the regarding declarations and imports.] +- $\textsf{\color{red}Bugfix:}$ Hosting works again (refreshing does not lead to error 404) and CI/CD pipeline adapted. [Before: Necessary options in deployment command missing. Customized workflow was missing.] - $\textsf{\color{red}Bugfix:}$ Navigating to other page in menu resets scroll to top position (refresh gets back to current scroll position). [Before: Scroll position was used for next page so that it didn't start at top.] - $\textsf{\color{red}Bugfix:}$ The component 'portfolio' shows the correct number of cards with the regarding data. [Before: Due to change of ESLint errors, json data was fetched by import but loaded single objects additional to default collection of objects. Needed adaption in import command to load data only from default.] diff --git a/package.json b/package.json index 7387015..a85a54a 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "ng": "ng", "start": "ng serve", "build": "ng build", - "build:prod": "ng build --configuration production --deploy-url /portfolio/", + "build:prod": "ng build --configuration production --base-href https://yqni13.github.com/portfolio", "watch": "ng build --watch --configuration development", "test": "ng test", "test:prod": "ng test --browsers=ChromeHeadless --watch=false --code-coverage", diff --git a/src/api/json/project-data.json b/src/api/json/project-data.json index 84bc4b9..c11d5a8 100644 --- a/src/api/json/project-data.json +++ b/src/api/json/project-data.json @@ -141,8 +141,8 @@ "Portfolio": { "type": "frontend", "title": "Portfolio", - "version": "2.5.0", - "keywords": "live demo | portfolio | angular framework | english | responsive | custom design | dark/light theme | animation | custom search filter | template | multi page layout | custom alert", + "version": "2.5.5", + "keywords": "live demo | portfolio | angular framework | english | responsive | custom design | dark/light theme | animation | custom search filter | template | multi page layout | custom alert | ESLint | CI/CD Workflow", "technology": "Angular | RxJS | JSON", "cardScreenPath": "assets/img/web_portfolio.jpg", "githublink": "https://github.com/yqni13/portfolio", diff --git a/src/app/app.component.html b/src/app/app.component.html index 9a10f71..283444d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -30,8 +30,8 @@
  • - +