Migrate to Yarn & Parcel (#260)

* Switch from npm to yarn
* Add minimum viable parcel dev server config
* Remove webpack configs
* Update docker build, build w/ yarn on node 16.x

.github/workflows/release.yml

@@ -16,17 +16,15 @@ jobs:
         with:
           go-version: 1.17
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: '14.x'
-      - name: Setup Elm
-        uses: jorelali/setup-elm@v2
-        with:
-          elm-version: 0.19.1
+          node-version: '16.x'
+          cache: 'yarn'
+          cache-dependency-path: ui/yarn.lock
       - name: Build frontend
         run: |
-          npm ci
-          npm run build
+          yarn install --frozen-lockfile --non-interactive
+          yarn run build
         working-directory: ./ui
       - name: Test build release
         uses: goreleaser/goreleaser-action@v2

.gitignore

@@ -52,3 +52,4 @@ repl-temp-*
 /ui/dist/
 # Dependency directories
 /ui/node_modules
+/ui/.parcel-cache

CHANGELOG.md

@@ -6,6 +6,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+### Changed
+- arm Docker builds now rely on amd64 frontend build stage
+- Frontend build migrated from npm+webpack to yarn+parcel, node 16
+
 
 ## [v3.0.1-rc2] - 2022-01-23
 

Dockerfile

@@ -2,15 +2,13 @@
 
 ### Build frontend
 # Due to no official elm compiler for arm; build frontend with amd64.
-FROM --platform=linux/amd64 node:14 as frontend
+FROM --platform=linux/amd64 node:16 as frontend
 WORKDIR /build
 COPY . .
 WORKDIR /build/ui
-RUN rm -rf dist elm-stuff node_modules
-RUN npm ci
-ADD https://github.com/elm/compiler/releases/download/0.19.1/binary-for-linux-64-bit.gz elm.gz
-RUN gunzip elm.gz && chmod 755 elm && mv elm /usr/bin/
-RUN npm run build
+RUN rm -rf .parcel-cache dist elm-stuff node_modules
+RUN yarn install --frozen-lockfile --non-interactive
+RUN yarn run build
 
 ### Build backend
 FROM golang:1.17-alpine3.14 as backend

README.md

@@ -33,14 +33,13 @@ tracks our tagged releases, and `edge` tracks our potentially unstable
 
 ## Building from Source
 
-You will need functioning [Go], [Elm] and [Node.js] installations for this to
-work.
+You will need functioning [Go] and [Node.js] installations for this to work.
 
 ```sh
 git clone https://github.com/inbucket/inbucket.git
 cd inbucket/ui
-npm ci
-npm run build
+yarn install
+yarn build
 cd ..
 go build ./cmd/inbucket
 ```

shell.nix

@@ -13,7 +13,8 @@ stdenv.mkDerivation rec {
     elmPackages.elm-test
     go
     golint
-    nodejs-14_x
+    nodejs-16_x
+    nodePackages.yarn
     rpm
     swaks
   ];

ui/.parcelrc

@@ -0,0 +1,4 @@
+{
+  "extends": "@parcel/config-default",
+  "namers": [ "parcel-namer-rewrite" ]
+}

ui/.proxyrc.json

@@ -0,0 +1,12 @@
+{
+  "/api": {
+    "target": "http://localhost:9000",
+    "ws": true
+  },
+  "/debug": {
+    "target": "http://localhost:9000"
+  },
+  "/serve": {
+    "target": "http://localhost:9000"
+  }
+}

ui/README.md

@@ -11,9 +11,8 @@ One time setup (assuming [Node.js] is already installed):
 
 ```
 cd $INBUCKET/ui
-npm i elm -g
-npm i
-npm run build
+yarn install
+yarn build
 ```
 
 This will the create `node_modules`, `elm-stuff`, and `dist` directories.
@@ -30,15 +29,16 @@ Inbucket will start, with HTTP listening on port 9000.  You may verify the web
 UI is functional if this is your first time building Inbucket, but your dev/test
 cycle should favor the development server below.
 
-### Terminal 2: webpack development server
+### Terminal 2: parcel development server
 
 ```
 cd $INBUCKET/ui
-npm run dev
+yarn start
 ```
 
-npm will start a development HTTP server listening on port 3000.  You should use
-this server for UI development, as it features hot reload and the Elm debugger.
+yarn will start a development HTTP server listening on port 1234.  You should
+use this server for UI development, as it features hot reload and the Elm
+debugger.
 
 [Elm]:            https://elm-lang.org
 [Node.js]:        https://nodejs.org

ui/package.json

@@ -4,30 +4,29 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "clean": "rm -rf dist elm-stuff",
-    "build": "webpack --mode production",
-    "watch": "webpack --mode development --watch",
-    "dev": "webpack-dev-server --mode development --port 3000 --hot --watch",
-    "errors": "webpack --mode development --display-error-details"
+    "build": "parcel build",
+    "start": "parcel --hmr-port 1235 src/index-dev.html",
+    "clean": "rm -rf .parcel-cache dist elm-stuff"
   },
-  "dependencies": {
-    "opensans-npm-webfont": "^1.0.0"
+  "source": "src/index.html",
+  "parcel-namer-rewrite": {
+    "rules": {
+      "(.*)\\.(css|js|json|eot|png|svg|ttf|webmanifest|woff|woff2)": "static/$1{.hash}.$2"
+    }
   },
+  "browserslist": "defaults",
+  "dependencies": {},
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@babel/preset-env": "^7.14.8",
     "@fortawesome/fontawesome-free": "^5.15.3",
+    "@parcel/packager-raw-url": "2.4.1",
+    "@parcel/transformer-elm": "^2.2.1",
+    "@parcel/transformer-webmanifest": "2.4.1",
     "@webcomponents/webcomponentsjs": "^2.5.0",
-    "babel-loader": "^8.2.2",
-    "css-loader": "^4.3.0",
-    "elm-hot-webpack-loader": "^1.1.8",
-    "elm-webpack-loader": "^7.0.1",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^4.5.2",
-    "node-elm-compiler": "^5.0.6",
-    "style-loader": "^1.3.0",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.2"
+    "opensans-npm-webfont": "^1.0.0",
+    "parcel": "^2.4.1",
+    "parcel-namer-rewrite": "^2.0.0-rc.2"
+  },
+  "optionalDependencies": {
+    "elm": "^0.19.1-5"
   }
 }

ui/src/index-dev.html

@@ -1,15 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <!-- This index file will be served by the webpack development server. -->
+  <!-- This index file will be served by the development server. -->
   <base href="/">
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="theme-color" content="#000000">
-  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="0" />
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="0">
+  <link rel="icon" type="image/png" href="./favicon.png">
+  <link rel="manifest" href="./manifest.json">
   <title>Inbucket</title>
 </head>
 <body>
@@ -17,5 +19,6 @@
     You need to enable JavaScript to run this app.
   </noscript>
   <div id="root"></div>
+  <script type="module" src="index.js"></script>
 </body>
 </html>

ui/src/index.html

@@ -6,9 +6,11 @@
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="theme-color" content="#000000">
-  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Expires" content="0" />
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="0">
+  <link rel="icon" type="image/png" href="./favicon.png">
+  <link rel="manifest" href="./manifest.json">
   <title>Inbucket</title>
 </head>
 <body>
@@ -16,5 +18,6 @@
     You need to enable JavaScript to run this app.
   </noscript>
   <div id="root"></div>
+  <script type="module" src="index.js"></script>
 </body>
 </html>

ui/webpack.config.js

@@ -1,84 +0,0 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const webpack = require('webpack')
-
-module.exports = (env, argv) => {
-  const production = argv.mode === 'production'
-  const config = {
-    output: {
-      filename: 'static/[name].[hash:8].js',
-      publicPath: '',
-    },
-    module: {
-      rules: [
-        {
-          test: /\.js$/,
-          exclude: [/elm-stuff/, /node_modules/],
-          loader: 'babel-loader',
-          query: {
-            presets: [
-              '@babel/preset-env',
-            ],
-          },
-        },
-        {
-          test: /\.elm$/,
-          exclude: [/elm-stuff/, /node_modules/],
-          use: [
-            { loader: 'elm-hot-webpack-loader' },
-            {
-              loader: 'elm-webpack-loader',
-              options: {
-                debug: !production,
-                optimize: production,
-              },
-            },
-          ],
-        },
-        {
-          test: /\.css$/,
-          loader: ['style-loader', 'css-loader'],
-        },
-        {
-          test: /\.(eot|svg|ttf|woff|woff2)$/,
-          loader: 'file-loader',
-          options: {
-            name: 'static/[name].[hash:8].[ext]',
-          },
-        },
-      ]
-    },
-    plugins: [
-      new HtmlWebpackPlugin({
-        template: 'public/index.html',
-        favicon: 'public/favicon.png',
-      }),
-      new HtmlWebpackPlugin({
-        filename: 'index-dev.html',
-        template: 'public/index-dev.html',
-        favicon: 'public/favicon.png',
-      }),
-    ],
-    devServer: {
-      historyApiFallback: {
-        index: '/index-dev.html',
-      },
-      index: 'index-dev.html',
-      inline: true,
-      overlay: true,
-      open: true,
-      proxy: [{
-        context: ['/api', '/debug', '/serve'],
-        target: 'http://localhost:9000',
-        ws: true,
-      }],
-      stats: { colors: true },
-      watchOptions: {
-        ignored: /node_modules/,
-      },
-    },
-  }
-  if (argv.hot) {
-    config.plugins.push(new webpack.HotModuleReplacementPlugin())
-  }
-  return config
-}