The Finsemble CLI

Deprecated

This feature is deprecated and will likely be removed in the future versions.

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 cloning finsemble-seed, the finsemble-cli can be used through npx:

> npx @finsemble/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 an app

> npx @finsemble/finsemble-cli add app <yourAppName>

This command does two things for you:

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

src/components/
    └──yourAppName/
        └──yourAppName.html
        └──yourAppName.css
        └──yourAppName.js

2. It adds your component to configs/appd.json with default options implemented.

Add a React app

> npx @finsemble/finsemble-cli add app <yourComponentName> --type=react

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

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

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

Add an Angular app

To incorporate Angular apps 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/finsemble-cli add app <yourComponentName> --type=angular

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

src/angular-components/
    └──yourAppName/
        └──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 app and launch Finsemble.

---

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

Angular app projects are built using their own CLI and build system. To keep them separate from other apps, 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 app 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 app project will already depend on the CLI, while your Finsemble seed project should not.

Add a desktop service

The following command creates a boilerplate for your desktop service:

> npx @finsemble/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
        └──yourServiceNameClient.js

See also

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

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