use default port; use fewer webpack CLI options

Author: ChristopherChudzicki

base-theme/assets/webpack/webpack.dev.ts

@@ -8,7 +8,7 @@ import "webpack-dev-server" // this import tells webpack's typings about the dev
 import * as envalid from "envalid"
 
 const env = envalid.cleanEnv(process.env, {
-  WEBPACK_PORT: envalid.port()
+  WEBPACK_PORT: envalid.port({ default: 3001 })
 })
 
 const devOverrides: Configuration = {
@@ -24,6 +24,11 @@ const devOverrides: Configuration = {
 
   devServer: {
     port:    env.WEBPACK_PORT,
+    /**
+     * Binding to "0.0.0.0" allows devices on the same network (e.g., a mobile
+     * phone) to load the webpack assets.
+     */
+    host:    "0.0.0.0",
     hot:     true,
     open:    false,
     headers: {

base-theme/layouts/partials/webpack_url.html

@@ -1,4 +1,4 @@
-{{- $port := getenv "WEBPACK_PORT" -}}
+{{- $port := getenv "WEBPACK_PORT" | default 3001 -}}
 {{- if or site.IsServer (not (eq site.BaseURL "")) -}}
   {{- if or site.IsServer (in site.BaseURL ":3000") -}}
     {{- if hasPrefix .url "/" -}}

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "lint": "eslint {base-theme,course,course-v2,fields,util,www,tests-e2e}",
     "start": "echo \"Run 'npm run start:www' or 'npm run start:course'\"",
-    "start:webpack": "dotenv -- webpack serve --config ./base-theme/assets/webpack/webpack.dev.ts --hot --host 0.0.0.0 --stats-children",
+    "start:webpack": "dotenv -- webpack serve --config ./base-theme/assets/webpack/webpack.dev.ts",
     "start:www": "dotenv -- concurrently \"npm:start:webpack\" \"npm:start:www:hugo\" --kill-others",
     "start:course": "dotenv -- concurrently \"npm:start:webpack\" \"npm:start:course:hugo\" --kill-others",
     "start:fields": "dotenv -- concurrently \"npm:start:webpack\" \"npm:start:fields:hugo\" --kill-others",

playwright.config.ts

@@ -6,7 +6,7 @@ import * as envalid from "envalid"
 
 dotenv.config()
 const env = envalid.cleanEnv(process.env, {
-  WEBPACK_PORT: envalid.port()
+  WEBPACK_PORT: envalid.port({ default: 3001 })
 })
 
 /**

tests-e2e/global-setup.ts

@@ -9,10 +9,9 @@ import handler from "serve-handler"
 import Table from "cli-table3"
 import * as color from "ansi-colors"
 
-
 dotenv.config()
 const env = envalid.cleanEnv(process.env, {
-  WEBPACK_PORT: envalid.port()
+  WEBPACK_PORT: envalid.port({ default: 3001 })
 })
 
 const execSh = execShCb.promise
@@ -69,12 +68,14 @@ const setupTests = async () => {
     table.push([site.name, `http://localhost:${site.port}`])
   })
 
-  console.log([
-    "\n",
-    color.bold("Now serving the following sites:\n"),
-    table.toString(),
-    "\n"
-  ].join(""))
+  console.log(
+    [
+      "\n",
+      color.bold("Now serving the following sites:\n"),
+      table.toString(),
+      "\n"
+    ].join("")
+  )
 }
 
 export default setupTests