lqt-customer-ui v2.4.0
Customer UI Lib
This lib can be used in customer facing frontends.
Getting Started
To start building a new web component, run:
Use correct node version.
nvm use
Instal clean depdendencies.
npm ci
Run Sandbox project.
npm start
To build the component for production, run:
npm run build
To run the unit tests for the components, run:
npm test
Need help? Check out the stencil docs here.
Run Storybook
Storybook is the main component library application where most components should be presented and documented. Use this tool to play around with components and see them in action.
Start Storybook application:
npm run storybook:start
Naming Components
When creating new component tags, we recommend not using stencil
in the component name (ex: <stencil-datepicker>
). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Lynqtech generated web components use the prefix lqt
.
Using components
There are three strategies we recommend for using web components built with Stencil.
The first step for all three of these strategies is to publish to NPM.
Script tag
Put this script tag in the head of your index.html
<!-- Modern Browsers --> <script type="module" src="https://customer-ui.xtk-dev.de/dist/customer-ui/customer-ui.esm.js"></script> <!-- Browsers that do not support modules --> <script nomodule="" src="https://customer-ui.xtk-dev.de/dist/esm/customer-ui.js"></script>
Then you can use the element anywhere in your template, JSX, html etc
Angular
For now we need to write custom wrapper components in our angular application.
Install the npm package in your angular project.
npm install lqt-customer-ui@latest
Add node_module assets to public assets in angular.json > build > options > assets:
{ "glob": "**", "input": "node_modules/lqt-customer-ui", "output": "./customer-ui" }
Inject into index.html with this snippet:
<!-- load customer-ui --> <script nomodule src="/customer-ui/dist/esm/customer-ui.js"></script> <script type="module"> import { defineCustomElements } from '/customer-ui/loader/index.es2017.js'; defineCustomElements(); </script>
Use it in angular by allowing the CUSTOM_ELEMENTS_SCHEMA in the module/component of your choice.
Updating Stencil
npm install @stencil/core@latest --save-exact
Publish
Since we have two ways to consume the application, one per npm package and one per k8s hosted sources, there are also two ways to deploy this library.
Deploy with npm
Deployments to the github npm registry are used to install this package in angular or other npm based applications.
- Make sure you bumped the version in
package.json
,package-lock.json
&manifest.json
. - Build the application with
npm run build
. - Deploy to npm with
npm publish
.
Deploy to k8s
Deployments in k8s are used to install this package on environments that are out of Lynqtechs control and are used to make versioned rollout per client possible on foreign websites that consume this library.
Since this is a k8s service it will be automatically deployed to the dev environment on commits to the main branch.
Stage/prod deployments can be done with the regular tag-based deployment process.
9 months ago