Webpack TS Configuration Initial Implementation (#2283)

* Move react-scripts & webpack-dev-server scripts into modular-scripts/src

* Restructure react-scripts & webpack-dev-server & esbuild-scripts into more consistent folder structures

* Translate to TS webpack.config.js and most supporting scripts

* Deduplicate scripts shared between webpack and esbuild

* Rename createPaths to determineTargetPaths to more accurately reflect functionality

* Enhance determineTargetPaths to include now deleted/deduplicated paths.js functionality

* Add all feature branches to github actions

* Update test snapshots 

* Merge esbuild-https-certs-support - authored-by: Sam Brown <sam.brown@jpmorgan.com>

.changeset/plenty-jeans-call.md

@@ -0,0 +1,5 @@
+---
+'modular-scripts': minor
+---
+
+Fix support for SSL certificates in esbuild mode

.changeset/sixty-lions-kneel.md

@@ -0,0 +1,5 @@
+---
+'modular-scripts': minor
+---
+
+Rewrote Webpack Configuration in TypeScript

.github/workflows/static.yml

@@ -2,9 +2,9 @@ name: Lint
 
 on:
   push:
-    branches: [main, 'release/**']
+    branches: [main, 'release/**', 'feature/**']
   pull_request:
-    branches: [main, 'release/**']
+    branches: [main, 'release/**', 'feature/**']
 
 jobs:
   Static:

.github/workflows/test-windows.yml

@@ -5,9 +5,9 @@ name: Windows Test
 
 on:
   push:
-    branches: [main, 'release/**', 'feature/v4.2']
+    branches: [main, 'release/**', 'feature/**']
   pull_request:
-    branches: [main, 'release/**', 'feature/v4.2']
+    branches: [main, 'release/**', 'feature/**']
 
 jobs:
   Test:

.github/workflows/test.yml

@@ -5,9 +5,9 @@ name: Test
 
 on:
   push:
-    branches: [main, 'release/**', 'feature/v4.2']
+    branches: [main, 'release/**', 'feature/**']
   pull_request:
-    branches: [main, 'release/**', 'feature/v4.2']
+    branches: [main, 'release/**', 'feature/**']
 
 jobs:
   Test:

.github/workflows/validate.yml

@@ -1,9 +1,9 @@
 name: 'Validate'
 on:
   push:
-    branches: [main, 'release/**']
+    branches: [main, 'release/**', 'feature/**']
   pull_request:
-    branches: [main, 'release/**']
+    branches: [main, 'release/**', 'feature/**']
 
 jobs:
   check-yarn-lock-registry:

docs/commands/start.md

@@ -16,6 +16,33 @@ module within a template app, which we stage in a `node_modules/.modular`
 folder. You can develop your view as you normally would an app and it will
 automatically re-compile as you make changes in the view package.
 
+## HTTPS
+
+That are several options for enabling HTTPS in local development.
+
+Modular follows the
+[CRA implementation to enable HTTPS](https://create-react-app.dev/docs/using-https-in-development/#custom-ssl-certificate).
+
+There are two SSL certificate options available:
+
+1. Plain, self-signed (default): use the default self-signed certificate that
+   gets generated automatically (requires user to accept an invalid cert)
+2. A custom, signed certificate: you want to use a custom certificate (e.g. to
+   get a valid certificate chain that will enable authentication flows)
+
+To use custom certificates, provide the `SSL_CRT_FILE` and `SSL_KEY_FILE`
+environment variables:
+
+```bash
+HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key yarn modular start
+```
+
+Both values can be filenames or paths to files within the project. Modular will
+look for your files:
+
+1. In the individual package directory
+2. In the monorepo root
+
 ## Options:
 
 `--verbose`: Run yarn commands with the --verbose flag set

packages/modular-scripts/package.json

@@ -24,7 +24,7 @@
     "modular": "ts-node src/cli.ts",
     "clean": "rimraf build dist-cjs",
     "prebuild": "yarn clean",
-    "build": "babel --source-maps --root-mode upward src --out-dir dist-cjs --extensions .ts --ignore 'src/**/*.test.ts'"
+    "build": "babel --source-maps --root-mode upward src --out-dir dist-cjs --extensions .ts,.js --ignore 'src/**/*.test.ts'"
   },
   "dependencies": {
     "@babel/code-frame": "7.18.6",
@@ -34,11 +34,17 @@
     "@rollup/plugin-commonjs": "22.0.0",
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "13.3.0",
+    "@schemastore/tsconfig": "0.0.9",
     "@svgr/core": "6.2.1",
     "@svgr/webpack": "6.2.1",
+    "@types/case-sensitive-paths-webpack-plugin": "^2.1.6",
     "@types/lodash": "^4.14.191",
     "@types/micromatch": "4.0.2",
+    "@types/node": "^18.11.18",
     "@types/npmcli__arborist": "^5.6.0",
+    "@types/postcss-normalize": "^9.0.1",
+    "@types/shell-quote": "^1.7.1",
+    "@types/webpack": "^5.28.0",
     "@types/yarnpkg__lockfile": "^1.1.5",
     "@yarnpkg/lockfile": "^1.1.0",
     "address": "1.2.1",
@@ -115,6 +121,7 @@
     "rollup-plugin-esbuild": "^5.0.0",
     "rollup-plugin-postcss": "4.0.2",
     "sass-loader": "13.0.2",
+    "selfsigned": "^2.1.1",
     "semver": "7.3.7",
     "semver-regex": "3.1.4",
     "shell-quote": "1.7.3",
@@ -128,8 +135,8 @@
     "update-notifier": "5.1.0",
     "url-loader": "4.1.1",
     "validate-npm-package-name": "^4.0.0",
-    "webpack": "5.74.0",
-    "webpack-dev-server": "4.9.3",
+    "webpack": "5.75.0",
+    "webpack-dev-server": "4.11.1",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-merge": "^5.8.0",
     "ws": "8.8.1"
@@ -154,6 +161,7 @@
     "@schemastore/package": "0.0.6",
     "@schemastore/tsconfig": "0.0.9",
     "@types/js-yaml": "^4.0.5",
+    "@types/loader-utils": "^2.0.3",
     "@types/validate-npm-package-name": "^4.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",