chore: adjust webpack config

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

app/app.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import Home from './pages/home';
+export default function App() {
+    return (
+	<>
+	    <Home />
+	</>
+    );
+}

app/index.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app';
+//TODO remove debugging
+if (process.env.NODE_ENV !== 'production') {
+    console.log('development mode');
+}
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
+    <React.StrictMode>
+	<App tab="home" />
+    </React.StrictMode>
+);

app/pages/home.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+export default function Home() {
+    return (
+	<>
+	    <h1>Home</h1>
+	</>
+    );
+}

config/webpack.common.js

@@ -0,0 +1,41 @@
+//generate a HTML5 file including all webpack bundles in the body using script tags
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+//path is used to resolve properly across the OS
+const path = require('path');
+module.exports = {
+    //bundle *.js from this entry point
+    entry: path.resolve(__dirname, '../app/index.jsx'),
+    //create output file to be linked to index.html
+    output: {
+        filename: '[name].bundle.js',
+	path: path.resolve(__dirname, '../dist'),
+	clean: true,
+    },
+    module: {
+	rules: [
+	    {
+		//test all *.js using babel-loader
+		//test all *.jsx (e.g. React.js) using babel-loader
+		test: /\.(js|jsx)$/,
+		exclude: /node_modules/,
+		include: path.resolve(__dirname, '../app'),
+		use: ['babel-loader'],
+	    },
+	    {
+		//test all *.css using style-loader and css-loader
+		test: /\.css$/i,
+		use: ["style-loader", "css-loader"],
+	    },
+	]
+    },
+    resolve: {
+	extensions: ['*', '.js', '.jsx'],
+    },
+    plugins: [
+	// create a plugin instance so that you can use it several times anywhere
+	new HtmlWebpackPlugin({
+	    title: 'Production',
+	    template: path.resolve(__dirname, "../public/index.html")
+	}),
+    ],
+};

config/webpack.dev.js

@@ -0,0 +1,14 @@
+//path is used to resolve properly across the OS
+const path = require('path');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+//merge() calls in the environment-specific configuration to include commons
+module.exports = merge(common, {
+    //set development mode
+    mode: 'development',
+    //enable strong source mapping
+    devtool: 'inline-source-map',
+    devServer: {
+	static: path.resolve(__dirname, '../build'),
+    },
+});

config/webpack.prod.js

@@ -0,0 +1,8 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+module.exports = merge(common, {
+    mode: 'production',
+    //source maps encouraged in production
+    //choose mapping with fairly quick build speed like source-map
+    devtool: 'source-map',
+});

package.json

@@ -0,0 +1,42 @@
+{
+    "private": true,
+    "name": "gtfs-rt-display",
+    "description": "display data from GTFS Realtime feeds",
+    "version": "0.1.0",
+    "main": "index.js",
+    "keywords": [
+        "public",
+        "transport",
+        "mobility",
+        "gtfs",
+        "realtime",
+        "display"
+    ],
+    "author": "Software Ingenieur Begerad <dialog@SwIngBe.de>",
+    "homepage": "https://github.com/Software-Ingenieur-Begerad/gtfs-rt-display/tree/main",
+    "repository": "https://github.com/Software-Ingenieur-Begerad/gtfs-rt-display",
+    "bugs": "https://github.com/Software-Ingenieur-Begerad/gtfs-rt-display/issues",
+    "license": "GPL-3.0-or-later",
+    "engines": {
+        "node": ">=10"
+    },
+    "scripts": {
+        "start": "webpack serve --config config/webpack.dev.js",
+        "build": "webpack --config config/webpack.prod.js"
+    },
+    "devDependencies": {
+        "@babel/core": "7.19.1",
+        "@babel/preset-env": "7.19.1",
+        "@babel/preset-react": "7.18.6",
+        "babel-loader": "8.2.5",
+        "html-webpack-plugin": "5.5.0",
+        "webpack": "5.74.0",
+        "webpack-cli": "4.10.0",
+        "webpack-dev-server": "4.11.0",
+        "webpack-merge": "5.8.0"
+    },
+    "dependencies": {
+        "react": "18.2.0",
+        "react-dom": "18.2.0"
+    }
+}

public/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <!-- load resources for bootstrap -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous">
+    <!-- avoid content hiding behind react-bootstrap navbar -->
+    <style type="text/css">
+      body {
+          padding-top: 100px;
+      }
+    </style>
+    <title>GTFS Display</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>