# @shopify/checkout-ui-extensions-run > A command line interface for developing and building Checkout UI Extensions Latest version **0.7.4** (published 2022-06-02) · MIT license · 0 weekly downloads ## Install ```sh npm install @shopify/checkout-ui-extensions-run pnpm add @shopify/checkout-ui-extensions-run yarn add @shopify/checkout-ui-extensions-run bun add @shopify/checkout-ui-extensions-run ``` Provides the command `checkout-ui-extensions-run`. ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.7.4 | | Published | 2022-06-02 | | First published | 2021-06-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 23 | | Unpacked size | 201.5 KB | | Known vulnerabilities | 0 (+7 in 2 direct dependencies) | | Install scripts | no | | Maintainers | wcandillon, jplhomer, marytal, themallen, nathanpjf, shopify-dep, goodforonefare, lemonmade, vsumner, wizardlyhel, antoine.grant, tsov, andyw8-shopify, henrytao, hannachen, andrewapperley, iainmcampbell, vividviolet, bpscott | ## Links - npm: https://www.npmjs.com/package/@shopify/checkout-ui-extensions-run - npm.io page: https://npm.io/package/@shopify/checkout-ui-extensions-run ## Dependencies (23) - [glob](https://npm.io/package/glob.md) ^7.0.0 - [open](https://npm.io/package/open.md) ^7.0.4 - [chalk](https://npm.io/package/chalk.md) ^4.0.0 - [core-js](https://npm.io/package/core-js.md) ^3.0.0 - [js-yaml](https://npm.io/package/js-yaml.md) ^3.14.0 - [webpack](https://npm.io/package/webpack.md) ^4.43.0 - [gzip-size](https://npm.io/package/gzip-size.md) ^6.0.0 - [@babel/core](https://npm.io/package/@babel/core.md) 7.12.13 - [brotli-size](https://npm.io/package/brotli-size.md) ^4.0.0 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.0 - [pretty-bytes](https://npm.io/package/pretty-bytes.md) ^5.3.0 - [camelcase-keys](https://npm.io/package/camelcase-keys.md) ^6.0.0 - [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) 7.12.13 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^3.11.0 - [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) 7.12.13 - [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.13.5 - [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^3.0.3 - [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) 7.12.13 - [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) 7.12.13 - [@babel/plugin-proposal-numeric-separator](https://npm.io/package/@babel/plugin-proposal-numeric-separator.md) 7.12.13 - [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) 7.12.13 - [@shopify/ui-extensions-webpack-hot-client](https://npm.io/package/@shopify/ui-extensions-webpack-hot-client.md) ^0.2.2 - [@babel/plugin-proposal-nullish-coalescing-operator](https://npm.io/package/@babel/plugin-proposal-nullish-coalescing-operator.md) 7.12.13 ## Recent versions - 0.7.4 (latest) — 2022-06-02 - 0.5.2-alpha.0 (next) — 2021-06-29 - 0.7.2 — 2022-02-23 - 0.7.1 — 2022-01-11 - 0.7.0 — 2021-07-14 - 0.6.0 — 2021-07-08 - 0.5.2 — 2021-06-29 - 0.5.1 — 2021-06-29 - 0.5.0 — 2021-06-28 - 0.5.0-alpha.1 — 2021-06-23 - 0.5.0-alpha.0 — 2021-06-21 - 0.4.1 — 2021-06-16 ## README # `checkout-ui-extensions-run` This package provides a command line interface for developing and building Checkout UI Extensions. ## Installation ```bash $ yarn add @shopify/checkout-ui-extensions-run --dev ``` ## Usage This package will add a `checkout-ui-extensions-run` binary to your project. You can execute this binary directly, or through yarn: ```bash $ node_modules/.bin/checkout-ui-extensions-run $ yarn checkout-ui-extensions-run ``` ### `checkout-ui-extensions-run dev` > alias: `checkout-ui-extensions-run serve` ```bash $ yarn checkout-ui-extensions-run dev ``` This command will start a local development server for your extension. This development server, based on [`webpack-dev-middleware`](https://github.com/webpack/webpack-dev-middleware), will serve the JavaScript file for your extension, and will recompile it as you make changes to your codebase. This command will print the `localhost` address of the asset server when it starts up. To control the port the server will bind to, you can pass the `--port` flag: ```bash $ yarn checkout-ui-extensions-run dev --port 3000 ``` ### Browser extension and `/data` endpoint During development, the dev server exposes a `/data` endpoint which serves the `api_key` entry of the `.env` file and a json-parsed version of the `extension.config.yml`. This endpoint is consumed by a browser extension, that we share with partners, which makes it easier to test locally developed post purchase extensions. ### `checkout-ui-extensions-run build` ```bash $ yarn checkout-ui-extensions-run build ``` This command will run your extension through [webpack](https://webpack.js.org) to produce a highly-optimized asset. Once generated, the estimated size of the asset will be printed to the console. The extension asset will be placed in the `build` directory adjacent to the directory in which you ran the command. By default, its name will be `main.js`, but this can be customized using the `--filename` flag: ```bash $ yarn checkout-ui-extensions-run build --filename extension.js ``` --- _Source: https://npm.io/package/@shopify/checkout-ui-extensions-run · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._