Skip to content

Commit

Permalink
move to webpack for cache busting
Browse files Browse the repository at this point in the history
  • Loading branch information
fcaps committed Nov 26, 2023
1 parent ef213c4 commit 070a74d
Show file tree
Hide file tree
Showing 43 changed files with 971 additions and 369 deletions.
1 change: 1 addition & 0 deletions .github/workflows/code-quality.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,5 @@ public/js/*.js

#Sessions
sessions

dist
1 change: 1 addition & 0 deletions Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 0 additions & 2 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,5 @@ module.exports = function(grunt) {

grunt.registerTask('prod', [
'sass:dist',
'concat:js',
'uglify:dist'
]);
};
6 changes: 6 additions & 0 deletions fafApp.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}))
Expand All @@ -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)
}
17 changes: 0 additions & 17 deletions grunt/concat.js

This file was deleted.

2 changes: 1 addition & 1 deletion grunt/concurrent.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = {
dev: {
tasks: ['nodemon', 'concat', 'watch'],
tasks: [['run:webpack', 'sass:dev','nodemon'], 'watch'],
options: {
logConcurrentOutput: true
}
Expand Down
1 change: 1 addition & 0 deletions grunt/nodemon.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ module.exports = {
options: {
delay: 500,
ignore: [
'dist/js/*.js',
'sessions/**',
'node_modules/**',
'grunt/**',
Expand Down
5 changes: 5 additions & 0 deletions grunt/run.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
webpack: {
args: ['node_modules/.bin/webpack'],
}
};
11 changes: 0 additions & 11 deletions grunt/uglify.js

This file was deleted.

21 changes: 4 additions & 17 deletions grunt/watch.js
Original file line number Diff line number Diff line change
@@ -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'
],
}
};
12 changes: 7 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -49,6 +52,5 @@
"scripts": {
"start": "node express.js",
"test": "jest"
},
"main": "express.js"
}
}
14 changes: 14 additions & 0 deletions routes/middleware.js
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;

Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Octokit} from "https://esm.sh/@octokit/core";
import {Octokit} from "octokit";

const githubOrg = 'faforever'
const githubRepository = 'downlords-faf-client'
Expand Down
File renamed without changes.
2 changes: 1 addition & 1 deletion templates/layouts/default.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 0 additions & 4 deletions templates/views/account/activate.pug
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,3 @@ block content
br
br
br


block js
script(src='/js/account.min.js')
3 changes: 0 additions & 3 deletions templates/views/account/changeEmail.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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')
2 changes: 0 additions & 2 deletions templates/views/account/changeUsername.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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')
3 changes: 0 additions & 3 deletions templates/views/account/confirmPasswordReset.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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')
4 changes: 0 additions & 4 deletions templates/views/account/linkGog.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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')
6 changes: 0 additions & 6 deletions templates/views/account/linkSteam.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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')
1 change: 0 additions & 1 deletion templates/views/account/register.pug
Original file line number Diff line number Diff line change
Expand Up @@ -33,5 +33,4 @@ block content


block js
script(src='/js/account.min.js')
script(src='//www.google.com/recaptcha/api.js')
3 changes: 1 addition & 2 deletions templates/views/account/report.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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'))
1 change: 0 additions & 1 deletion templates/views/account/requestPasswordReset.pug
Original file line number Diff line number Diff line change
Expand Up @@ -44,5 +44,4 @@ block content
br

block js
script(src='/js/account.min.js')
script(src='//www.google.com/recaptcha/api.js')
3 changes: 1 addition & 2 deletions templates/views/clans.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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'))

2 changes: 1 addition & 1 deletion templates/views/clans/seeClan.pug
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,4 @@ block content


block js
script( src="../../js/app/getClans.js")
script( src=webpackAssetJS('getClans'))
2 changes: 1 addition & 1 deletion templates/views/content-creators.pug
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@ block content

block js

script(src="../../js/app/content-creators.js")
script(src=webpackAssetJS('content-creators'))
2 changes: 1 addition & 1 deletion templates/views/donation.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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'))

2 changes: 1 addition & 1 deletion templates/views/faf-teams.pug
Original file line number Diff line number Diff line change
Expand Up @@ -58,5 +58,5 @@ block content


block js
script(src="../../js/app/faf-teams.js")
script(src=webpackAssetJS('faf-teams'))

2 changes: 1 addition & 1 deletion templates/views/leaderboards.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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'))

2 changes: 1 addition & 1 deletion templates/views/newshub.pug
Original file line number Diff line number Diff line change
Expand Up @@ -80,4 +80,4 @@ body
ul.column12 UPCOMING TOURNAMENTS/EVENTS


script(src="../../js/app/newshub.js")
script(src=webpackAssetJS('newshub'))
2 changes: 1 addition & 1 deletion templates/views/play.pug
Original file line number Diff line number Diff line change
Expand Up @@ -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'))

27 changes: 27 additions & 0 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -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 }),
],
};
Loading

0 comments on commit 070a74d

Please sign in to comment.