@modyo/cli

* [Modyo Command Line Interface (CLI)](#modyo-command-line-interface-cli)  * [Introduction](#introduction) * [Commands](#commands) * [Enable Debug Mode](#enable-debug-mode) * [License](#license) # Modyo Command Line Interface (CLI) ==================================== The Modyo Command Line Interface (CLI) is a command line tool based in two principles acceleration and integration, and this principles has a command get and push respectively. ![npm (scoped)](https://img.shields.io/npm/v/@modyo/cli?style=plastic) ![NPM](https://img.shields.io/npm/l/@modyo/cli?style=plastic) ![Coverage](https://img.shields.io/badge/coverage-99.5%25-green?style=plastic&logo=javascript) ## Introduction First, you need to bring the Modyo CLI on your local machine to have the `modyo-cli` command available, this will allow you to initialize a project with some Front end architectural decisions already taken, or use to initialize a widget from the catalog if you have access. To use the Modyo's CLI, you have these options. Global installation on your local machine ```bash npm i -g @modyo/cli #via npm yarn global add @modyo/cli #via yarn ``` > This command will make the command modyo-cli available on the terminal session globally Through NPX without installation ```bash npx @modyo/cli #via npx npx @modyo/cli@version #via npx - specific version ``` ## Commands  * [`modyo-cli autocomplete [SHELL]`](#modyo-cli-autocomplete-shell) * [`modyo-cli get NAME [DIRECTORY]`](#modyo-cli-get-name-directory) * [`modyo-cli help [COMMANDS]`](#modyo-cli-help-commands) * [`modyo-cli preview`](#modyo-cli-preview) * [`modyo-cli push [NAME]`](#modyo-cli-push-name) * [`modyo-cli version`](#modyo-cli-version) ## `modyo-cli autocomplete [SHELL]` display autocomplete installation instructions ``` USAGE $ modyo-cli autocomplete [SHELL] [-r] ARGUMENTS SHELL shell type FLAGS -r, --refresh-cache Refresh cache (ignores displaying instructions) DESCRIPTION display autocomplete installation instructions EXAMPLES $ modyo-cli autocomplete $ modyo-cli autocomplete bash $ modyo-cli autocomplete zsh $ modyo-cli autocomplete --refresh-cache ``` _See code: [@oclif/plugin-autocomplete](https://github.com/oclif/plugin-autocomplete/blob/v0.3.0/src/commands/autocomplete/index.ts)_ ## `modyo-cli get NAME [DIRECTORY]` Pull a widget from our catalog into a new directory ``` USAGE $ modyo-cli get NAME [DIRECTORY] [-f] [-h] [-o <value>] ARGUMENTS NAME The name of the widget DIRECTORY Name of directory to init FLAGS -f, --force Override folder if exist -h, --help Output usage information -o, --organization=<value> [default: dynamic-framework] Github Organization DESCRIPTION Pull a widget from our catalog into a new directory In general, the `get` command is used to obtain a boilerplate widget. EXAMPLES There are some public widget names that can be accessed via this command To initialize a widget $ modyo-cli get dynamic-react-base-template [DIRECTORY] From this command and on you can continue using the widget like any other front-end widget. Your organization can create its own custom templates to initialize new widgets and use them with the `organization` option $ modyo-cli get --organization=myOrganization my-custom-template-repo [DIRECTORY] ``` _See code: [src/commands/get.ts](https://github.com/modyo/modyo-cli/blob/v3.5.2/src/commands/get.ts)_ ## `modyo-cli help [COMMANDS]` Display help for modyo-cli. ``` USAGE $ modyo-cli help [COMMANDS] [-n] ARGUMENTS COMMANDS Command to show help for. FLAGS -n, --nested-commands Include all nested commands in the output. DESCRIPTION Display help for modyo-cli. ``` _See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v5.2.8/src/commands/help.ts)_ ## `modyo-cli preview` Preview local widget over Modyo platform ``` USAGE $ modyo-cli preview -t <value> -u <value> [-h] [-v 8|9|10] [-i <value> | -n <value>] [-p <value>] [-s <value>] [-j <value>] FLAGS -h, --help Output usage information -i, --site-id=<value> Id of the site where the widget will be previewed -j, --entry-js=<value> [default: main.js] Entry JS file of the widget -n, --site-host=<value> Host of the site where the widget will be previewed -p, --port=<value> [default: 8080] Deploy port local widget running -s, --dom-id=<value> [default: widgetName] Container id of the widget -t, --token=<value> (required) Modyo Api token -u, --account-url=<value> (required) URL of your ®Modyo account ex("https://account.modyo.com") -v, --version=<option> [default: 9] Version of Modyo platform <options: 8|9|10> DESCRIPTION Preview local widget over Modyo platform The `preview` command is responsible for informing the platform about local entry points so that the widget can be rendered on the platform locally. MODYO_VERSION=version MODYO_TOKEN=token MODYO_ACCOUNT_URL=account-url MODYO_SITE_ID=siteId MODYO_SITE_HOST=siteHost MODYO_LOCAL_PORT=port MODYO_LOCAL_DOM_ID=domId MODYO_LOCAL_ENTRY_JS=entryJs EXAMPLES $ modyo-cli preview ``` _See code: [src/commands/preview.ts](https://github.com/modyo/modyo-cli/blob/v3.5.2/src/commands/preview.ts)_ ## `modyo-cli push [NAME]` Push widget to Modyo platform ``` USAGE $ modyo-cli push [NAME] -t <value> -u <value> [-p] [-h] [-d <value>] [-v 8|9|10] [-i <value> | -n <value>] [-b <value>] [-e] [-l | -f <value>] [-z] [-j <value>] [-c <value>] ARGUMENTS NAME The name of the widget FLAGS -b, --build-command=<value> [default: build] Build command in package.json -c, --zip-entry-css=<value> [default: main.css] Entry css file when use --zip flag -d, --build-directory=<value> [default: dist] Build directory path -e, --[no-]remove-emojis Remove emojis from the widget that will be push -f, --disable-liquid-regex=<value> Disable liquid on files that match a regex -h, --help Output usage information -i, --site-id=<value> Id of the site where the widget will be push -j, --zip-entry-js=<value> [default: main.js] Entry js file when use --zip flag -l, --disable-liquid Disable liquid on all files -n, --site-host=<value> Host of the site where the widget will be push -p, --publish Force widget publication -t, --token=<value> (required) Modyo Api token -u, --account-url=<value> (required) URL of your ®Modyo account ex("https://account.modyo.com") -v, --version=<option> [default: 9] Version of Modyo platform <options: 8|9|10> -z, --zip Zip bundle to publish DESCRIPTION Push widget to Modyo platform The `push` command is the one in charge of the integration principle, used to send the widget to the selected site in the modyo platform. It will use an argument called name to upload the widget to the platform and some required flags like token site_base id or host to can identify the ®Modyo platform which host the widget and have an additional flag to avoid the manual process flow of widget publication. Many of the options can be defined as environment variables or inside an .env file that is recommended to avoid the publication to the GitHub registry because can contain some delicate information MODYO_BUILD_DIRECTORY=buildDirectoryPath MODYO_VERSION=version MODYO_TOKEN=token MODYO_ACCOUNT_URL=account-url MODYO_SITE_ID=siteId MODYO_SITE_HOST=siteHost MODYO_BUILD_COMMAND=buildCommand MODYO_REGEX_EXCLUDE=regexToExcludeFiles MODYO_DISABLE_LIQUID_REGEX=regexToDisableLiquidOnFiles MODYO_ZIP=true MODYO_ZIP_ENTRY_JS=main.js MODYO_ZIP_ENTRY_CSS=main.css EXAMPLES $ modyo-cli push ``` ## **Using the `--zip` Flag and Code Splitting Support** The `--zip` flag is specifically designed for uploading widgets that use **code splitting**. This means the widget's build, typically configured through Webpack, splits the code into multiple JavaScript files (**chunks**) instead of a single bundled file. When using the `--zip` flag, the CLI will package all widget files (JS, CSS, assets, etc.) into a `.zip` file. This ensures that Modyo's platform can correctly manage and load the chunks as needed. Additionally, the `--zip-entry-js` and `--zip-entry-css` flags specify which files within the ZIP should be used as the widget's **entry points**. By default, these are set to `main.js` and `main.css`, but it can be customized if the project has a different build configuration. --- ## **Exclusive Compatibility with Webpack** The `--zip` flag is **only compatible with Webpack**. This is because Modyo uses a dynamic runtime path to load assets, which is specifically supported through Webpack’s configuration. Bundlers other than Webpack are **not supported** with this flag since they lack the necessary runtime path injection for chunk loading. --- ## **WebAssembly (WASM) Support** The CLI also supports uploading `.wasm` (WebAssembly) files. However, this support is conditional: - **The `--zip` flag must be enabled.** If `.wasm` files are present in your widget but the upload is performed without the `--zip` flag, these files will be **ignored** and won’t be available on the Modyo platform. --- _See code: [src/commands/push.ts](https://github.com/modyo/modyo-cli/blob/v3.5.2/src/commands/push.ts)_ ## `modyo-cli version` ``` USAGE $ modyo-cli version [--json] [--verbose] FLAGS --verbose Show additional information about the CLI. GLOBAL FLAGS --json Format output as json. FLAG DESCRIPTIONS --verbose Show additional information about the CLI. Additionally shows the architecture, node version, operating system, and versions of plugins that the CLI is using. ``` _See code: [@oclif/plugin-version](https://github.com/oclif/plugin-version/blob/v1.1.3/src/commands/version.ts)_  ## Enable Debug Mode Use the debug for debugging. The CLI uses this module for all of its debugging. If you set the environment variable ```DEBUG=*``` it will print all the debug output to the screen. Depending on your shell you may need to escape this with ```DEBUG=\*```. On Windows you can't set environment variables in line, so you'll need to run ```set DEBUG=*``` before running the command. this will output the full error trace and all the pushed information to modyo will be printed in the folder .debug to accomplish a more detailed error. ## License Modyo CLI is licensed under the ![Modyo Software License ](https://github.com/modyo/modyo-cli/blob/master/LICENSE).