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.
After downloading Finsemble, run:
npm installand >
npm install -g @chartiq/finsemble-cli.
Once the CLI is installed you can run:
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.
> finsemble-cli add component <yourComponentName>
This command does two things for you:
It creates a new component with the recommended directory structure.
src/components/ └──yourComponentName/ └──yourComponentName.html └──yourComponentName.css └──yourComponentName.js
> 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
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
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 and 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.
The following command creates a boilerplate for your microservice:
> finsemble-cli add service <yourServiceName> --create-client=true
--create-client=true to automatically create the corresponding client API boilerplate.
src/services/ └──yourServiceName/ └──yourServiceName.html └──yourServiceNameService.js └──yourServiceNameClient.js
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.