common-ui-components

Container project to bundle WCH data records and UI components as an npm module. Such a module can then be used as a dependency by single page application projects to populate a tenant with data.

Changes

CHANGELOG

Usage

This library is meant to be used in an Angular based application.

Use as a template

Use this project as a template for custom bundles.

• Set this as an upstream project, so you can easily consume changes: git remote add upstream [email protected]:DX-Components/common-ui-components.git
• Pull changes from upstream git pull upstream master

Deploy the application and WCH artifacts

The library bundles the WCH content types, layouts and layout mappings. Deploy these artifacts to WCH, e.g. by using the following command of the CLI:

ibm-wch-sdk-cli application push --data ./data/ --override --aggregated

The --aggregated flag makes sure to not only deploy the application data but also the bundled dependencies.

Note: In order to successfully execute the command make sure to meet me prerequisites mentioned in the documentation of the CLI.

Development

The component library built with this project produces an NPM Package for WCH UI components. This package needs to be included in an application to be useful.

For convenience this project contains a simple test application that you can run locally to directly test the module. The source code of the application is part of the repository but will not be packaged.

Run the following command to launch the test application.

npm run start

Scripts

The bundle comes with a number of useful scripts:

• build: builds the library module. The output will be in the dist folder.
• build:development: builds the test application for this library module in development mode.
• `build:packagr": comiles the libary module
• build:production: builds a test application for this library module in production mode (to test the AOT build aspects).
• build:deploy: builds and deploys the test application for the library module.
• deploy:delete: deletes all data from the tenant. Useful for testing a fresh install, afterwads. Note use with case, your data will be gone.
• deploy:purge: deletes the application files from the tenant. This is typically executed prior to pushing new files.
• deploy:push: Pushes the application files and all data records (including the dependencies)
• gen:canonicalize: Canonicalizes the JSON data records to produce a comparable set of data.
• gen:components: Generates UI component for all layouts and also creates an Angular module per component.
• gen:layouts: Generates layouts and layout mappings (the JSON data records) for the types.
• gen:pagetype: Generates a new (empty) content type that can be used to create pages.
• gen:pull: Pulls the data records from your WCH tenant into a temporary directory. Use a merge tool to selectively add the desired artifacts to your project.
• run:wchtools: Executes the embedded version of WCH tools. Pass the desired parameters after a -- separator.
• show:url: Displays the live URL that serves your test application.
• start: Starts the local development server with the test application.