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
After cloning finsemble-seed, the
finsemble-cli can be used through
> npx 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.
> npx 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
It adds your component to configs/components.json with default options implemented.
> npx 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/components.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:
> npx 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 desktop service:
> npx finsemble-cli add service <yourServiceName> --create-client=true
--create-client=true to automatically create the corresponding client API
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 Getting Started Tutorial.
You can learn more about the React controls and sample components we've made by checking out UI Components.