From 5d793b4e36f22629f931bf2e6a135d3ff890f627 Mon Sep 17 00:00:00 2001 From: ibrahimjaved12 <109785089+ibrahimjaved12@users.noreply.github.com> Date: Tue, 14 Mar 2023 18:02:08 +0500 Subject: [PATCH] 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 Co-authored-by: IbrahimJaved --- .github/workflows/ci.yml | 2 ++ .gitignore | 1 + .prettierignore | 3 ++- .../images/Facebook.png | Bin .../images/Instagram.png | Bin .../images/LinkedIn.png | Bin .../images/MIT-logo-red-gray-54x28.svg | 0 .../images/Twitter.png | Bin .../images/Youtube.png | Bin .../images/a_logo_17.gif | Bin .../images/audio_thumbnail.png | Bin .../images/button_start.png | Bin .../images/close_small.svg | 0 .../images/course_image.jpg | Bin .../images/download.svg | 0 .../images/expand.svg | 0 .../images/file_thumbnail.png | Bin .../static_shared => assets}/images/heart.svg | 0 .../images/inacessible.gif | Bin .../images/left_arrow.svg | 0 .../images/mit-logo-black-red.svg | 0 .../images/mit-logo-red.svg | 0 .../images/mit-ol.png | Bin .../images/mobile_video_thumbnail.png | Bin .../images/mp_logo.gif | Bin .../images/ocw_logo.jpg | Bin .../images/ocw_logo_orange.png | Bin .../images/ocw_logo_white_v2.svg | 0 .../images/oeg_logo.png | Bin .../images/page_thumbnail.png | Bin .../images/pdf_thumbnail.png | Bin .../images/video_play_overlay.png | Bin .../images/video_thumbnail.png | Bin .../images/youtube.svg | 0 base-theme/assets/webpack/webpack.common.ts | 6 +++++ base-theme/assets/webpack/webpack.dev.ts | 25 +++--------------- base-theme/assets/webpack/webpack.prod.ts | 2 +- base-theme/layouts/partials/webpack_url.html | 17 +----------- env.ts | 4 +++ package.json | 3 ++- playwright.config.ts | 8 ------ tests-e2e/LocalOcw.ts | 11 ++------ tsconfig.json | 2 +- 43 files changed, 25 insertions(+), 59 deletions(-) rename base-theme/{static/static_shared => assets}/images/Facebook.png (100%) rename base-theme/{static/static_shared => assets}/images/Instagram.png (100%) rename base-theme/{static/static_shared => assets}/images/LinkedIn.png (100%) rename base-theme/{static/static_shared => assets}/images/MIT-logo-red-gray-54x28.svg (100%) rename base-theme/{static/static_shared => assets}/images/Twitter.png (100%) rename base-theme/{static/static_shared => assets}/images/Youtube.png (100%) rename base-theme/{static/static_shared => assets}/images/a_logo_17.gif (100%) rename base-theme/{static/static_shared => assets}/images/audio_thumbnail.png (100%) rename base-theme/{static/static_shared => assets}/images/button_start.png (100%) rename base-theme/{static/static_shared => assets}/images/close_small.svg (100%) rename base-theme/{static/static_shared => assets}/images/course_image.jpg (100%) rename base-theme/{static/static_shared => assets}/images/download.svg (100%) rename base-theme/{static/static_shared => assets}/images/expand.svg (100%) rename base-theme/{static/static_shared => assets}/images/file_thumbnail.png (100%) rename base-theme/{static/static_shared => assets}/images/heart.svg (100%) rename base-theme/{static/static_shared => assets}/images/inacessible.gif (100%) rename base-theme/{static/static_shared => assets}/images/left_arrow.svg (100%) rename base-theme/{static/static_shared => assets}/images/mit-logo-black-red.svg (100%) rename base-theme/{static/static_shared => assets}/images/mit-logo-red.svg (100%) rename base-theme/{static/static_shared => assets}/images/mit-ol.png (100%) rename base-theme/{static/static_shared => assets}/images/mobile_video_thumbnail.png (100%) rename base-theme/{static/static_shared => assets}/images/mp_logo.gif (100%) rename base-theme/{static/static_shared => assets}/images/ocw_logo.jpg (100%) rename base-theme/{static/static_shared => assets}/images/ocw_logo_orange.png (100%) rename base-theme/{static/static_shared => assets}/images/ocw_logo_white_v2.svg (100%) rename base-theme/{static/static_shared => assets}/images/oeg_logo.png (100%) rename base-theme/{static/static_shared => assets}/images/page_thumbnail.png (100%) rename base-theme/{static/static_shared => assets}/images/pdf_thumbnail.png (100%) rename base-theme/{static/static_shared => assets}/images/video_play_overlay.png (100%) rename base-theme/{static/static_shared => assets}/images/video_thumbnail.png (100%) rename base-theme/{static/static_shared => assets}/images/youtube.svg (100%) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 287a0d2ae..e7f5ae2cc 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/.gitignore b/.gitignore index 6550fd300..a4fbff302 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,7 @@ private/* *~ *.pem +base-theme/static # Byte-compiled / optimized / DLL files __pycache__/ diff --git a/.prettierignore b/.prettierignore index fe17425e4..d31691303 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,2 @@ -**/dist \ No newline at end of file +**/dist +**/static diff --git a/base-theme/static/static_shared/images/Facebook.png b/base-theme/assets/images/Facebook.png similarity index 100% rename from base-theme/static/static_shared/images/Facebook.png rename to base-theme/assets/images/Facebook.png diff --git a/base-theme/static/static_shared/images/Instagram.png b/base-theme/assets/images/Instagram.png similarity index 100% rename from base-theme/static/static_shared/images/Instagram.png rename to base-theme/assets/images/Instagram.png diff --git a/base-theme/static/static_shared/images/LinkedIn.png b/base-theme/assets/images/LinkedIn.png similarity index 100% rename from base-theme/static/static_shared/images/LinkedIn.png rename to base-theme/assets/images/LinkedIn.png diff --git a/base-theme/static/static_shared/images/MIT-logo-red-gray-54x28.svg b/base-theme/assets/images/MIT-logo-red-gray-54x28.svg similarity index 100% rename from base-theme/static/static_shared/images/MIT-logo-red-gray-54x28.svg rename to base-theme/assets/images/MIT-logo-red-gray-54x28.svg diff --git a/base-theme/static/static_shared/images/Twitter.png b/base-theme/assets/images/Twitter.png similarity index 100% rename from base-theme/static/static_shared/images/Twitter.png rename to base-theme/assets/images/Twitter.png diff --git a/base-theme/static/static_shared/images/Youtube.png b/base-theme/assets/images/Youtube.png similarity index 100% rename from base-theme/static/static_shared/images/Youtube.png rename to base-theme/assets/images/Youtube.png diff --git a/base-theme/static/static_shared/images/a_logo_17.gif b/base-theme/assets/images/a_logo_17.gif similarity index 100% rename from base-theme/static/static_shared/images/a_logo_17.gif rename to base-theme/assets/images/a_logo_17.gif diff --git a/base-theme/static/static_shared/images/audio_thumbnail.png b/base-theme/assets/images/audio_thumbnail.png similarity index 100% rename from base-theme/static/static_shared/images/audio_thumbnail.png rename to base-theme/assets/images/audio_thumbnail.png diff --git a/base-theme/static/static_shared/images/button_start.png b/base-theme/assets/images/button_start.png similarity index 100% rename from base-theme/static/static_shared/images/button_start.png rename to base-theme/assets/images/button_start.png diff --git a/base-theme/static/static_shared/images/close_small.svg b/base-theme/assets/images/close_small.svg similarity index 100% rename from base-theme/static/static_shared/images/close_small.svg rename to base-theme/assets/images/close_small.svg diff --git a/base-theme/static/static_shared/images/course_image.jpg b/base-theme/assets/images/course_image.jpg similarity index 100% rename from base-theme/static/static_shared/images/course_image.jpg rename to base-theme/assets/images/course_image.jpg diff --git a/base-theme/static/static_shared/images/download.svg b/base-theme/assets/images/download.svg similarity index 100% rename from base-theme/static/static_shared/images/download.svg rename to base-theme/assets/images/download.svg diff --git a/base-theme/static/static_shared/images/expand.svg b/base-theme/assets/images/expand.svg similarity index 100% rename from base-theme/static/static_shared/images/expand.svg rename to base-theme/assets/images/expand.svg diff --git a/base-theme/static/static_shared/images/file_thumbnail.png b/base-theme/assets/images/file_thumbnail.png similarity index 100% rename from base-theme/static/static_shared/images/file_thumbnail.png rename to base-theme/assets/images/file_thumbnail.png diff --git a/base-theme/static/static_shared/images/heart.svg b/base-theme/assets/images/heart.svg similarity index 100% rename from base-theme/static/static_shared/images/heart.svg rename to base-theme/assets/images/heart.svg diff --git a/base-theme/static/static_shared/images/inacessible.gif b/base-theme/assets/images/inacessible.gif similarity index 100% rename from base-theme/static/static_shared/images/inacessible.gif rename to base-theme/assets/images/inacessible.gif diff --git a/base-theme/static/static_shared/images/left_arrow.svg b/base-theme/assets/images/left_arrow.svg similarity index 100% rename from base-theme/static/static_shared/images/left_arrow.svg rename to base-theme/assets/images/left_arrow.svg diff --git a/base-theme/static/static_shared/images/mit-logo-black-red.svg b/base-theme/assets/images/mit-logo-black-red.svg similarity index 100% rename from base-theme/static/static_shared/images/mit-logo-black-red.svg rename to base-theme/assets/images/mit-logo-black-red.svg diff --git a/base-theme/static/static_shared/images/mit-logo-red.svg b/base-theme/assets/images/mit-logo-red.svg similarity index 100% rename from base-theme/static/static_shared/images/mit-logo-red.svg rename to base-theme/assets/images/mit-logo-red.svg diff --git a/base-theme/static/static_shared/images/mit-ol.png b/base-theme/assets/images/mit-ol.png similarity index 100% rename from base-theme/static/static_shared/images/mit-ol.png rename to base-theme/assets/images/mit-ol.png diff --git a/base-theme/static/static_shared/images/mobile_video_thumbnail.png b/base-theme/assets/images/mobile_video_thumbnail.png similarity index 100% rename from base-theme/static/static_shared/images/mobile_video_thumbnail.png rename to base-theme/assets/images/mobile_video_thumbnail.png diff --git a/base-theme/static/static_shared/images/mp_logo.gif b/base-theme/assets/images/mp_logo.gif similarity index 100% rename from base-theme/static/static_shared/images/mp_logo.gif rename to base-theme/assets/images/mp_logo.gif diff --git a/base-theme/static/static_shared/images/ocw_logo.jpg b/base-theme/assets/images/ocw_logo.jpg similarity index 100% rename from base-theme/static/static_shared/images/ocw_logo.jpg rename to base-theme/assets/images/ocw_logo.jpg diff --git a/base-theme/static/static_shared/images/ocw_logo_orange.png b/base-theme/assets/images/ocw_logo_orange.png similarity index 100% rename from base-theme/static/static_shared/images/ocw_logo_orange.png rename to base-theme/assets/images/ocw_logo_orange.png diff --git a/base-theme/static/static_shared/images/ocw_logo_white_v2.svg b/base-theme/assets/images/ocw_logo_white_v2.svg similarity index 100% rename from base-theme/static/static_shared/images/ocw_logo_white_v2.svg rename to base-theme/assets/images/ocw_logo_white_v2.svg diff --git a/base-theme/static/static_shared/images/oeg_logo.png b/base-theme/assets/images/oeg_logo.png similarity index 100% rename from base-theme/static/static_shared/images/oeg_logo.png rename to base-theme/assets/images/oeg_logo.png diff --git a/base-theme/static/static_shared/images/page_thumbnail.png b/base-theme/assets/images/page_thumbnail.png similarity index 100% rename from base-theme/static/static_shared/images/page_thumbnail.png rename to base-theme/assets/images/page_thumbnail.png diff --git a/base-theme/static/static_shared/images/pdf_thumbnail.png b/base-theme/assets/images/pdf_thumbnail.png similarity index 100% rename from base-theme/static/static_shared/images/pdf_thumbnail.png rename to base-theme/assets/images/pdf_thumbnail.png diff --git a/base-theme/static/static_shared/images/video_play_overlay.png b/base-theme/assets/images/video_play_overlay.png similarity index 100% rename from base-theme/static/static_shared/images/video_play_overlay.png rename to base-theme/assets/images/video_play_overlay.png diff --git a/base-theme/static/static_shared/images/video_thumbnail.png b/base-theme/assets/images/video_thumbnail.png similarity index 100% rename from base-theme/static/static_shared/images/video_thumbnail.png rename to base-theme/assets/images/video_thumbnail.png diff --git a/base-theme/static/static_shared/images/youtube.svg b/base-theme/assets/images/youtube.svg similarity index 100% rename from base-theme/static/static_shared/images/youtube.svg rename to base-theme/assets/images/youtube.svg diff --git a/base-theme/assets/webpack/webpack.common.ts b/base-theme/assets/webpack/webpack.common.ts index 3d9d077b5..a65c5a6c0 100644 --- a/base-theme/assets/webpack/webpack.common.ts +++ b/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/" }] }), diff --git a/base-theme/assets/webpack/webpack.dev.ts b/base-theme/assets/webpack/webpack.dev.ts index 5a2d8c27f..6d905c3bf 100644 --- a/base-theme/assets/webpack/webpack.dev.ts +++ b/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({ diff --git a/base-theme/assets/webpack/webpack.prod.ts b/base-theme/assets/webpack/webpack.prod.ts index dc237b625..2f633306f 100644 --- a/base-theme/assets/webpack/webpack.prod.ts +++ b/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" }, diff --git a/base-theme/layouts/partials/webpack_url.html b/base-theme/layouts/partials/webpack_url.html index a5b4944d7..5657e54c6 100644 --- a/base-theme/layouts/partials/webpack_url.html +++ b/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 -}} diff --git a/env.ts b/env.ts index 109d4af29..a2e16f75f 100644 --- a/env.ts +++ b/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 }) } diff --git a/package.json b/package.json index 10c3cac80..f0c3a7a61 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "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.", @@ -15,6 +15,7 @@ "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", diff --git a/playwright.config.ts b/playwright.config.ts index ae046dca2..dae5c4fdc 100644 --- a/playwright.config.ts +++ b/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") } diff --git a/tests-e2e/LocalOcw.ts b/tests-e2e/LocalOcw.ts index 0cd220075..62c36429c 100644 --- a/tests-e2e/LocalOcw.ts +++ b/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) diff --git a/tsconfig.json b/tsconfig.json index 744419467..aaca8e737 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,7 @@ "dom" ], "jsx": "react", - "module": "ES6", + "module": "ES2020", "moduleResolution": "node", "typeRoots": [ "node_modules/@types",