add webpack for front end builds and serve the assets from backend

lib/index.js

@@ -46,20 +46,18 @@ app.set('view engine', 'ejs')
 app.set('views', path.join(__dirname, 'views'))
 app.set('trust proxy', 1)
 
-app.use(express.static(path.join(__dirname, 'public')))
-app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')))
+app.use(express.static(path.join(__dirname, '..', 'dist')))
+//app.use(favicon(path.join(__dirname, '..', 'dist', 'favicon.ico')))
 app.use(bodyParser.urlencoded({ extended: true }))
 
+const indexFile = path.join(__dirname, '..', 'dist', 'index.html')
+
 if (certEndpoint) {
   app.get(`/${certEndpoint}`, (req, res) => {
     res.status(200).send(certSecret)
   })
 }
 
-app.get('/', (req, res) => {
-  res.render('index', { version })
-})
-
 app.get('/error', (req, res) => {
   const error = req.error || req.query.error || ''
 

lib/static/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="manifest" href="/manifest.json">
     <link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png">
-    <link rel="stylesheet" type="text/css" href="/style.css?9">
+    <link rel="stylesheet" type="text/css" href="/style.css">
     <title>Facebook Event to iCal Converter</title>
   </head>
 
@@ -74,12 +74,10 @@
     </article>
 
     <footer>
-      v.<%= version %> ◆
+      v.<%= htmlWebpackPlugin.options.version %> ◆
       <a href="https://ondrejsynacek.com" target="_blank">Ondrej Synacek</a> (2019) ◆
       <a href="https://github.com/comatory/fb2iCal" target="_blank" title="Github">Source</a> ◆
       <a href="/about" target="_blank" title="About the project">About</about>
     </footer>
-
-    <script src="/scripts.js?6"></script>
   </body>
 </html>

lib/static/scripts.js

@@ -306,7 +306,7 @@
 
   if (window.navigator && window.navigator.serviceWorker && !noJS()) {
     const serviceWorker = window.navigator.serviceWorker
-    serviceWorker.register('service-worker.js', {
+    serviceWorker.register('sw.js', {
       scope: './',
     }).then((registration) => {
       setServiceWorkerStatus(`Service worker registered with scope ${registration.scope}`)

package.json

@@ -8,9 +8,11 @@
     "node": "10.15.0"
   },
   "scripts": {
-    "start": "node lib/index.js",
-    "start:dev": "NODE_ENV=development PORT=3000 nodemon lib/index.js",
-    "start:dev:inspect": "NODE_ENV=development PORT=3000 nodemon --inspect lib/index.js",
+    "build": "webpack --mode=production",
+    "build:dev": "webpack --mode=development",
+    "start": "npm run build && node lib/index.js",
+    "start:dev": "concurrently \"npm run build:dev\" \"NODE_ENV=development PORT=3000 nodemon lib/index.js\"",
+    "start:dev:inspect": "npm run build:dev && NODE_ENV=development PORT=3000 nodemon --inspect lib/index.js",
     "test": "jest"
   },
   "keywords": [
@@ -40,8 +42,14 @@
   "devDependencies": {
     "chai": "^4.2.0",
     "chai-sinon": "^2.8.1",
+    "concurrently": "^5.2.0",
+    "copy-webpack-plugin": "^6.0.3",
+    "html-webpack-plugin": "^4.3.0",
     "jest": "^26.1.0",
     "nodemon": "^1.19.3",
-    "sinon": "^9.0.2"
+    "sinon": "^9.0.2",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "workbox-webpack-plugin": "^5.1.3"
   }
 }

webpack.config.js

@@ -0,0 +1,34 @@
+const path = require('path')
+const pkg = require('./package.json')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const { GenerateSW } = require('workbox-webpack-plugin')
+
+const destination = path.join(__dirname, 'dist')
+const isDevelopment = Boolean(process.argv[2] && process.argv[2].includes('mode=development'))
+
+module.exports = {
+  entry: path.join(__dirname, 'lib', 'static', 'scripts.js'),
+  watch: isDevelopment,
+  output: {
+    filename: '[name].[hash].js',
+    path: destination,
+  },
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: path.join(__dirname, 'lib', 'static', '{*.ico,*.json,*.png,*.css}'), to: destination, flatten: true },
+      ],
+    }),
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, 'lib', 'static', 'index.html'),
+      version: pkg.version,
+      inject: 'body',
+    }),
+    new GenerateSW({
+      swDest: 'sw.js',
+      clientsClaim: true,
+      skipWaiting: true,
+    }),
+  ],
+}