Move from webpack to budo and ruby-sass

Instead of using webpack with sass hacked in, switch to a simpler setup with budo for JavaScript, ruby-sass for sass watching/creation. Introduce a simple Makefile and script to start all required development services.

Move from webpack to budo and ruby-sass
b266f435 · Jelle van der Waa · b2d0ce1a · b266f435 · b266f435 · b266f435
Commit b266f435 authored 4 years ago by Jelle van der Waa
--- a/.gitignore
+++ b/.gitignore
 /node_modules
-/dist/main.js
-/dist/css
+/dist
+/public/bundle*
+
+.sass-cache
--- a/Caddyfile
+++ b/Caddyfile
@@ -4,10 +4,16 @@ localhost:8881 {

    gzip

-    root dist
+    proxy /api https://reproducible.archlinux.org/ {
+        transparent
+    }
+
+    proxy / 127.0.0.1:9966 {
+        transparent
+    }

-    proxy /repro https://reproducible.archlinux.org/ {
-    	without /repro
+    proxy /livereload 127.0.0.1:9966 {
+	websocket
        transparent
    }
 }
--- a/Makefile
+++ b/Makefile
+PACKAGE_NAME=reproducible-website
+
+# Tools
+
+SASS ?= sass
+YARN ?= yarn
+
+# Variables
+
+PORT ?= 9966
+VERSION ?= $(shell git describe --tags --always --dirty --match=v* 2>/dev/null | sed 's/^v//' || \
+			cat $(CURDIR)/.version 2> /dev/null || echo 0.0.0-unreleased)
+
+
+# Watchers
+
+.PHONY: sass-watcher
+sass-watcher:
+	$(SASS) --watch src/style.scss:public/bundle.css
+
+.PHONY: js-watcher
+js-watcher:
+	$(YARN) run budo src/index.js:bundle.js --dir public --port $(PORT) --live -t babelify
+
+
+# Dist
+
+.PHONY: dist
+dist:
+	@mkdir -p "dist/${PACKAGE_NAME}-${VERSION}"
+	cp -avf public/index.html "dist/${PACKAGE_NAME}-${VERSION}/index.html"
+	$(SASS) -t compressed src/style.scss "dist/${PACKAGE_NAME}-${VERSION}/bundle.css"
+	$(YARN) run browserify src/index.js -o "dist/${PACKAGE_NAME}-${VERSION}/bundle.js"
+	cd dist && tar --owner=0 --group=0 -czvf ${PACKAGE_NAME}-${VERSION}.tar.gz "${PACKAGE_NAME}-${VERSION}"
+
+
+# Yarn
+
+.PHONY: vendor
+vendor: .yarninstall
+
+.yarninstall: package.json
+	@$(YARN) install --silent
+	@touch $@
+
+
+.PHONY:
+clean:
+	$(YARN) cache clean
+	@rm -rf dist
+	@rm -rf node_modules
+	@rm -f .yarninstall
--- a/README.md
+++ b/README.md
@@ -5,20 +5,22 @@ Linux. Uses rebuilderd's API to fetch the current status of reproducibility.

 ## Dependencies

-* npm (for building/development)
+* yarn (for building/development)
 * caddy (for local development)
+* node-sass
+* browserify
+

 ## Development

 ```
-npm run watch
+./scripts/startdevelop.sh
 ```

-## Building
+## Deployment
+
+Creating a distributable tarball can be done with:

 ```
-npm install
-npm run build
+make dist
 ```
-
-The build files are located in the 'dist' directory.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
 {
  "name": "arch-repro-website",
-  "version": "0.0.1",
+  "version": "0.0.2",
  "description": "Arch reproducible Status Website",
  "author": "Jelle van der Waa",
  "license": "MIT",
  "private": true,
-  "scripts": {
-    "build": "NODE_ENV=production webpack --mode production",
-    "watch": "webpack --watch"
-  },
  "dependencies": {
-    "eslint-loader": "^4.0.2",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
-    "bulma": "^0.8.2",
-    "css-loader": "^3.5.3",
-    "eslint": "^6.8.0",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.14.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.2.1",
-    "terser-webpack-plugin": "^2.3.6"
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "babelify": "^10.0.0",
+    "budo": "^11.6.3",
+    "bulma": "^0.8.2"
  }
 }
--- a/dist/favicon.ico
+++ b/dist/favicon.ico
--- a/dist/index.html
+++ b/dist/index.html
@@ -4,8 +4,8 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>Arch Linux Reproducible Status</title>
-		<script src="main.js" defer></script>
-		<link rel="stylesheet" href="css/style.css"/>
+		<script src="bundle.js" defer></script>
+		<link rel="stylesheet" href="bundle.css"/>
 		<link rel="shortcut icon" href="favicon.ico"/>
 	</head>
 	<body>

--- a/scripts/startdevelop.sh
+++ b/scripts/startdevelop.sh
+#!/bin/sh
+
+SESSION=reprowebsite
+
+tmux new-session -d -s ${SESSION}
+
+# Setup panes
+tmux new-window -t ${SESSION}:0 -n "${SESSION}"
+tmux split-window -v
+tmux select-pane -t 0
+tmux send-keys "make js-watcher" C-m
+tmux select-pane -t 1
+tmux send-keys "make sass-watcher" C-m
+tmux split-window -v
+tmux select-pane -t 2
+tmux send-keys "caddy" C-m
+
+
+# Set default window
+tmux select-window -t $SESSION:1
+
+# Attach to session
+tmux -2 attach-session -t $SESSION
+
--- a/src/index.js
+++ b/src/index.js
-require('./style.scss');
-
-const apiPrefix = require('Config').apiPrefix;
-
 function displayBadPackages(suites) {
  const packagesList = document.getElementById("packagesul");
  const fragment = document.createDocumentFragment();
@@ -64,7 +60,7 @@ function displayStats(suites) {
  elem.appendChild(fragment);
 }

-fetch(`${apiPrefix}/api/v0/pkgs/list`).then((response) => {
+fetch(`/api/v0/pkgs/list`).then((response) => {
  return response.json();
 }).then((data) => {
  const suites = {};

--- a/yarn.lock
+++ b/yarn.lock