feat: update webpack config; HugoServer and Webpack Port to be same (…

…3000) (#1102)

* move images to assets

* ignore static/static_shared

* run webpack in watch mode, not server

* remove unused env import

* fix: append slash on publicPath

* fix: update path for images

* remove: remove RedirectionRule for OCW_STATIC_SHARED

* remove: unused env imports

* add back RedirectionRule for OCW_STATIC_SHARED

* fix OCW_STATIC_SHARED usage

* fix OCW_STATIC_SHARED usage

* try to pass e2e test

* try to pass playwright test

* try to pass playwright test

* try to pass playwright test

* remove static_shared transform rule

* test playwright test

* remove package.json changes

* try running playwright on webpack dev

* try to fix formatting issues

* add new line

* add static directory in .prettierignore and run yarn fmt

* add newline at end prettierignore

---------

Co-authored-by: Chris Chudzicki <[email protected]>
Co-authored-by: IbrahimJaved <[email protected]>

.github/workflows/ci.yml

@@ -52,6 +52,8 @@ jobs:
       run: yarn test:e2e:jest
     - name: Install Playwright Browsers
       run: npx playwright install --with-deps
+    - name: Build Webpack
+      run: yarn build:webpack:dev
     - name: Run Playwright tests
       run: yarn test:e2e
     - uses: actions/upload-artifact@v3

.gitignore

@@ -14,6 +14,7 @@ private/*
 *~
 *.pem
 
+base-theme/static
 
 # Byte-compiled / optimized / DLL files
 __pycache__/

.prettierignore

@@ -1 +1,2 @@
-**/dist
+**/dist
+**/static

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

@@ -134,6 +134,12 @@ const config: webpack.Configuration = {
       ]
     }),
 
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: "./base-theme/assets/images/", to: "images/[name][ext]" }
+      ]
+    }),
+
     new CopyWebpackPlugin({
       patterns: [{ from: "./node_modules/mathjax/es5/", to: "mathjax/" }]
     }),

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

@@ -11,33 +11,14 @@ const devOverrides: Configuration = {
   mode: "development",
 
   output: {
-    path:       path.join(__dirname, "../../dist/static_shared"),
-    publicPath: "/static_shared",
+    path:       path.join(__dirname, "../../static/static_shared"),
+    publicPath: "/static_shared/",
     filename:   "js/[name].js"
   },
 
   devtool: "eval-source-map",
 
-  devServer: {
-    port:    env.WEBPACK_PORT,
-    /**
-     * This is intentially not set to the WEBPACK_HOST environment variable.
-     * WEBPACK_HOST tells Hugo how to query webpack. Binding the dev server to
-     * 0.0.0 allows testing OCW on other devices within your local network.
-     */
-    host:    "0.0.0.0",
-    hot:     true,
-    open:    false,
-    headers: {
-      "Access-Control-Allow-Origin":  "*",
-      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
-      "Access-Control-Allow-Headers":
-        "X-Requested-With, content-type, Authorization"
-    },
-    historyApiFallback: {
-      rewrites: [{ from: /./, to: "404.html" }]
-    }
-  },
+  watch: env.WEBPACK_WATCH_MODE,
 
   plugins: [
     new CleanWebpackPlugin({

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

@@ -12,7 +12,7 @@ const prodOverrides: Configuration = {
 
   output: {
     path:       path.join(__dirname, "../../dist/static_shared"),
-    publicPath: "/static_shared",
+    publicPath: "/static_shared/",
     filename:   "js/[name].[fullhash:5].js"
   },
 

base-theme/layouts/partials/webpack_url.html

@@ -1,16 +1 @@
-{{- $port := getenv "WEBPACK_PORT" -}}
-{{- $host := getenv "WEBPACK_HOST" -}}
-{{- $webpackBase := print "http://" $host ":" $port -}}
-{{- if or site.IsServer (not (eq site.BaseURL "")) -}}
-  {{- if or site.IsServer (in site.BaseURL ":3000") -}}
-    {{- if hasPrefix .url "/" -}}
-      {{- print $webpackBase .url -}}
-    {{- else -}}
-      {{- print $webpackBase "/" .url -}}
-    {{- end -}}
-  {{- else -}}
-    {{- partial "site_root_url.html" .url -}}
-  {{- end -}}
-{{- else -}}
-  {{- partial "site_root_url.html" .url -}}
-{{- end -}}
+{{- partial "site_root_url.html" .url -}}

env.ts

@@ -107,6 +107,10 @@ const envSchema = {
       __dirname,
       "../ocw-hugo-projects/ocw-www/config.yaml"
     )
+  }),
+  WEBPACK_WATCH_MODE: envalid.bool({
+    desc:       "Turns webpack watch mode on",
+    devDefault: true
   })
 }
 

package.json

@@ -7,14 +7,15 @@
   "scripts": {
     "lint": "eslint $PROJECT_CWD/'**/*.{js,jsx,ts,tsx}'",
     "start": "NODE_ENV=development ts-node ./package_scripts/start.ts",
-    "start:webpack": "yarn with-env --dev -- webpack serve --config ./base-theme/assets/webpack/webpack.dev.ts --hot --stats-children",
+    "start:webpack": "yarn with-env --dev -- webpack --config ./base-theme/assets/webpack/webpack.dev.ts --stats-children",
     "start:www": "echo This command has been removed. Use `yarn start www` instead.",
     "start:course": "echo This command has been removed. Use `yarn start course` instead.",
     "start:fields": "echo This command has been removed. Use `yarn start fields` instead.",
     "prebuild": "rimraf dist",
     "build": "yarn with-env -- ./package_scripts/build.sh",
     "build:githash": "mkdir -p base-theme/dist/static && git rev-parse HEAD > base-theme/dist/static/hash.txt",
     "build:hugo": "hugo -d ../dist -v",
+    "build:webpack:dev": "cross-env NODE_ENV=development WEBPACK_WATCH_MODE=false webpack --config base-theme/assets/webpack/webpack.dev.ts",
     "build:hugo:debug": "hugo -d ../dist -v --templateMetrics --debug",
     "build:webpack": "cross-env NODE_ENV=production webpack --config base-theme/assets/webpack/webpack.prod.ts",
     "webpack:stats": "NODE_ENV=production webpack --config base-theme/assets/webpack/webpack.prod.ts --profile --json > stats.json",

playwright.config.ts

@@ -1,7 +1,6 @@
 import { PlaywrightTestConfig } from "@playwright/test"
 import { devices } from "@playwright/test"
 import * as path from "path"
-import { env } from "./env"
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -31,13 +30,6 @@ const config: PlaywrightTestConfig = {
       }
     }
   ],
-  webServer: {
-    command:             "yarn start:webpack",
-    // This just needs to be some address that returns 200 when webpack has finished compiling.
-    // It finishes all the files concurrently, so any file will work fine.
-    url:                 `http://0.0.0.0:${env.WEBPACK_PORT}/static_shared/js/www.js`,
-    reuseExistingServer: !process.env.CI
-  },
   globalSetup: path.resolve(__dirname, "./tests-e2e/global-setup.ts")
 }
 

tests-e2e/LocalOcw.ts

@@ -13,7 +13,7 @@ import {
   TestSiteAlias
 } from "./util/test_sites"
 import SimpleServer, { RedirectionRule } from "./util/SimpleServer"
-import { env, cleanEnv, stringifyEnv } from "../env"
+import { cleanEnv, stringifyEnv } from "../env"
 import { hugo } from "../package_scripts/util"
 
 const execSh = execShCb.promise
@@ -179,14 +179,7 @@ class LocalOCW {
         })
       },
       {
-        rules: [
-          {
-            type:      "redirect",
-            match:     /^\/static_shared\//,
-            transform: url => `http://localhost:${env.WEBPACK_PORT}${url}`
-          },
-          OCW_WWW_REWRITE
-        ]
+        rules: [OCW_WWW_REWRITE]
       }
     )
     server.listen(LOCAL_OCW_PORT)

tsconfig.json

@@ -7,7 +7,7 @@
       "dom"
     ],
     "jsx": "react",
-    "module": "ES6",
+    "module": "ES2020",
     "moduleResolution": "node",
     "typeRoots": [
       "node_modules/@types",