This repository contains a Web App for my blog / CV and topics about me. This project should tell a bit about me, Michael Alekseew, as a person and developer.
The WebApp to this project can be found here: alekseew - WebApp
The GitHub Page to this project / repo can be found here: alekseew - GitHub Page
Also I want to try out some libraries, frameworks, plugins, concepts, architectures, ... with this repo. Following are currently included:
| Nr. | Topic | Framework & Link |
|---|---|---|
| 01. | Source Control Branching-Model | GitFlow |
| 02. | Frontend WebApp Platform / Framework | Angular |
| 03. | Development Language | Typescript |
| 04. | (Development Language) | (JavaScript) |
| 05. | WebApp UI Library | Angular Material |
| 06. | WebApp UI "Behavior" Library | Angular CDK |
| 07. | Code-Formatting | Prettier |
| 08. | Versioning, Changelog | Standard-Version |
| 09. | Commit Message Tool | Commitizen |
| 10. | Git-Hooks Tool | Husky |
| 11. | Animations | Lottie |
| 12. | Animations | Lottie-Web |
| 13. | Server Side Rendering (SSR) | Angular Universal |
| 14. | Hosting and more... | FireBase |
| 15. | Continuos Integration (CI) | Travis |
| 16. | Dependency Monitoring | Greenkeeper |
will be continued ...
- alekseew - Michael Alekseew
This project requires the following dependencies to be installed beforehand:
- Node.js
- NPM
To install all needed dependencies just run:
npm installThis also setup's up the git commit message template (and set the wip package to use commitizen).
Please use the GitFlow branching model and the default names for the branches of SourceTree in this project, more information's can be found here:
| Kind | Setting |
|---|---|
| Production branch | master |
| Development branch | develop |
| Feature branch prefix | feature/ |
| Release branch prefix | release/ |
| Hotfix branch prefix | hotfix/ |
| No Version tag prefix | (the Tag names will be for example v0.1.0) |
In this project (angular) conventional commits Angular Commit Message Guidelines are used.
They will be used to auto generate the changelog with the npm package standard-version, to do this just run npm run release.
This will do following task:
- Update the project version
- Generate / update the CHANGELOG.md
- Commit this changes (ready to push to remote)
- Generate a git tag
You can use npm run commit to get a wizard that helps you to write the correct commit messages (this is done with commitizen).
Also the commit messages will be checked that they are correct with commitlint (if you really need to skip it, you can bypass the githooks, but you should not do it normally).
You can generate a git commit message template with npm run prepare-git-commit-template, this will also be done during npm install.
The header (consist of type, scope and subject) should not be longer than 72 characters.
type(scope?): subject
body?
footer?
Must be one of the following:
| Type | Description |
|---|---|
| feat | A new feature |
| fix | A bug fix |
| docs | Documentation only changes |
| style | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) |
| refactor | A code change that neither fixes a bug nor adds a feature |
| perf | A code change that improves performance |
| test | Adding missing tests or correcting existing tests |
| build | Changes that affect the build system, CI configuration or external dependencies (gulp, broccoli, npm, ...) |
| ci | Changes to our CI configuration files and scripts (Travis, Circle, BrowserStack, SauceLabs, ...) |
| chore | Other changes that don't modify src or test files |
| revert | Reverts a previous commit |
The scope could be anything specifying place of the commit change. I am using following conventions (examples):
| Scope | Description |
|---|---|
| all | changes for the whole project (general project release, ...) |
| root | changes in the root (folder) of the project |
| be | changes in the backend part of the project |
| fe | changes in the frontend part (webapp) of the project |
The subject contains succinct description of the change:
- use the imperative, present tense: "change" not "changed" nor "changes"
- don't capitalize first letter
- no dot (.) at the end
Just as in the subject, use the imperative, present tense: "change" not "changed" nor "changes". The body should include the motivation for the change and contrast this with previous behavior.
The footer should contain any information about Breaking Changes and is also the place to reference issues that this commit Closes.
Breaking Changes should start with the word BREAKING CHANGE: with a space or two newlines.
The rest of the commit message is then used for this.
In this repo git hooks are used (setup with husky) to check for "clean" source code.
If Typescript or SCSS files are changed and pushed a commit hook is triggered and the staged files are formatted with prettier. It does the formating / changes and commits and pushes this changes, with the help of pretty-quick.
Checks if the git commit message is a conventional git commit message, otherwise it will cancel the commit.
The last commit on the release branch should set the project version and generate the Changelog, this should be done with npm run release.
This set's the project version, generates the changelog and commits this changes.
More information's can be found under the chapter: Conventional Changelog / Commits
On this project Travis CI is setup as lint-, test-, e2e-tests- and build-slave. If everything was tested and build successfully Travis CI will deploy the WebApp to FireBase.