move to webpack for cache busting and other benefits (FAForever#497)

move to webpack for cache busting

.github/workflows/code-quality.yml

@@ -18,5 +18,6 @@ jobs:
     - run: yarn install
     # --force should be removed if all the issues are fixed
     - run: ./node_modules/.bin/grunt jshint --force
+    - run: npx webpack
     - run: yarn run test
     - uses: codecov/codecov-action@v3

.gitignore

@@ -50,3 +50,5 @@ public/js/*.js
 
 #Sessions
 sessions
+
+dist

Dockerfile

@@ -6,6 +6,7 @@ COPY . /code
 WORKDIR /code
 
 RUN yarn install --production=false --frozen-lockfile
+RUN npx webpack
 RUN ./node_modules/.bin/grunt prod
 RUN yarn install --production=true --ignore-optional --frozen-lockfile
 

Gruntfile.js

@@ -22,7 +22,5 @@ module.exports = function(grunt) {
 
   grunt.registerTask('prod', [
     'sass:dist',
-    'concat:js',
-    'uglify:dist'
   ]);
 };

fafApp.js

@@ -72,6 +72,11 @@ module.exports.setup = (app) => {
         maxAge: 4 * 60 * 60 * 1000 // 4 hours
     }))
 
+    app.use('/dist', express.static('dist', {
+        immutable: true,
+        maxAge: 4 * 60 * 60 * 1000 // 4 hours, could be longer since we got cache-busting
+    }))
+
     app.use(express.json())
     app.use(bodyParser.json())
     app.use(bodyParser.urlencoded({extended: false}))
@@ -90,5 +95,6 @@ module.exports.setup = (app) => {
     app.use(passport.session())
     app.use(flash())
     app.use(middleware.username)
+    app.use(middleware.webpackAsset)
     app.use(copyFlashHandler)
 }

grunt/concurrent.js

@@ -1,6 +1,6 @@
 module.exports = {
 	dev: {
-		tasks: ['nodemon', 'concat', 'watch'],
+		tasks: [['run:webpack', 'sass:dev','nodemon'], 'watch'],
 		options: {
 			logConcurrentOutput: true
 		}

grunt/nodemon.js

@@ -4,6 +4,7 @@ module.exports = {
     options: {
       delay: 500,
       ignore: [
+        'dist/js/*.js',
         'sessions/**',
         'node_modules/**',
         'grunt/**',

grunt/run.js

@@ -0,0 +1,5 @@
+module.exports = {
+    webpack: {
+        args: ['node_modules/.bin/webpack'],
+    }
+};

grunt/watch.js

@@ -1,23 +1,10 @@
 module.exports = {
-	js: {
-		files: [
-			'public/js/app/*.js'
-		],
-		tasks: ['concat:js'],
-	},
-	express: {
-		files: [
-      'routes/**/*.js',
-			'express.js',
-		]
-	},
+    webpack: {
+        files: ['src/frontend/**/*.js'],
+        tasks: ['run:webpack']
+    },
 	sass: {
 		files: ['public/styles/**/*.{scss,sass}'],
 		tasks: ['sass:dev']
-	},
-	livereload: {
-		files: [
-			'public/styles/**/*.css'
-		],
 	}
 };

package.json

@@ -29,18 +29,21 @@
     "dart-sass": "^1.25.0",
     "grunt": "1.6.1",
     "grunt-concurrent": "3.0.0",
-    "grunt-contrib-concat": "^2.1.0",
     "grunt-contrib-jshint": "^3.2.0",
-    "grunt-contrib-uglify-es": "3.3.0",
     "grunt-contrib-watch": "^1.1.0",
     "grunt-nodemon": "^0.4.2",
     "grunt-postcss": "0.9.0",
+    "grunt-run": "^0.8.1",
     "grunt-sass": "3.1.0",
     "jest": "^29.7.0",
     "jshint-stylish": "2.2.1",
     "load-grunt-config": "4.0.1",
     "load-grunt-tasks": "5.1.0",
-    "supertest": "^6.3.3"
+    "octokit": "^3.1.2",
+    "supertest": "^6.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-manifest-plugin": "^5.0.0"
   },
   "engines": {
     "node": ">=20.9.0",
@@ -49,6 +52,5 @@
   "scripts": {
     "start": "node express.js",
     "test": "jest"
-  },
-  "main": "express.js"
+  }
 }

routes/middleware.js

@@ -1,6 +1,8 @@
 const WordpressServiceFactory = require("../lib/WordpressServiceFactory");
 const appConfig = require("../config/app");
 const wordpressService = WordpressServiceFactory(appConfig.wordpressUrl)
+const fs = require('fs');
+const webpackManifestJS = JSON.parse(fs.readFileSync('dist/js/manifest.json', 'utf8'));
 
 exports.initLocals = function(req, res, next) {
 	let locals = res.locals;
@@ -9,6 +11,18 @@ exports.initLocals = function(req, res, next) {
   next();
 };
 
+exports.webpackAsset = (req, res, next) => {
+    res.locals.webpackAssetJS = (asset) => {
+        if (asset in webpackManifestJS) {
+            return webpackManifestJS[asset]
+        }
+
+        throw new Error('[error] middleware::webpackAsset Failed to find asset "' + asset + '"')
+    }
+
+    next()
+}
+
 exports.username = function(req, res, next) {
   var locals = res.locals;
 

public/js/app/play.js → src/frontend/js/entrypoint/play.js

@@ -1,4 +1,4 @@
-import {Octokit} from "https://esm.sh/@octokit/core";
+import {Octokit} from "octokit";
 
 const githubOrg = 'faforever'
 const githubRepository = 'downlords-faf-client'

templates/layouts/default.pug

@@ -282,7 +282,7 @@ html(lang='en')
             li
               a(href='https://forum.faforever.com/')  FORUMS
 
-      script(src="../../js/app/navigation.js")
+      script(src=webpackAssetJS('navigation'))
 
       //- Include template-specific javascript files by extending the js block
       block js

templates/views/account/activate.pug

@@ -34,7 +34,3 @@ block content
           br
           br
           br
-
-
-block js
-  script(src='/js/account.min.js')

templates/views/account/changeEmail.pug

@@ -20,6 +20,3 @@ block content
                     +currentPassword
                     .form-actions
                         button(type='submit').btn.btn-default.btn-lg.btn-outro.btn-danger Change Email
-
-block js
-    script(src='/js/account.min.js')

templates/views/account/changeUsername.pug

@@ -17,5 +17,3 @@ block content
                 +username
                 .form-actions
                     button(type='submit').btn.btn-default.btn-lg.btn-outro.btn-danger Change
-block js
-    script(src='/js/account.min.js')

templates/views/account/confirmPasswordReset.pug

@@ -18,6 +18,3 @@ block content
                     +confirm-password
                     .form-actions
                         button(type='submit').btn.btn-default.btn-lg.btn-outro.btn-danger Reset
-
-block js
-    script(src='/js/account.min.js')

templates/views/account/linkGog.pug

@@ -67,7 +67,3 @@ block content
         h2 Why do I need to link my Steam/GOG account to FAF?
           p FAF as an organization doesn't own the copyright or trademark to SC:FA (Square Enix does). <br> Therefore, we need to verify you own a copy of SC:FA to prevent piracy.
           p Linking your GOG account to FAF doesn't provide us with any information or powers over your account. <br> Only the fact that you own Supreme Commander: Forged Alliance. <br> Which is why we need you to set your Game Details to public when linking your account.
-
-
-block js
-  script(src='/js/account.min.js')

templates/views/account/linkSteam.pug

@@ -49,9 +49,3 @@ block content
         h2 Why do I need to link my Steam/GOG account to FAF?
           p FAF as an organization doesn't own the copyright or trademark to SC:FA (Square Enix does). <br> Therefore, we need to verify you own a copy of SC:FA to prevent piracy.
           p Linking your steam account to FAF doesn't provide us with any information or powers over your account. <br> Only the fact that you own Supreme Commander: Forged Alliance. <br> Which is why we need you to set your Game Details to public when linking your account.
-
-
-
-
-block js
-    script(src='/js/account.min.js')

templates/views/account/register.pug

@@ -33,5 +33,4 @@ block content
 
 
 block js
-  script(src='/js/account.min.js')
   script(src='//www.google.com/recaptcha/api.js')

templates/views/account/report.pug

@@ -109,5 +109,4 @@ block js
     const reportable_members = '!{JSON.stringify(reportable_members)}';
     const offenders_names = '!{JSON.stringify(offenders_names)}';
 
-  script(src='/js/account.min.js')
-  script(src="/js/report.min.js")
+  script(src=webpackAssetJS('report'))

templates/views/account/requestPasswordReset.pug

@@ -44,5 +44,4 @@ block content
     br
 
 block js
-    script(src='/js/account.min.js')
     script(src='//www.google.com/recaptcha/api.js')

templates/views/clans.pug

@@ -75,6 +75,5 @@ block content
           li(onclick= `pageChange(pageNumber + 1)`).pageButton Next
 
 block js
-
-  script( src="../../js/app/clans.js")
+  script( src=webpackAssetJS('clans'))
 

templates/views/clans/seeClan.pug

@@ -24,4 +24,4 @@ block content
 
 
 block js
-  script( src="../../js/app/getClans.js")
+  script( src=webpackAssetJS('getClans'))

templates/views/content-creators.pug

@@ -9,4 +9,4 @@ block content
 
 block js
 
-  script(src="../../js/app/content-creators.js")
+  script(src=webpackAssetJS('content-creators'))

templates/views/donation.pug

@@ -31,5 +31,5 @@ block js
   script(src="https://code.highcharts.com/modules/exporting.js")
   script(src="https://code.highcharts.com/modules/export-data.js")
   script(src="https://code.highcharts.com/modules/accessibility.js")
-  script(src="../../js/app/donation.js")       
+  script(src=webpackAssetJS('donation'))       
 

templates/views/faf-teams.pug

@@ -58,5 +58,5 @@ block content
 
 
 block js
-  script(src="../../js/app/faf-teams.js")
+  script(src=webpackAssetJS('faf-teams'))
 

templates/views/leaderboards.pug

@@ -88,5 +88,5 @@ block content
           .categoryButton(onclick= `pageChange(pageNumber + 1)`).pageButton Next
 
 block js
-  script( src="../../js/app/leaderboards.js")
+  script(src=webpackAssetJS('leaderboards'))
 

templates/views/newshub.pug

@@ -80,4 +80,4 @@ body
           ul.column12 UPCOMING TOURNAMENTS/EVENTS
 
 
-script(src="../../js/app/newshub.js")
+script(src=webpackAssetJS('newshub'))

templates/views/play.pug

@@ -98,5 +98,5 @@ block content
         iframe(style="width:75%; height:45vh;" src="https://www.youtube.com/embed/Nks9loE96ok" title="NEW TO FAF? || SUPREME COMMANDER TUTORIAL", allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"  allowfullscreen )
 
 block js
-  script(src="../../js/app/play.js" type="module" defer="true")
+  script(src=webpackAssetJS('play'))
 

webpack.config.js

@@ -0,0 +1,27 @@
+const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
+const path = require("path");
+
+module.exports = {
+    mode: "production",
+    entry: {
+        "clans": ["./src/frontend/js/entrypoint/clans.js"],
+        "content-creators": ["./src/frontend/js/entrypoint/content-creators.js"],
+        "donation": ["./src/frontend/js/entrypoint/donation.js"],
+        "faf-teams": ["./src/frontend/js/entrypoint/faf-teams.js"],
+        "getClans": ["./src/frontend/js/entrypoint/getClans.js"],
+        "leaderboards": ["./src/frontend/js/entrypoint/leaderboards.js"],
+        "navigation": ["./src/frontend/js/entrypoint/navigation.js"],
+        "newshub": ["./src/frontend/js/entrypoint/newshub.js"],
+        "play": ["./src/frontend/js/entrypoint/play.js"],
+        "report": ["./src/frontend/js/entrypoint/report.js"],
+    },
+    output: {
+        filename: "[name].[contenthash].js",
+        path: path.resolve(__dirname, "dist/js"),
+        publicPath: "/dist/js",
+        clean: true,
+    },
+    plugins: [
+        new WebpackManifestPlugin({ useEntryKeys: true }),
+    ],
+};