Merge pull request #515 from NBISweden/feature/builder

Migrate from snowpack to webpack

.github/workflows/create_packages.yml

@@ -37,8 +37,8 @@ jobs:
              done
 
              cat > urdr.env <<END
-             SNOWPACK_PUBLIC_API_URL="https://urdr.nbis.se"
-             SNOWPACK_PUBLIC_REDMINE_URL="https://projects.nbis.se"
+             PUBLIC_API_URL="https://urdr.nbis.se"
+             PUBLIC_REDMINE_URL="https://projects.nbis.se"
              END
 
              TAG="$branch" docker-compose --env-file urdr.env build --build-arg BUILDKIT_INLINE_CACHE=1

.gitignore

@@ -7,3 +7,5 @@
 /backend/vendor/
 /frontend/node_modules/
 ops-redmine/
+frontend/public/assets
+frontend/public/js

README.md

@@ -32,8 +32,8 @@ named `redmine_db.dump`, and it should be placed in that repository's
 In the top-most directory of the `urdr` repository, create the
 file `urdr.env`, using `urdr.env.default` as the template. If you
 are on Linux, you need to set the variables `REDMINE_URL` and
-`SNOWPACK_PUBLIC_REDMINE_URL` to the
-value `"http://172.17.0.1:3000"`. The `SNOWPACK_PUBLIC_API_URL`
+`PUBLIC_REDMINE_URL` to the
+value `"http://172.17.0.1:3000"`. The `PUBLIC_API_URL`
 variable should be set to the URL from which the service is publically
 accessible, e.g. `"http://localhost:4567"` during development.
 

docker-compose.yml

@@ -25,7 +25,7 @@ services:
       - ./urdr.env
     environment:
       - NODE_OPTIONS="--max-old-space-size=2048"
-   
+
     build:
       context: ./
       dockerfile: ./node/Dockerfile

frontend/package.json

@@ -1,29 +1,39 @@
 {
   "name": "urdr",
-  "version": "0.1.0",
-  "description": "urdr time logging system",
+  "version": "1.0.0",
+  "description": "urdr time logging interface",
   "author": "NBIS",
   "license": "GPL-3.0",
   "scripts": {
-    "start": "snowpack dev",
-    "build": "snowpack build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "npx webpack serve",
+    "build": "webpack -c webpack.config.prod.js --mode=production --node-env=production",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build:dev": "webpack --mode=development",
+    "build:prod": "webpack -c webpack.config.prod.js --mode=production --node-env=production",
+    "watch": "webpack --watch",
+    "serve": "webpack serve"
   },
   "devDependencies": {
     "@types/react": "^17.0.45",
-    "snowpack": "3.8.6",
-    "typescript": "^4.7.4"
+    "css-loader": "^6.7.1",
+    "html-webpack-plugin": "^5.5.0",
+    "styles-loader": "^4.0.1",
+    "ts-loader": "^8.0.3",
+    "typescript": "^4.7.4",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.3"
   },
   "dependencies": {
-    "@snowpack/plugin-webpack": "3.0.0",
     "buffer": "^6.0.3",
     "date-fns": "^2.28.0",
+    "handlebars-loader": "^1.7.2",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^6.3.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-datepicker": "^4.8.0",
-    "react-spinners": "^0.13.2",
-    "react-loading-overlay-ts": "^2.0.0"
+    "react-dom": "^17.0.2",
+    "react-loading-overlay-ts": "^2.0.0",
+    "react-router-dom": "^6.3.0",
+    "react-spinners": "^0.13.2"
   }
 }

frontend/src/components/AuthProvider.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { User } from "../model";
-import { SNOWPACK_PUBLIC_API_URL } from "../utils";
+import { PUBLIC_API_URL } from "../utils";
 import { Buffer } from "buffer";
 import { useNavigate } from "react-router-dom";
 
@@ -34,7 +34,7 @@ export const AuthProvider = ({ children }) => {
       "Basic " + Buffer.from(`${username}:${password}`).toString("base64")
     );
     let errorCode: number;
-    const user: User = await fetch(`${SNOWPACK_PUBLIC_API_URL}/api/login`, {
+    const user: User = await fetch(`${PUBLIC_API_URL}/api/login`, {
       method: "POST",
       credentials: "include",
       headers: headers,
@@ -57,7 +57,7 @@ export const AuthProvider = ({ children }) => {
   // This will only listen to changes on value
 
   const handleLogout = async () => {
-    const logout = await fetch(`${SNOWPACK_PUBLIC_API_URL}/api/logout`, {
+    const logout = await fetch(`${PUBLIC_API_URL}/api/logout`, {
       method: "POST",
     })
       .then((res) => {

frontend/src/components/Row.tsx

@@ -9,7 +9,7 @@ import grip from "../icons/grip-vertical.svg";
 import eyeSlash from "../icons/eye-slash.svg";
 import eye from "../icons/eye.svg";
 import { dateFormat } from "../utils";
-import { SNOWPACK_PUBLIC_REDMINE_URL } from "../utils";
+import { PUBLIC_REDMINE_URL } from "../utils";
 
 export const Row = ({
   topic,
@@ -98,9 +98,7 @@ export const Row = ({
           <div className="issue-label">
             <p className="issue-label-text">
               <a
-                href={
-                  `${SNOWPACK_PUBLIC_REDMINE_URL}` + `/issues/${topic.issue.id}`
-                }
+                href={`${PUBLIC_REDMINE_URL}` + `/issues/${topic.issue.id}`}
               >{`# ${topic.issue.id}`}</a>
             </p>
             <p className="issue-label-text">

frontend/src/index.css

@@ -7,26 +7,26 @@
 /* Lato Light */
 @font-face {
   font-family: Lato;
-  src: url("/dist/fonts/Lato-Light.woff") format("woff");
-  src: url("/dist/fonts/Lato-Light.woff2") format("woff2");
+  src: url("./fonts/Lato-Light.woff") format("woff");
+  src: url("./fonts/Lato-Light.woff2") format("woff2");
   font-weight: 300;
   font-style: normal;
 }
 
 /* Lato Regular */
 @font-face {
   font-family: Lato;
-  src: url("/dist/fonts/Lato-Regular.woff") format("woff");
-  src: url("/dist/fonts/Lato-Regular.woff2") format("woff2");
+  src: url("./fonts/Lato-Regular.woff") format("woff");
+  src: url("./fonts/Lato-Regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
 }
 
 /* Lato Bold */
 @font-face {
   font-family: Lato;
-  src: url("/dist/fonts/Lato-Bold.woff") format("woff");
-  src: url("/dist/fonts/Lato-Bold.woff2") format("woff2");
+  src: url("./fonts/Lato-Bold.woff") format("woff");
+  src: url("./fonts/Lato-Bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
 }

frontend/src/index.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { App } from "./App";
+import "./bootstrap.min.css";
 import "./index.css";
+import { App } from "./App";
 
 ReactDOM.render(<App />, document.querySelector("#root"));

frontend/src/pages/Report.tsx

@@ -20,7 +20,7 @@ import {
   ToastMsg,
 } from "../model";
 import {
-  SNOWPACK_PUBLIC_API_URL,
+  PUBLIC_API_URL,
   getApiEndpoint,
   headers,
   getFullWeek,
@@ -240,14 +240,11 @@ export const Report = () => {
   // Save which issues that have favorite status
   const saveFavorites = async (newFavs: IssueActivityPair[]) => {
     let logout = false;
-    const saved = await fetch(
-      `${SNOWPACK_PUBLIC_API_URL}/api/priority_entries`,
-      {
-        method: "POST",
-        headers: headers,
-        body: JSON.stringify(newFavs),
-      }
-    )
+    const saved = await fetch(`${PUBLIC_API_URL}/api/priority_entries`, {
+      method: "POST",
+      headers: headers,
+      body: JSON.stringify(newFavs),
+    })
       .then((res) => {
         if (res.ok) {
           return true;
@@ -360,7 +357,7 @@ export const Report = () => {
   // Try to ...
   const reportTime = async (timeEntry: TimeEntry) => {
     let logout = false;
-    const saved = await fetch(`${SNOWPACK_PUBLIC_API_URL}/api/time_entries`, {
+    const saved = await fetch(`${PUBLIC_API_URL}/api/time_entries`, {
       body: JSON.stringify({ time_entry: timeEntry }),
       method: "POST",
       headers: headers,
@@ -791,15 +788,13 @@ export const Report = () => {
               <QuickAdd addIssueActivity={addIssueActivityHandler}></QuickAdd>
             </div>
             {toastList.length > 0 && (
-                <Toast onCloseToast={handleCloseToast} toastList={toastList} />
-              )}
+              <Toast onCloseToast={handleCloseToast} toastList={toastList} />
+            )}
             <div className="col-4 save-changes">
-            <div className="unsaved-alert-p">
-              {showUnsavedWarning && (
-
+              <div className="unsaved-alert-p">
+                {showUnsavedWarning && (
                   <p role="status">⚠ You have unsaved changes</p>
-
-              )}
+                )}
               </div>
               <button className="basic-button save-button" onClick={handleSave}>
                 Save changes

frontend/public/index.html → frontend/src/template.hbs

@@ -4,12 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="URDR timelogging" />
-    <!-- Use local bootstrap.min.css to avoid crossover-errors -->
-    <link href="/dist/bootstrap.min.css" rel="stylesheet" />
-    <title>URDR timelogging</title>
+    <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/dist/index.js"></script>
   </body>
 </html>

frontend/src/utils.tsx

@@ -1,8 +1,7 @@
 import.meta.hot;
 import React, { useState } from "react";
-import { IssueActivityPair } from "./model";
-export const { SNOWPACK_PUBLIC_API_URL } = __SNOWPACK_ENV__;
-export const { SNOWPACK_PUBLIC_REDMINE_URL } = __SNOWPACK_ENV__;
+export const PUBLIC_API_URL = process.env.PUBLIC_API_URL;
+export const PUBLIC_REDMINE_URL = process.env.PUBLIC_REDMINE_URL;
 
 export let headers = new Headers();
 headers.set("Accept", "application/json");
@@ -13,7 +12,7 @@ export const dateFormat = "yyyy-MM-dd";
 export const getApiEndpoint = async (endpoint, context) => {
   if (context.user === null) return null;
   let logout = false;
-  let result = await fetch(`${SNOWPACK_PUBLIC_API_URL}${endpoint}`, {
+  let result = await fetch(`${PUBLIC_API_URL}${endpoint}`, {
     method: "GET",
     headers: headers,
   })

frontend/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es6",
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node"
+  }
+}

frontend/webpack.config.js

@@ -0,0 +1,67 @@
+const path = require('path')
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    index: './src/index.tsx'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/i,
+        loader: 'ts-loader',
+        exclude: ['/node_modules/'],
+        options: {
+          transpileOnly: true
+        }
+      },
+      {
+        test: /\.(woff|woff2|png|svg|html)$/i,
+        type: 'asset'
+      },
+      {
+        test: /\.(css)$/i,
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.hbs$/, loader: 'handlebars-loader'
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.jsx', '.js', '...']
+  },
+  devtool: 'inline-source-map',
+  devServer: {
+    open: true,
+    host: '0.0.0.0',
+    port: 4242,
+    compress: true,
+    allowedHosts: 'all',
+    historyApiFallback: true,
+    static: './public',
+    client: {
+      webSocketURL: 'ws://localhost:4567/ws'
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.PUBLIC_API_URL': JSON.stringify(process.env.PUBLIC_API_URL),
+      'process.env.PUBLIC_REDMINE_URL': JSON.stringify(
+        process.env.PUBLIC_REDMINE_URL
+      )
+    }),
+    new HtmlWebpackPlugin({
+      title: 'Urdr time logging',
+      filename: 'index.html',
+      publicPath: '/',
+      template: './src/template.hbs'
+    })
+  ],
+  output: {
+    filename: './js/index.js',
+    path: path.resolve(__dirname, './public')
+  }
+}