secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Moving HTML builder into webpack

Browse Source 
- Allows handling of template variables
- Retaining test_mode switch for hot-swap JS bundle
This commit is contained in:
James Barnsley
2022-11-12 08:52:38 +13:00
parent 074b97ce7d
commit 154e72234e
3 changed files with 41 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
build_tools/build.js
View File

@ -8,15 +8,15 @@
* To run, execute npm run dev|build|prod|release
**/
var fs = require('fs');
var path = require('path');
var rimraf = require('rimraf');
var copydir = require('copy-dir');
var copyfile = require('fs-copy-file');
var version = fs.readFileSync("IRIS_VERSION", "utf8");
const process = require( 'process' );
const fs = require('fs');
const path = require('path');
const rimraf = require('rimraf');
const copydir = require('copy-dir');
const copyfile = require('fs-copy-file');
let version = fs.readFileSync("IRIS_VERSION", "utf8");
version = version.replace(/\r?\n?/g, '').trim();
var build = Math.floor(Date.now() / 1000);
console.log('Building version '+version+' ('+build+')');
console.log('Building version '+version+'');
if (fs.existsSync('mopidy_iris/static/')){
rimraf.sync('mopidy_iris/static/');
@ -53,12 +53,12 @@ copydir('src/assets', 'mopidy_iris/static/assets', { filter: assetsFilter }, fun
console.log('Copied assets');
var html_file = "mopidy_iris/static/index.html";
var html_file_content = fs.readFileSync("src/index.html", "utf8");
html_file_content = html_file_content.replace("VERSION_HERE", version);
html_file_content = html_file_content.replace("BUILD_HERE", build);
fs.writeFileSync(html_file, html_file_content, 'utf8');
console.log('Setting version in HTML');
// var html_file = "mopidy_iris/static/index.html";
// var html_file_content = fs.readFileSync("src/index.html", "utf8");
// html_file_content = html_file_content.replace("VERSION_HERE", version);
// html_file_content = html_file_content.replace("BUILD_HERE", build);
// fs.writeFileSync(html_file, html_file_content, 'utf8');
// console.log('Setting version in HTML');
console.log('Setting version in manifest.json');
var manifest_file = "mopidy_iris/static/manifest.json";
@ -83,9 +83,7 @@ copydir('src/assets', 'mopidy_iris/static/assets', { filter: assetsFilter }, fun
var package_file_content = fs.readFileSync(package_file, "utf8");
package_file_content = package_file_content.replace(/(?:\"version\"\:\ \")(?:.*)"/, '"version": "'+version+'"');
fs.writeFileSync(package_file, package_file_content, 'utf8');
console.log('Done!');
return true;
});
return false;

17
src/index.html
View File

@ -1,7 +1,7 @@
<html>
<head>
<title>Iris</title>
<base id="base_href" href="/iris/" />
<base id="base_href" href="<%= baseHref %>" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Iris" />
<meta name="apple-mobile-web-app-capable" content="yes" />
@ -69,10 +69,6 @@
</style>
</head>
<script type="text/javascript">
var base_href = document.location.pathname.indexOf('/iris/') > -1 ? '/iris/' : '/';
const baseObject = document.getElementById('base_href');
baseObject.href = base_href;
var links = [
{ rel: 'manifest', href: 'manifest.json', crossorigin: 'use-credentials' },
{ rel: 'apple-touch-startup-image', href: 'assets/app-icon_512.png' },
@ -96,7 +92,7 @@
for (const link of links) {
const linkObject = document.createElement('link');
linkObject.rel = link.rel;
linkObject.href = base_href + link.href;
linkObject.href = link.href;
if (link.type) linkObject.type = link.type;
if (link.sizes) linkObject.sizes = link.sizes;
if (link.color) linkObject.color = link.color;
@ -142,10 +138,8 @@
}
}
// Release details
// These are automatically injected to built HTML
var build = "BUILD_HERE";
var version = "VERSION_HERE";
var build = "<%= build %>";
var version = "<%= version %>";
// Construct the script tag
var js = document.createElement("script");
@ -157,7 +151,8 @@
// Check for test mode. This is toggled under Settings > Debug > Test mode or can
// be manually triggered with the URL var "?test_mode=1"
if (window.location.href.indexOf('test_mode=1') > -1) {
var test_mode = <%= isDevServer %> || window.location.href.indexOf('test_mode=1') > -1;
if (test_mode) {
window.test_mode = true;
localStorage.setItem('test_mode', true);
} else if (window.location.href.indexOf('test_mode=0') > -1) {

20
webpack.config.js
View File

@ -5,6 +5,11 @@ const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
let version = fs.readFileSync("IRIS_VERSION", "utf8");
version = version.replace(/\r?\n?/g, '').trim();
const build = Math.floor(Date.now() / 1000);
const config = {
mode: process.env.NODE_ENV,
context: path.resolve(__dirname),
@ -91,7 +96,16 @@ const config = {
new MiniCssExtractPlugin({
filename: `app${isDev ? '' : '.min'}.css`,
}),
...isDevServer ? [new HtmlWebpackPlugin({ template: './src/index.html' })] : [],
new HtmlWebpackPlugin({
inject: false,
template: './src/index.html',
templateParameters: {
isDevServer: isDevServer ? 1 : 0,
baseHref: isDevServer ? '/' : '/iris/',
version: `${version}-${isDevServer ? 'DEV_SERVER' : ''}`,
build,
},
}),
],
watchOptions: {
poll: true,
@ -99,6 +113,10 @@ const config = {
devtool: (isDev ? 'source-map' : false),
devServer: {
historyApiFallback: true,
port: 6681,
client: {
overlay: true,
},
static: [
{
directory: path.join(__dirname, 'mopidy_iris', 'static', 'assets'),