Improve rollup conf

The app couldn't run in dev mode without these changes.

Author: vbanos

config/rollup.mjs

@@ -1,5 +1,7 @@
+import fs from 'fs';
 import { babel } from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
 import postcss from 'rollup-plugin-postcss';
 import replace from '@rollup/plugin-replace';
 import resolve from '@rollup/plugin-node-resolve';
@@ -14,7 +16,7 @@ import livereload from 'rollup-plugin-livereload';
 const isDev = process.env.ROLLUP_WATCH === 'true';
 
 export default {
-  input: 'src/index-build.js',
+  input: isDev ? 'src/index.js' : 'src/index-build.js',
   output: {
     name: 'waybackDiff',
     file: 'build/app.js',
@@ -38,19 +40,30 @@ export default {
       extensions: ['.css'],
       plugins: [cssnano()]
     }),
+    json(),
     babel({
       babelrc: false,
       exclude: 'node_modules/**',
       babelHelpers: 'bundled',
       presets: ['@babel/preset-env', '@babel/preset-react'],
       plugins: ['@babel/plugin-proposal-export-default-from']
     }),
-    !isDev && terser(), // only minify in production
+    terser(),
     isDev && serve({
       open: true,
       contentBase: ['build', 'public'],
       host: '0.0.0.0',
-      port: 5000
+      port: 5000,
+      historyApiFallback: true,
+      //
+      // To enable https you need:
+      // mkdir cert
+      // openssl req -x509 -newkey rsa:4096 -nodes -keyout cert/key.pem -out cert/cert.pem -days 36
+      //
+      // https: {
+      //   key: fs.readFileSync('cert/key.pem'),
+      //   cert: fs.readFileSync('cert/cert.pem')
+      // }
     }),
     isDev && livereload({ watch: 'build' })
   ].filter(Boolean)

package.json

@@ -28,6 +28,7 @@
     "@babel/preset-react": "^7.28",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.0",
@@ -44,7 +45,7 @@
     "eslint-plugin-react": "^7.35",
     "jest": "^30.0.0",
     "jest-environment-jsdom": "^30.0.0",
-    "jsdom": "^27.0.0",
+    "jsdom": "^26.0.0",
     "postcss": "^8.5.6",
     "rollup": "4.31.0",
     "rollup-plugin-livereload": "^2.0.5",

public/index.html

@@ -8,7 +8,7 @@
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="/manifest.json">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
@@ -26,5 +26,7 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="wayback-diff">This</div>
+	<!-- Include your Rollup bundle -->
+	<script type="module" src="/app.js"></script>
   </body>
 </html>

src/index.js

@@ -8,13 +8,17 @@ import DiffContainer from './components/diff-container.jsx';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import SunburstContainer from './components/sunburst/sunburst-container.jsx';
 
-const conf = require('./conf.json');
+import conf from './conf.json';
 const root = createRoot(document.getElementById('wayback-diff'));
 
+// /hello endpoint is to test that React routing works.
+
 root.render(
   <StrictMode>
     <Router>
       <Switch>
+        <Route path="/hello" component={() => <div>Hello, this is static text!</div>} />
+
         <Route path='/diff/([0-9]{14})/([0-9]{14})/(.+)' render={({ match, location }) =>
           <DiffContainer url={match.params[2] + location.search} timestampA={match.params[0]}
             loader={null}