VTS Kit Angular NX Plugin

VTS Kit Angular NX Plugin is a collection of generators to be integrated with Nx Workspace. This library aims to provide a quick way to start a new Angular Project and maintain code structure with least effort.

Requirement

Node: 12+
Npm: 6+ (included in Node installation)
Npx: 6+ (included in Node installation)

Intergrated Features

Custom Webpack (Guideline)
UI Component: VTS UI Kit (Guideline + Home)
Localization: @ngx-translate/core (Guideline + Git)
Network Utilities: VTS Kit Angular Utilities (Guideline + Git)
Validator Utilities: VTS Kit Angular Utilities (Guideline + Git)
Common Utilities: VTS Kit Angular Common (Guideline + Git)
Bundle Analyze: webpack-bundle-analyzer (Guideline + Git + NPM)
CICD (Jenkin + Docker) intergrated (Guideline)
Dynamic Environment (Guideline)
3rd party integration (Guideline + Git)

Quickstart

Create a new workspace using VTS Kit Angular NX Plugin:

npx @vts-kit/nx-angular@latest

Structure

.
└── <workspace_name>/
    ├── apps/
    │   └── <app_name>/
    │       ├── src/
    │       │   ├── app/
    │       │   │   ├── app.module.ts           // Root component
    │       │   │   ├── app.component.ts        // Root component, bootstrap
    │       │   │   ├── app.component.spec.ts   // Root component, test
    │       │   │   ├── app.component.html      // Root component, outlet
    │       │   │   ├── configs.ts              // Provider, import configs
    │       │   │   └── routes.ts               // RouterModule config, lazy load to feature libraries
    │       │   ├── assets/                     // Public assets
    │       │   │   └── locale/                 // Translation dictionary
    │       │   │       ├── en.json             // JSON dictionary
    │       │   │       └── vi.json             // JSON dictionary
    │       │   ├── environments/               // Environment config
    │       │   |    ├── environment.ts         // Environment profile
    │       │   |    └── environment.prod.ts    // Environment profile
    │       │   └── styles/                     // Global styles
    │       ├── webpack/                        // Webpack config
    │       │   ├── webpack.config.js           // Webpack profile
    │       │   └── webpack.config.prod.js      // Webpack profile
    │       ├── project.json                    // Nx Project configuration
    │       ├── tsconfig(.|lib|spec).json       // Tsconfig
    │       ├── favicon.ico                     // Angular starter files
    │       ├── index.html                      // Angular starter files
    │       ├── main.ts                         // Angular starter files
    │       ├── polyfills.ts                    // Angular starter files
    │       └── test.ts                         // Angular starter files
    ├── libs/                                   // Shared modules and feature modules
    │   ├── layout/                             // Feature group, layout
    │   │   ├── ui/                             // Library (generatable)
    │   │   │   ├── src/
    │   │   │   │   ├── index.ts                // Automatically exporter on generating
    │   │   │   │   └── lib/
    │   │   │   │       ├── <topbar>            // Standalone UI components, unit (generatable)
    │   │   │   │       └── <sider>             // Standalone UI components, unit (generatable)
    │   │   │   ├── project.json                // NX Project configuration
    │   │   │   └── tsconfig(.|lib|spec).json   // Tsconfig
    │   │   ├── feature/                        // Library (generatable)
    │   │   │   ├── src/
    │   │   │   │   ├── index.ts                // Automatically exporter on generating
    │   │   │   │   └── lib/
    │   │   │   │       ├── <dasboard_layout>   // Standalone UI components, container (ultilize units in template)
    │   │   │   │       ├── <home_layout>       // Standalone UI components, container (ultilize units in template)
    │   │   │   │       ├── routes.ts           // RouterModule config, lazy load
    │   │   │   │       └── *.module.ts
    │   │   │   ├── project.json                // NX Project configuration
    │   │   │   └── tsconfig(.|lib|spec).json   // Tsconfig
    │   │   └── data-access/                    // Library (generatable)
    │   │       ├── src/
    │   │       │   ├── index.ts                // Automatically exporter on generating
    │   │       │   └── lib/
    │   │       │       └── <store_1>           // State management, store
    │   │       ├── project.json                // NX Project configuration
    │   │       └── tsconfig(.|lib|spec).json   // Tsconfig
    │   ├── <feature_product>/                  // Feature group (generatable)
    │   │   ├── ui/                             // Library (generatable)
    │   │   │   ├── src/
    │   │   │   │   ├── index.ts                // Automatically exporter on generating
    │   │   │   │   └── lib/
    │   │   │   │       ├── <product_form>      // Standalone UI components, unit (generatable)
    │   │   │   │       └── <product_table>     // Standalone UI components, unit (generatable)
    │   │   │   ├── project.json                // NX Project configuration
    │   │   │   └── tsconfig(.|lib|spec).json   // Tsconfig
    │   │   ├── feature/                        // Library (generatable)
    │   │   │   ├── src/
    │   │   │   │   ├── index.ts                // Automatically exporter on generating
    │   │   │   │   └── lib/
    │   │   │   │       ├── <list_screen>       // Standalone UI components, container (ultilize units in template)
    │   │   │   │       ├── <detail_screen>     // Standalone UI components, container (ultilize units in template)
    │   │   │   │       ├── routes.ts           // RouterModule config, lazy load
    │   │   │   │       └── *.module.ts
    │   │   │   ├── project.json                // NX Project configuration
    │   │   │   └── tsconfig(.|lib|spec).json   // Tsconfig
    │   │   └── data-access/                    // Library (generatable)
    │   │       ├── src/
    │   │       │   ├── index.ts                // Automatically exporter on generating
    │   │       │   └── lib/
    │   │       │       ├── <item_state>        // State management, store
    │   │       │       └── <filter_state>      // State management, store
    │   │       ├── project.json                // NX Project configuration
    │   │       └── tsconfig(.|lib|spec).json   // Tsconfig
    │   └── share/
    │       └── guards/                         // Library, publishable (generatable)
    │       ├── interceptors/                   // Library, publishable (generatable)
    │       ├── data-access/                    // Library, publishable (generatable)
    │       ├── pipes/                          // Library, publishable (generatable)
    │       ├── services/                       // Library, publishable (generatable)
    │       ├── ui/                             // Library, publishable (generatable)
    │       ├── utils/                          // Library, publishable (generatable)
    │       └── validators/                     // Library, publishable (generatable)
    ├── package.json
    ├── nx.json                                 // NX Workspace configuration
    └── tsconfig.base.json                      // Tsconfig, automatically update project alias

Using NX generators to generate necessary items and keep structure sync.

Generators

Schematics

No	Name	Description
1	Library	Creates an Angular library.
2	Feature Group	Generate an Angular Feature group.
3	Component	Generate an Angular Component.
4	Directive	Generate an Angular Directive.
5	Pipe	Generate an Angular Pipe.
6	Service	Generate an Angular Service.
7	Class	Generate an Angular Class.
8	Interface	Generate an Angular Interface.
9	Enum	Generate an Angular Enum.
10	Guard	Generate an Angular Guard.
11	Interceptor	Generate an Angular Interceptor.
12	Resolver	Generate an Angular Resolver.
13	Validator	Generate an Angular Validator.
14	Template	Generate a feature group template.

Usage

Using Nx CLI

Make sure NX CLI has been installed.

npm i -g nx

Using VTS Kit generators.

nx g @vts-kit/nx-angular:<generator_name> <generator_args>

Using Nx Console (GUI)

Install Nx Console in VSCode

Using generator:
- Option 1: Select generate Nx Console Tab and select a generator
  - Option 2: Right click on a library and select nx generate in context menu
Fill in options

Preview changes

Press Run to make changes

Generator: Library

No	Name	Description	Type	Require	Default
1	name	The name of the library.	string	✔
2	directory	A directory where the library is placed.	string		false
3	publishable	Generate a publishable library. Must specify importPath for other projects be able to import it.	boolean		false
4	importPath	The library name used to import it, like `@organize/lib-name`. Must be a valid npm name.	string
5	buildable	Generate a buildable library.	boolean		false
6	skipPackageJson	Do not add dependencies to `package.json`.	boolean		false
7	skipTsConfig	Do not update `tsconfig.json` for development experience.	boolean		false
8	tag	Add tags to the library (used for linting)	string
9	unitTestRunner	Test runner to use for unit tests.	`karma` `jest` `none`		`jest`
10	strict	Create a library with stricter type checking and build optimization options.	boolean		true
11	linter	The tool to use for running lint checks.	`eslint` `none`		`eslint`
12	compilationMode	Specifies the compilation mode to use. If not specified, it will default to `partial` for publishable libraries and to `full` for buildable libraries. The `full` value can not be used for publishable libraries.	`full` `partial`		`depend`
13	feature	Generate additional NgModule and Routing config with library. Every component generated inside feature library will automatically create a route to it.	boolean		false
14	appRoutingProject	(Only work with feature library) The name of the app where feature will be imported for routing. Only projects of application are valid	string		`defaultProject`

Generator: Feature Group

No	Name	Description	Type	Require	Default
1	name	The name of the feature group.	string
2	appRoutingProject	(Only work with feature library) The name of the app where feature will be imported for routing. Only projects of application are valid	string		`defaultProject`

Generator: Component

No	Name	Description	Type	Require	Default
1	path	The path at which to create the component file, relative to the selected project (/src/(lib\|app)/<relative_path>) or relative to workspace (<root_workspace>/<relative_path>).	string
2	project	The name of the project.	string		`defaultProject`
3	name	The name of the component.	string	✔
4	displayBlock	Specifies if the style will contain `:host { display: block; }`.	boolean		false
5	inlineStyle	Include styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.	boolean		false
6	inlineTemplate	Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.	boolean		false
7	viewEncapsulation	The view encapsulation strategy to use in the new component.	`Emulated` `None` `ShadowDom`
8	changeDetection	The change detection strategy to use in the new component.	`Default` `OnPush`		`Default`
9	style	The file extension or preprocessor to use for style files, or `none` to skip generating the style file.	`scss` `css` `less`		`scss`
10	skipTests	Do not create `spec.ts` test files for the new component.	boolean		false
11	skipImport	Do not import this component into the owning NgModule.	boolean		false
12	skipSelector	Specifies if the component should have a selector or not.	boolean		false
13	selector	The HTML selector to use for this component.	string

Generator: Directive

No	Name	Description	Type	Require	Default
1	path	The path at which to create the directive file, relative to the selected project (/src/(lib\|app)/<relative_path>) or relative to workspace (<root_workspace>/<relative_path>).	string
2	project	The name of the project.	string		`defaultProject`
3	name	The name of the directive.	string	✔
4	prefix	A prefix to apply to generated selectors.	string
5	skipTests	Do not create `spec.ts` test files for the new directive.	boolean		false
6	selector	The HTML selector to use for this directive.	string

Generator: Pipe

No	Name	Description	Type	Require	Default
1	path	The path at which to create the pipe file, relative to the selected project (/src/(lib\|app)/<relative_path>) or relative to workspace (<root_workspace>/<relative_path>).	string
2	project	The name of the project.	string		`defaultProject`
3	name	The name of the pipe.	string	✔
4	skipTests	Do not create `spec.ts` test files for the new pipe.	boolean		false

Generator: Service

No	Name	Description	Type	Require	Default
1	path	The path at which to create the service file, relative to the selected project (/src/(lib\|app)/<relative_path>) or relative to workspace (<root_workspace>/<relative_path>).	string
2	project	The name of the project.	string		`defaultProject`
3	name	The name of the service.	string	✔
4	skipTests	Do not create `spec.ts` test files for the new service.	boolean		false

Generator: Class

No	Name	Description	Type	Require	Default
1	path	The path at which to create the service file, relative to the selected project (/src/(lib\|app)/<relative_path>) or relative to workspace (<root_workspace>/<relative_path>).	string
2	project	The name of the project.	string		`defaultProject`
3	name	The name of the class.	string	✔
4	skipTests	Do not create `spec.ts` test files for the new class.	boolean		false
5	type	Adds a developer-defined type to the filename, in the format "name..ts".	string

Generator: Interface

No	Name	Description	Type	Require	Default
1	path	The path at which to create the interface file, relative to the selected project (/src/(lib\|app)/<relative_path>) or relative to workspace (<root_workspace>/<relative_path>).	string
2	project	The name of the project.	string		`defaultProject`
3	name	The name of the interface.	string	✔
4	type	Adds a developer-defined type to the filename, in the format "name..ts".	string
5	prefix	Prefix to be added before interface name	string

Generator: Enum

No	Name	Description	Type	Require	Default
1	path	The path at which to create the enum file, relative to the selected project (/src/(lib\|app)/<relative_path>) or relative to workspace (<root_workspace>/<relative_path>).	string
2	project	The name of the project.	string		`defaultProject`
3	name	The name of the enum.	string	✔
4	type	Adds a developer-defined type to the filename, in the format "name..ts".	string

Generator: Guard

No	Name	Description	Type	Require	Default
1	path	The path at which to create the guard file, relative to the selected project (/src/(lib\|app)/<relative_path>) or relative to workspace (<root_workspace>/<relative_path>).	string
2	project	The name of the project.	string		`defaultProject`
3	name	The name of the guard.	string	✔
4	skipTests	Do not create `spec.ts` test files for the new guard.	boolean		false
5	implements	Specifies which route guards to implement (hold Ctrl to multiselect).	Multiple choice ["CanActivate", "CanActivateChild", "CanDeactivate", "CanLoad"]		["CanActivate"]

Generator: Interceptor

No	Name	Description	Type	Require	Default
1	path	The path at which to create the interceptor file, relative to the selected project (/src/(lib\|app)/<relative_path>) or relative to workspace (<root_workspace>/<relative_path>).	string
2	project	The name of the project.	string		`defaultProject`
3	name	The name of the interceptor.	string	✔
4	skipTests	Do not create `spec.ts` test files for the new interceptor.	boolean		false

Generator: Resolver

No	Name	Description	Type	Require	Default
1	path	The path at which to create the resolver file, relative to the selected project (/src/(lib\|app)/<relative_path>) or relative to workspace (<root_workspace>/<relative_path>).	string
2	project	The name of the project.	string		`defaultProject`
3	name	The name of the resolver.	string	✔
4	skipTests	Do not create `spec.ts` test files for the new resolver.	boolean		false

Generator: Validator

No	Name	Description	Type	Require	Default
1	path	The path at which to create the validator file, relative to the selected project (/src/(lib\|app)/<relative_path>) or relative to workspace (<root_workspace>/<relative_path>).	string
2	project	The name of the project.	string		`defaultProject`
3	name	The name of the validator.	string	✔
4	skipTests	Do not create `spec.ts` test files for the new validator.	boolean		false
5	type	Specifies type of validator.	["sync", "async"]	✔
6	form	Specifies type of Angular form in which validator be used (Reactive form / Template-driven form).	["reactive", "template"]	✔

Generator: Template

No	Name	Description	Type	Require
1	name	Name of feature group	string	✔
2	type	Type of template which will be created	["ErrorTemplate-NoLayout", "AuthenticationTemplate-WithLayout", "LandingTemplate-WithLayout"]	✔
3	layoutName	Name of layout feature will be generated in feature-group `layout`. Only neccessary if template type require a layout, check template description	string	✔

Feature Guideline

Feature: Custom webpack

Custom webpack unlock the ability to enhance web builder process.
VTS Kit Angular provides 2 profile of webpack on generating project. You find these files under app/<app_name>/webpack.config.<profile>.js.
You can also add another profile, but take note to register profile in app/<app_name>/project.json

Feature: UI Component

Please see full guideline in https://design.atviettelsolutions.com/uikit/

Feature: Localization

Translation dictionary can be found under app/<app_name>/src/assets/locale/. By default, VTS Kit generate 2 translation files which are Vietnamese and English. If you want to add new language, just create new JSON file under this folder and use TranslateService to use new language.

Config (Already declared on generating, maybe be overwritten)

Translation config is localed in app/<app_name>/src/app/configs.ts.

// configs.ts

import { TranslateLoader, TranslateModuleConfig } from '@ngx-translate/core';

class TranslateHttpLoader extends TranslateLoader {
  getTranslation(lang: string): Observable<any> {
    return from(fetch(`./assets/locale/${lang}.json`).then((d) => d.json()));
  }
}

export const TRANSLATE_MODULE_CONFIG: TranslateModuleConfig = {
  defaultLanguage: 'vi',
  loader: {
    provide: TranslateLoader,
    useClass: TranslateHttpLoader,
  },
};

By default, translation module is configured to use HTTP loader to load translation file from assets and use vi language.

Import (Already imported on generating)

// app.module.ts
@NgModule({
  imports: [
    TranslateModule.forRoot(TRANSLATE_MODULE_CONFIG)
  ]
})

Usage

Switch language

constructor(private translateService: TranslateService) {
  this.translateService.use('en')
}

Get current language:

this.translateService.currentLang;

Get translate:

Example dictionary

{
  "hello": {
    "world": "Xin chào {{name}}"
  }
}

Get translation using service

// Return value of string => Xin chào A
// Note: instant() require the TranslateModule has been loaded, if you're unsure about this, use get() or pipe
this.translateService.instant('hello.world', { name: 'A' });

// Return Observable of value of string
this.translateService
  .get('hello.world', { name: 'A' })
  .subscribe((d) => console.log(d)); // d = 'Xin chào A'

Get translation using pipe

// Will render paragraph of "Xin chào A"
<p>{{ 'hello.world' | translate:{name: 'A'} }}

Feature: Network

VTS KIT provides easy-to-config RestClient to interactive with RESTful API and some other network utilities.

Config (Already declared on generating, maybe be overwritten)

Network config is localed in app/<app_name>/src/app/configs.ts.

// configs.ts
import {
  RestClientOptions,
  VtsRestModuleConfig,
} from '@vts-kit/angular-network';

const NETWORK_MODULE_CONFIG: VtsRestModuleConfig = {
  defaultConfig: new RestClientOptions()
    .setBaseUrl('https://<base_api_url>')
    .setHeader('key', 'value')
    .setParam('key', 'value')
    .setRetry(3),
};

Import (Already imported on generating)

// app.module.ts
@NgModule({
  imports: [
    TranslateModule.forRoot(TRANSLATE_MODULE_CONFIG),
  ]
})

Usage

Pattern

client
  .setHeader("key", "value")
  .setTimeout(60000)
  ... // More builder
  .obserseBody() // or obserseEvents() or obserseResponse()
  .get("<path or url>") // or post, patch, put, options, delete
  .subscribe(...)

Example

// name.any.ts
import { RestClient } from '@vts-kit/angular-network';

@Injectable({
  providedIn: 'root',
})
export class Service {
  constructor(private client: RestClient) {}

  callApi() {
    this.client
      .obserseBody()
      .get<Post[]>('/posts')
      .subscribe({
        next: (d) => console.log(d[0].title),
        error: (e) => console.log(e),
      });
  }
}

Feature: Validation

VTS KIT provides common validation function to be used combine with Angular Validator to make form validation easier.

List of validator

No	Name	From	Description
1	required	`Angular Validators`	Whether input is required
2	requiredTrue	`Angular Validators`	Whether input is required to be true
3	email	`Angular Validators`	Whether input is a valid email format
4	min	`Angular Validators`	Whether input value to be greater than or equal to the provided number
5	max	`Angular Validators`	Whether input value to be less than or equal to the provided number
6	minLength	`Angular Validators`	Whether input length to be greater than or equal to the provided number
7	maxLength	`Angular Validators`	Whether input length to be less than or equal to the provided number
8	pattern	`Angular Validators`	Whether input value is matched a RegExe pattern
9	viettelMail	`VTS Kit Validators`	Whether input value is valid Viettel Email
10	ipAddress	`VTS Kit Validators`	Whether input value is valid ip address
11	ipAddressPort	`VTS Kit Validators`	Whether input value is valid ip address and port (<ip>:<port>)
12	url	`VTS Kit Validators`	Whether input value is valid url
13	[number]	`VTS Kit Validators`	Whether input can be convert to number
14	[number][numberType]	`VTS Kit Validators`	Whether input number is specific type (float, integer, any)
15	[number][larger]	`VTS Kit Validators`	Whether input number is greater than provided number
16	[number][largerOrEqual]	`VTS Kit Validators`	Whether input number is greater than or equal to provided number
17	[number][smaller]	`VTS Kit Validators`	Whether input number is less than provided number
18	[number][smallerOrEqual]	`VTS Kit Validators`	Whether input number is less than or equal to provided number

Usage

For template-driven form:

// *.ts
import { VtsValidatorModule } from '@vts-kit/angular-validator';

@(NgModule | Component | ...)({
    imports: [VtsValidatorModule]
})

// *.html
<input ngModel url  />
<input number [larger]="5" [smallerOrEqual]="10" #control="ngModel">

// You can see raise errors here
{{ control.errors | json }}

For reactive form:

// *.ts
import { VTSValidators } from '@vts-kit/angular-validator';

export class Component ... {
  // Use with 'validators' property of FormControl, FormGroup, FormBuilder, ...
  control1 = new FormBuilder().control('', {
      validators: [VTSValidators.url]
  })

  control2 = new FormBuilder().control('', {
    validators: [
        VTSValidators.number({
          larger: 5,
          smallerOrEqual: 10
        })
    ]
  })
}

// *.html
<input [formControl]="control1" />
<input [formControl]="control2" />

// You can see raise errors here
{{ control1.errors | json }}
{{ control2.errors | json }}

Feature: Common

VTS KIT provides common utility function to help code faster.

Date

No	Function Name	Description	Output
1	distance	Return a distance between two dates in miliseconds	number
2	isGreater	Return whether `date1` is greater than `date2`	boolean
3	isGreaterOrEqual	Return whether `date1` is greater than or equal to `date2`	boolean
4	isSmaller	Return whether `date1` is smaller than `date2`	boolean
5	isSmallerOrEqual	Return whether `date1` is smaller than or equal to `date2`	boolean

String

No	Function Name	Description	Output
1	isNullOrEmpty	Return whether a string is null or empty	boolean
2	defaultValue	Return `defaultValue` if `value` is null or empty, else return `value`	string
3	upperFirst	Return `value` with first character is setted to be uppercase	string
4	lowerFirst	Return `value` with first character is setted to be lowercase	string
5	camelCase	Converts `value` to camel case	string
6	pascalCase	Converts `value` to pascal case	string
7	kebabCase	Converts `value` to kebab case	string
8	snakeCase	Converts `value` to snake case	string
9	capitalize	Converts the first character of first word in `value` to upper case and the remaining to lower case	string
10	capitalizeAll	Converts the first character of each word in `value` to upper case and the remaining to lower case	string

Path

No	Function Name	Description	Output
1	getExtName	Return extension of the path	string
2	getDirName	Return dir of the path	string
3	getBaseName	Return last portion of the path	string

Feature: Bundle Analyzer

VTS KIT integrated bundle analyzer to help auditing overall bundle size.

Config (Already declared on generating, maybe be overwritten)

Webpack bundle analyzer config is localed in app/<app_name>/webpack/webpack.configs(.prod).ts.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = (config, context) => {
  return merge(config, {
    plugins: [
      // Other plugins
      ...(process.env.ANALYZE
        ? [
            new BundleAnalyzerPlugin({
              analyzerMode: 'server',
              analyzerHost: '127.0.0.1',
              analyzerPort: 8001,
            }),
          ]
        : []),
    ]
  })

By default, webpack bundle analyzer will serve a web report at http://127.0.0.1:8001. You can check out more options for webpack bundle analyzer here

Usage

Either use VTS Kit script inside package.json or custom your own.

// package.json
  ...
  scripts: {
    "start:analyze": "cross-env ANALYZE=1 npm run start",
    "build:analyze": "cross-env ANALYZE=1 npm run build"
  }

Using start:analyzer to start analyzing on Development Environment or build:analyzer to analyze on Production Environment

Feature: CICD

VTS KIT provides Docker config and Jenkin config with dynamic variables, developer can make change at ease.

CICD variables can be found under cicd/jenkinsfile/environment.groovy. Developer have to fill out all required fields to make it work in jenkine pipeline.

/** Pipeline options **/
env.flag_sonar = ""                                         // OPTIONAL, Enable sonar scan (set to 'yes' to enable)
env.flag_security = ""                                      // OPTIONAL, Enable fortify scan (set to 'yes' to enable)

/** Application information **/
env.appName = "demo"                                        // REQUIRED
                                                            // Determine docker image name (<harborServer>/<harborProject>/<appName>:<version>_<buildNumber>)
                                                            // and deployment/service name


/** Kubernetes profile **/

// Development profile
env.devKubeConfigFileSecret = "dev-k8s-config"              // REQUIRED, Secret file credential stored on Jenkin, give in fileID
env.devNamespace = ""                                       // REQUIRED, Kubernetes namespace to deploy
env.devPort = "80"                                          // REQUIRED, Should be nginx port
env.devTargetPort = "80"                                    // REQUIRED, Container port, should be nginx port
env.devNodePort = ""                                        // REQUIRED, Exposal port for external access
env.devImagePullSecrets = "default"                         // REQUIRED, Docker secret to pull image

// Production profile
env.prodKubeConfigFileSecret = "prod-k8s-config"            // REQUIRED, Secret file credential stored on Jenkin, give in fileID
env.prodNamespace = ""                                      // REQUIRED, Kubernetes namespace to deploy
env.prodPort = "80"                                         // REQUIRED, Should be nginx port
env.prodTargetPort = "80"                                   // REQUIRED, Container port, should be nginx port
env.prodNodePort = ""                                       // REQUIRED, Exposal port for external access
env.prodImagePullSecrets = "default"                        // REQUIRED, Docker secret to pull image


/** Docker harbor configuration **/
env.pullRegistry = ""                                       // REQUIRED, Harbor registry to pull base images
env.harborProject = ""                                      // REQUIRED, Harbor folder to store image


/** Git information **/
env.gitTokenSecret = ""                                     // REQUIRED, Secret token credential stored on Jenkin, give in secretID
env.stagingBranch = ""                                      // OPTIONAL, Staging branch won't trigger merge build pipeline


/** Sonar config **/
env.maximumAllowedBugs = 0
env.maximumAllowedVunerabilities = 0
env.maximumAllowedCodeSmell = 0


/** Build prefix for building report **/
env.pushBuildPrefix = "JENKINS-PUSH"
env.mrBuildPrefix = "JENKINS-MERGE"
env.acceptCloseMRBuildPrefix = "JENKINS-ACCEPT-CLOSE"

Feature: Dynamic Environment

VTS KIT provides ability to use environment from container. All system environment which are started with VTS_KIT_ will be collected and injected into Web Server on running. Developer can reference to these environment inside window.env.

Ways to make changes to environments:

1. Add environment inside kubernetes YAML deployment
2. Use kubectl to change environment while application is running (require rolloul restart)
3. Set environment on running docker (if deploy as docker)

Add environment inside kubernetes YAML deployment:

For example, make change to development profile, create two environemnt VTS_KIT_ENV1 and VTS_KIT_ENV2. You can find kubernetes YAML under cicd/manifests/dev-deploy-manifest.yaml.

---
apiVersion: v1
kind: Service
metadata:
  name: {{appName}}-svc
  labels:
    app: {{appName}}
  namespace: {{devNamespace}}
spec:
  type: NodePort
  ports:
    - port: {{devPort}}
      name: {{appName}}-external-port
      protocol: TCP
      targetPort: {{devTargetPort}}
      nodePort: {{devNodePort}}
  selector:
    app: {{appName}}
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: {{appName}}-deployment
  labels:
    app: {{appName}}
  namespace: {{devNamespace}}
spec:
  replicas: 1
  selector:
    matchLabels:
      app: {{appName}}
  template:
    metadata:
      labels:
        app: {{appName}}
    spec:
      containers:
        - name: {{appName}}-container
          image: {{imageName}}
          env:
            - name: VTS_KIT_ENV1
              value: "Hello"
            - name: VTS_KIT_ENV2
              value: "World"
          imagePullPolicy: IfNotPresent
          ports:
            - containerPort: {{devTargetPort}}
      imagePullSecrets:
        - name: {{devImagePullSecrets}}

Use kubectl to change environment while application is running (require rolloul restart)

Use kubectl CLI to make change to an applied-deployment.

  // Set new environemtn
  kubectl set env deployment/demo VTS_KIT_ENV1=hello

  // Rollout restart to apply change
  kubectl rollout restart deployment/demo

  // Unset environment (Also need to rollout restart to apply change)
  kubectl set env deployment/demo VTS_KIT_ENV1-

Set environment on running docker (if deploy as docker)

Use docker CLI to set environment on running an image

  docker run -e VTS_KIT_ENV1=hello -t webapp-demo:1.0.0

Feature: 3rd party integration

VTS KIT offers libraries that facilitate the integration of third-party libraries and services with minimal effort.

Check out documentation for more detail.

References

Contribute Guidelines

If you have any ideas, just open an issue and tell us what you think.

If you'd like to contribute, please refer Contributors Guide

License

This code is under the MIT License.

See the LICENSE file for required notices and attributions.

Version	Downloads (Last 7 Days)	Published
1.0.10	58	a year ago
1.0.9	1	2 years ago
1.0.8	0	2 years ago
1.0.7	0	2 years ago
1.0.6	0	2 years ago
1.0.5	0	2 years ago
1.0.4	0	2 years ago
1.0.3	0	2 years ago
1.0.2	0	2 years ago
1.0.1	0	2 years ago
1.0.0	0	2 years ago

@vts-kit/nx-angular

VTS Kit Angular NX Plugin

Requirement

Intergrated Features

Quickstart

Structure

Generators

Schematics

Usage

Using Nx CLI

Using Nx Console (GUI)

Generator: Library

Generator: Feature Group

Generator: Component

Generator: Directive

Generator: Pipe

Generator: Service

Generator: Class

Generator: Interface

Generator: Enum

Generator: Guard

Generator: Interceptor

Generator: Resolver

Generator: Validator

Generator: Template

Feature Guideline

Feature: Custom webpack

Feature: UI Component

Feature: Localization

Feature: Network

Feature: Validation

Feature: Common

Date

String

Path

Feature: Bundle Analyzer

Feature: CICD

Feature: Dynamic Environment

Feature: 3rd party integration

References

Contribute Guidelines

License

Versions

Current Tags

Version History

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads