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 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 app <yourAppName>
This command does two things for you:
It creates a new app with the recommended directory structure.
src/components/ └──yourAppName/ └──yourAppName.html └──yourAppName.css └──yourAppName.js
It adds your component to configs/appd.json with default options implemented.
> npx 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
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-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
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.
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 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 Getting Started Tutorial.
You can learn more about the React controls and sample components we've made by checking out UI Components.