The Finsemble CLI

The command line interface (CLI) is a collection of node scripts that make quick work of creating the skeleton for new components and FSBL clients. Using the CLI ensures that a common directory structure and naming style are maintained. This overview explains how to set up the CLI and describes the function of each command.

Setup

After downloading Finsemble, run:

npm install and >npm install -g @chartiq/finsemble-cli.

Once the CLI is installed you can run:

> finsemble-cli

Run the command without any argument to see example commands. To issue CLI commands, your command prompt needs to be navigated to your project's base level (e.g., finsemble-seed, if you are using the default naming conventions of a downloaded Finsemble seed project.


CLI actions

Add a component

> finsemble-cli add component <yourComponentName>

This command does two things for you:

  1. It creates a new component with the recommended directory structure.

     src/components/
         └──yourComponentName/
             └──yourComponentName.html
             └──yourComponentName.css
             └──yourComponentName.js
    
  2. It adds your component to configs/componentList.json with default options implemented.

Add a React component

> finsemble-cli add component <yourComponentName> --component-type=react

Similar to the first command, this script creates the appropriate directory structure and adds your component to configs/componentList.json.

Webpack gets the list of components it should watch and build from configs/componentsToBuild.json.

    src/components/
        └──yourComponentName/
            └──src/
                └──components/
                └──stores/
                └──app.jsx
                └──yourComponentName.html
                └──yourComponentName.css

Add an Angular component

To incorporate Angular components into your project, first ensure that you have the Angular CLI installed globally:

> npm install -g @angular/cli

The Finsemble CLI will use the Angular CLI utility (ng) to generate the appropriate directory structure and will then integrate its build process into the seed project's gulpfile.

Note: Do not install the Angular CLI locally in your Finsemble seed project. Doing so will prevent the ng new command from generating a new build environment in a subdirectory of an existing Angular project.

Next generate the component with:

> finsemble-cli add component <yourComponentName> --component-type=angular

This will create an entry in components.json. Create or update /build/angular-components.json with an entry describing the component (to help with integration into the main build process), and generate a standard Angular component project directory structure (in /src/angular-components/):

    src/angular-components/
        └──yourComponentName/
            └──src/
                └──e2e
                └──node_modules
                └──src
                    └──app
                    └──assets
                    └──environments
                    └──favicon.ico
                    └──index.html
                    └──main.ts
                    └──polyfills.ts
                    └──styles.css
                    └──test.ts
                    └──tsconfig.app.json
                    └──tsconfig.spec.json
                    └──typings.d.ts
                └──karma.conf.js
                └──package.json
                └──protractor.conf.js
                └──README.md
                └──tsconfig.json
                └──tslint.json

Finally, run npm run dev to build your new component and launch Finsemble.


Multiple components may be derived from a single Angular component project by making additional entries in /configs/application/components.json that refer to the generated component project.

Angular component projects are built using their own CLI and build system. To keep them separate from other components, which are built by Webpack, they are generated amd kept in /src/angular-components/. This avoids these files from being processed by the normal Webpack build and resolver.

The Angular CLI may report the following message when generating the component project:

    Unable to find "@angular/cli" in devDependencies.

    Please take the following steps to avoid issues:
    "npm install --save-dev @angular/cli@latest"

Please ignore this message and note that your generated component project will already depend on the CLI, while your Finsemble seed project should not.

Add a microservice

The following command creates a boilerplate for your microservice:

> finsemble-cli add service <yourServiceName> --create-client=true

Use --create-client=true to automatically create the corresponding client API boilerplate.

    src/services/
        └──yourServiceName/
            └──yourServiceName.html
            └──yourServiceNameService.js
    src/clients/
        └──yourServiceNameClient.js

Further reading

If you haven't yet installed the Finsemble seed project and gotten access to the CLI, check out the Seed Project Tutorial.

You can learn more about the React controls and sample components we've made by checking out Presentation Components.