Getting Started

Install Dependencies

Install Node.js
Once Node is installed, install pnpm.

Clone the Repository

git clone https://github.qualcomm.com/ProdTools/qui.git

Configure Local Hostnames

Open your operating system's hosts file:

C:\Windows\System32\drivers\etc\hosts

/etc/hosts

Add the following lines:

127.0.0.1       angular.qui.local.qualcomm.com
127.0.0.1       angular-charts.qui.local.qualcomm.com
127.0.0.1       angular-table.qui.local.qualcomm.com
127.0.0.1       react.qui.local.qualcomm.com

Enable HTTPS

A documentation app is set up for each library. Each documentation app runs locally in HTTPS, but this requires a certificate. Follow these steps to generate a self-signed wildcard cert.

If you haven't installed mkcert:

Install mkcert (may need to use chocolatey or scoop if on Windows)
After it's installed, open a terminal and run mkcert -install

Next, generate the self-signed SSL certificate.

cd certs
mkcert '*.qui.local.qualcomm.com'

Install NPM Dependencies

In the repository root folder:

run pnpm i to install dependencies.
- It's a good idea to run this whenever you merge in the latest changes from main. Dependencies change often.

Run Local Development Scripts

If it's your first time compiling, or you've merged a recent update, run the following command:

pnpm build

Run the following command to compile the component packages in watch mode:

pnpm dev

WARNING

This process is resource intensive. If you encounter performance issues, try running dev:react instead of dev.

TypeDoc Compiler

Component API documentation is automatically generated from JSDoc comments. We'll explore this later. You can run the typedoc watcher using the following script:

pnpm doc-gen:watch

Documentation Sites

The documentation sites are started by the following scripts:

React

pnpm dev:react:docs

React Table

pnpm dev:react:table:docs

Testing

pnpm test:react:watch

Continue to Component Authoring to learn how components are built.

Typography

Overview