The Planner is an Angular app built on top of Node.js. It can run as a standalone app, or be used as a library to be integrated into another app, like Fabric8 UI.
Development or deployment of Planner is fairly platform agnostic, so we can skip the operating system requirements and discuss from the runtime environment onward.
Planner uses Node.js as the platform-runtime, on top of which it builds; and npm for resolving and distributing packages for the project.
We keep ourselves compatible with the latest stable releases of Node.js & npm - however, Node.js >= 6.xx & npm >= 3.xx releases are recommended.
Following are the components or parts of the process followed in order to develop, build, test and deploy Planner. Most of these components are standard, with limited project specific customizations and configurations applied.
- Task Runner
-
We use Gulp for running predefined tasks. These tasks include, compiling or preprocessing the LESS/TypeScript sources into CSS/JS, building the distributable artifacts, running dev-server in watch mode and general house-keeping (install, reinstall, cleanup etc).
- Build System
-
We use both Gulp and webpack for building the source. While Gulp takes care of the library builds, webpack is used for building the (minimal)
./runtimeto use the library, which makes Planner work as a standalone app. The build system works as intended for now, but can be expanded to use more sophisticated switches to build according to different needs (dev, tests, prod etc). - Test Framework
-
Our test stack is built with Karma, Protractor and Google Chrome. Google Chrome provides the browser engine to run the tests. Protractor interacts with it as a WebDriverJS wrapper and runs the tests according to Karma’s configurations.
Each filename.ts file is supposed to have unit tests along with them as a filename.spec.ts in the same parent directory. The functional tests reside inside ./runtime/tests/. For more details about running the tests, please look into Testing Documentation.
- CI/CD
-
The CI/CD pipeline is made with Jenkins, as defined in the
./Jenkinsfileat the root of the repo. It uses the content of./deploy(more specifically,./deploy/release.groovy) to orchestrate the CI/CD. - Release Framework
-
We use semantic-release for versioning and publishing our Planner library to npm registry. It’s fairly configuration less CLI task (
$ npm run semantic-release) which takes the latest PR, merges and commit messages into account. It generates the new version number, publishes to npm registry, and then generates the release tag on GitHub in one simple process. - Deployment
-
At the end of the day Planner is a static library, and can be used or served with minimal static frontend runtime as a standalone app or with a full fledged Fabric8 UI. So any deployment stack that can make those setups run, can essentially be the deployment platform for Planner.
We use Docker Compose to generate the image, Docker for running the built app container, and nginx as the web server to serve the app contents.
We use Angular 4 to develop Planner. Main application code resides in ./src, in which the ./src/app contains all the application logic, subdivided into specific functional groups. For the minimalistic runtime added to make Planner work standalone, the source lies inside ./runtime/src/app which is also an Angular 4 app in itself.
For development ease, we do not use HTML, CSS, JS as is, but Angular Templates, Less and TypeScript instead. For UI elements and components, we use PatternFly v3.
This requires us to pre-process and build the source-codes into consumable package, but that is automated and this overall accelerates the development process and eases code maintenance.