Skip to content

Commit

Permalink
Upgrade frontend dependencies (#71)
Browse files Browse the repository at this point in the history
* Prevent Angular FOUC because bundle may be included with defer.
* Add fake startup
* Don't downgrade Node, use latest.
  • Loading branch information
TWiStErRob authored Sep 12, 2021
1 parent 24c9417 commit bc3d210
Show file tree
Hide file tree
Showing 8 changed files with 159 additions and 149 deletions.
9 changes: 2 additions & 7 deletions .github/workflows/Heroku.yml
Original file line number Diff line number Diff line change
Expand Up @@ -135,11 +135,6 @@ jobs:
- name: Checkout ${{ github.ref }} branch in ${{ github.repository }} repository.
uses: actions/checkout@v2

- name: Downgrade node from v14.17.6/6.14.15 to v8.17.0/6.13.4.
uses: actions/setup-node@v2
with:
node-version: '8'

# Set the time zone, otherwise 5 Performances display > shows performances tests fail
# > - Expected By(css selector, .performance) to have text 12:00 but was 11:00
- uses: szenius/[email protected]
Expand Down Expand Up @@ -177,12 +172,12 @@ jobs:
working-directory: Heroku
run: |
npm run test
cd frontend && npm run build-prod
cd frontend && npm run build:prod
# Pre-build artifacts for more immediate and deterministic startup.
- name: Build Frontend
working-directory: Heroku/frontend
run: npm run build-dev
run: npm run build:dev

- name: Build Sync & Backend
working-directory: Heroku
Expand Down
57 changes: 27 additions & 30 deletions Heroku/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,39 @@
"scripts": {
"preinstall": "echo Installing Frontend dependencies",
"postinstall": "echo Installed Frontend dependencies",
"build": "npm run build-prod",
"build-prod": "webpack --config webpack.prod.js --progress",
"build-dev": "webpack --config webpack.dev.js --progress",
"start": "webpack --config webpack.dev.js --watch",
"dev-server": "webpack-dev-server --config webpack.dev.js --progress --colors --port 2992 --inline --content-base ../deploy/static",
"build": "npm run build:prod",
"build:prod": "webpack --config webpack.config.js --mode=production --progress",
"build:dev": "webpack --config webpack.config.js --mode=development --progress",
"start": "webpack --config webpack.config.js --mode=development --watch",
"dev-server": "webpack-dev-server --config webpack.config.js --mode=development --progress --colors --port 2992 --inline --content-base ../deploy/static",
"test": "npm run test:jshint",
"test:jshint": "jshint --verbose --show-non-errors src/planner/scripts"
},
"dependencies": {
"lodash": "4.17.4",
"bootstrap": "3.3.7",
"jquery": "1.12.4",
"angular": "1.6.6",
"angular-resource": "1.6.6",
"angular-animate": "1.6.6",
"lodash": "4.17.21",
"bootstrap": "3.4.1",
"angular": "1.8.2",
"angular-resource": "1.8.2",
"angular-animate": "1.8.2",
"angular-ui-bootstrap": "2.5.6",
"moment": "2.19.3",
"moment-timezone": "0.5.14",
"moment-range": "3.0.3"
"moment": "2.29.1",
"moment-timezone": "0.5.33",
"moment-range": "4.0.2"
},
"devDependencies": {
"webpack": "3.10.0",
"webpack-dev-server": "2.9.7",
"webpack-merge": "4.1.1",
"uglifyjs-webpack-plugin": "1.1.4",
"html-webpack-plugin": "2.30.1",
"copy-webpack-plugin": "4.3.1",
"extract-text-webpack-plugin": "3.0.2",
"raw-loader": "0.5.1",
"css-loader": "0.28.7",
"sass-loader": "6.0.6",
"style-loader": "0.19.1",
"url-loader": "0.6.2",
"file-loader": "1.1.6",

"jshint": "2.9.5",
"node-sass": "4.7.2"
"webpack": "5.52.1",
"webpack-cli": "4.8.0",
"webpack-dev-server": "4.2.0",
"html-webpack-plugin": "5.3.2",
"copy-webpack-plugin": "9.0.1",
"mini-css-extract-plugin": "2.3.0",
"raw-loader": "4.0.2",
"css-loader": "6.2.0",
"sass-loader": "12.1.0",
"style-loader": "3.2.1",
"url-loader": "4.1.1",
"file-loader": "6.2.0",
"jshint": "2.13.1",
"node-sass": "6.0.1"
}
}
31 changes: 28 additions & 3 deletions Heroku/frontend/src/planner/pages/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,39 @@
};
</script>

<!-- Copied from Heroku/frontend/node_modules/angular/angular-csp.css -->
<style>
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak,
.ng-hide:not(.ng-hide-animate) {
display: none !important;
}

ng\:form {
display: block;
}

.ng-animate-shim {
visibility:hidden;
}

.ng-anchor {
position:absolute;
}
</style>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body ng-controller="AppController">
<body ng-controller="AppController" ng-cloak>
<section id="main">
<header id="date" ng-controller="DateController">
<form name="cineworldDateForm" class="form-inline" role="form">
Expand Down
90 changes: 0 additions & 90 deletions Heroku/frontend/webpack.common.js

This file was deleted.

100 changes: 100 additions & 0 deletions Heroku/frontend/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
'use strict';
const HtmlWebpackPlugin = require('html-webpack-plugin'); // https://github.com/jantimon/html-webpack-plugin#options
const CopyWebpackPlugin = require('copy-webpack-plugin'); // https://github.com/webpack-contrib/copy-webpack-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // https://github.com/webpack-contrib/mini-css-extract-plugin
const path = require('path');

module.exports = (env, argv) => {
const dist = path.resolve(__dirname, '..', 'deploy');
console.log(`Running in mode: ${argv.mode}; deploying to ${dist}.`);
const devMode = argv.mode === 'development';
return {
entry: {
'planner/index': './src/planner/scripts/index.js',
},
output: {
path: path.join(dist, 'static'),
// don't set publicPath to an absolute path because it emits a <script> with that prefix
//publicPath: dist,
filename: '[name].bundle.js'
},
devtool: devMode
? 'inline-source-map'
: undefined,
plugins: [
new MiniCssExtractPlugin(),
new CopyWebpackPlugin({
patterns: [
{ from: 'src/old', to: 'planner-old' },
],
}),
new HtmlWebpackPlugin({
template: 'src/main/pages/index.html',
filename: 'index.html',
chunks: [],
}),
new HtmlWebpackPlugin({
template: 'src/planner/pages/index.html',
filename: 'planner/index.html',
chunks: ['planner/index'],
}),
],
module: {
// https://webpack.js.org/guides/migrating/#chaining-loaders
rules: [
{
test: /\.(html)$/,
// These templates/.html files are loaded into the $templateCache raw/as is.
include: [path.join(__dirname, 'src/planner/templates/')],
// When loaded with require() only asset/source gives contents.
// asset/resource gives url and asset/inline gives encoded data URI.
type: 'asset/source',
},
{
test: /\.(css)$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
],
},
{
test: /\.(sass|scss)/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
options: {
sassOptions: {
outputStyle: 'expanded',
},
},
},
],
},
{
test: /\.(png|jpg|gif)$/,
type: 'asset/resource',
generator: {
filename: 'images/[name]-[hash][ext][query]',
},
},
{
test: /\.(svg|eot|ttf|woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: 'fonts/[name]-[hash][ext][query]',
},
},
],
},
};
};
7 changes: 0 additions & 7 deletions Heroku/frontend/webpack.dev.js

This file was deleted.

12 changes: 0 additions & 12 deletions Heroku/frontend/webpack.prod.js

This file was deleted.

2 changes: 2 additions & 0 deletions Heroku/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
},
"scripts": {
"start": "gradlew :backend:endpoint:run",
"start:fake:documentation": "echo http://localhost:8080/planner?cineworldDate=&c=103&d=2017-07-14&f=160231&f=160454&f=184739&f=189108&f=223046",
"start:fake": "gradlew :backend:endpoint:run --args \"../../deploy/static ../../test/fake-data\"",
"updateFromCineworld": "npm run updateFromCineworldCinemas && npm run updateFromCineworldFilms",
"updateFromCineworldCinemas": "gradlew :backend:sync:run --args \"cinemas\"",
"updateFromCineworldFilms": "gradlew :backend:sync:run --args \"films\"",
Expand Down

0 comments on commit bc3d210

Please sign in to comment.