build(ui-scripts): allow to specify custom port for dev server

One can run now commands like "npm run dev -- -p 1234"

Author: matyasf

docs/contributor-docs/dev-commands.md

@@ -11,7 +11,7 @@ This is a quick developer reference for common Instructure UI repository command
 | Command                                                                     | Description                                                                                                                                                                                                     |
 | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `npm run bootstrap`                                                         | Clean all node modules and build output, reinstall dependencies, create fresh build including regenerating design tokens and type declaration files.                                                            |
-| `npm run dev`                                                               | Run a local instance of the documentation app in dev mode. Docs will be served at `http://0.0.0.0:9090`                                                                                                         |
+| `npm run dev`                                                               | Run a local instance of the documentation app in dev mode. Docs will be served at `http://0.0.0.0:9090`. Port can be specified too e.g. `npm run dev -- -p 1234`                                                |
 | `npm run start`                                                             | Run a local instance of the documentation app in production mode. The urls where the docs are being served will be included in the output of this command.                                                      |
 | `npm run build`                                                             | Run the build command for all Instructure UI packages. Similar to bootstrap, but without the cleaning steps, installation of dependencies, and without the token and type generation.                           |
 | `npm run build:watch`                                                       | Identical to `npm run build` but will watch for changes. Note: this command is rarely necessary to use. If you are running `npm run dev`, the docs app will already be watching for any changes for components. |

package.json

@@ -15,9 +15,9 @@
   ],
   "scripts": {
     "prestart": "npm run bootstrap",
-    "start": "npm run start --workspace=docs-app",
-    "start:watch": "npm run start:watch --workspace=docs-app",
-    "dev": "npm run start:watch",
+    "start": "npm run start --workspace=docs-app --",
+    "start:watch": "npm run start:watch --workspace=docs-app --",
+    "dev": "npm run start:watch --",
     "cy:component": "cypress run --component",
     "test:vitest": "vitest --watch=false",
     "test:vitest-watch": "vitest",
@@ -92,6 +92,7 @@
     "webpack": "^5.99.9"
   },
   "//dependency-comments": {
+    "scripts": "The '--' at the end of commands is needed so user parameters are passed forward",
     "danger": "^11.3.1 -- add this back if we use it in pr-validation.yml",
     "chalk": "Chalk 5 is ESM. (used here by the scripts/ folder)",
     "tar": "Lerna 8 needs tar for this fixed(?) bug: https://github.com/lerna/lerna/issues/4005",

packages/__docs__/package.json

@@ -13,8 +13,8 @@
   "scripts": {
     "prestart": "npm run build:scripts:ts && node lib/build-docs.mjs",
     "start": "npm run prestart && ui-scripts bundle && ui-scripts server -p 8001",
-    "start:watch": "npm run prestart && ui-scripts bundle --watch -p 9090",
-    "start-watch-just-app": "ui-scripts bundle --watch -p 9090",
+    "start:watch": "npm run prestart && ui-scripts bundle --watch",
+    "start-watch-just-app": "ui-scripts bundle --watch",
     "bundle": "npm run prestart && ui-scripts bundle",
     "lint": "ui-scripts lint",
     "lint:fix": "ui-scripts lint --fix",

packages/ui-scripts/lib/build/webpack.js

@@ -28,15 +28,12 @@ export default {
   command: 'bundle',
   desc: 'Build and optionally start an app with Webpack',
   builder: (yargs) => {
-    yargs.option('port', { alias: 'p', desc: '' })
+    yargs.option('port', { alias: 'p', desc: '', default: '9090' })
     yargs.option('watch', { boolean: true, desc: '' })
     yargs.strictOptions(true)
   },
   handler: async (argv) => {
     const { NODE_ENV, DEBUG, OMIT_INSTUI_DEPRECATION_WARNINGS } = process.env
-
-    let port = argv.port || '9090'
-
     let command, webpackArgs
 
     let envVars = {}
@@ -51,7 +48,7 @@ export default {
         NODE_ENV: 'development',
         DEBUG: '1'
       }
-      webpackArgs = ['serve', '--mode=development', `--port=${port}`]
+      webpackArgs = ['serve', '--mode=development', `--port=${argv.port}`]
     } else {
       command = 'webpack'
       envVars = {