[web-src] Include web-src in dist file; add make targets to build htdocs

.github/workflows/macos.yml

@@ -58,7 +58,7 @@ jobs:
         brew install ffmpeg
 
     - name: Install other dependencies
-      run: brew install libunistring libmxml confuse libplist sqlite libwebsockets libevent libgcrypt json-c protobuf-c libsodium gnutls pulseaudio openssl
+      run: brew install libunistring libmxml confuse libplist sqlite libwebsockets libevent libgcrypt json-c protobuf-c libsodium gnutls pulseaudio openssl node
 
     - name: Configure
       run: |
@@ -72,6 +72,7 @@ jobs:
         export LD_LIBRARY_PATH=$(brew --prefix openssl)/lib
         export CPATH=$(brew --prefix openssl)/include
         export PKG_CONFIG_PATH=$(brew --prefix openssl)/lib/pkgconfig
+        make web-build
         make
 
     - name: Install

.github/workflows/ubuntu.yml

@@ -16,11 +16,12 @@ jobs:
     - name: install dependencies
       run: |
         sudo apt-get update
-        sudo apt-get install -yq build-essential clang clang-tools git autotools-dev autoconf libtool gettext gawk gperf bison flex libconfuse-dev libunistring-dev libsqlite3-dev libavcodec-dev libavformat-dev libavfilter-dev libswscale-dev libavutil-dev libasound2-dev libmxml-dev libgcrypt20-dev libavahi-client-dev zlib1g-dev libevent-dev libplist-dev libsodium-dev libcurl4-openssl-dev libjson-c-dev libprotobuf-c-dev libpulse-dev libwebsockets-dev libgnutls28-dev
+        sudo apt-get install -yq build-essential clang clang-tools git autotools-dev autoconf libtool gettext gawk gperf bison flex libconfuse-dev libunistring-dev libsqlite3-dev libavcodec-dev libavformat-dev libavfilter-dev libswscale-dev libavutil-dev libasound2-dev libmxml-dev libgcrypt20-dev libavahi-client-dev zlib1g-dev libevent-dev libplist-dev libsodium-dev libcurl4-openssl-dev libjson-c-dev libprotobuf-c-dev libpulse-dev libwebsockets-dev libgnutls28-dev nodejs npm
     - name: build and check
       run: |
         autoreconf -vi
         ./configure
+        make web-build
         make
         make check
         make distcheck

Makefile.am

@@ -16,7 +16,13 @@ endif
 
 BUILT_SOURCES = $(CONF_FILE) $(SYSTEMD_SERVICE_FILE) $(SYSTEMD_TSERVICE_FILE)
 
-SUBDIRS = $(LIBRESPOTC_SUBDIR) sqlext src htdocs
+if COND_WEBINTERFACE
+WEBINTERFACE_HTDOCS_SUBDIR = htdocs
+WEBINTERFACE_SRC_SUBDIR = web-src
+endif
+
+SUBDIRS = $(LIBRESPOTC_SUBDIR) sqlext src $(WEBINTERFACE_HTDOCS_SUBDIR)
+DIST_SUBDIRS = $(SUBDIRS) $(WEBINTERFACE_SRC_SUBDIR)
 
 dist_man_MANS = owntone.8
 
@@ -85,3 +91,18 @@ $(CONF_FILE): $(srcdir)/$(CONF_FILE).in
 $(SYSTEMD_SERVICE_FILE): $(srcdir)/$(SYSTEMD_SERVICE_FILE).in
 
 $(SYSTEMD_TSERVICE_FILE): $(srcdir)/$(SYSTEMD_TSERVICE_FILE).in
+
+web-build:
+	$(MAKE) web-build -C web-src
+
+web-clean:
+	$(MAKE) web-clean -C web-src
+
+web-serve:
+	$(MAKE) web-serve -C web-src
+
+web-dist: web-build
+	tar -czf owntone-web-$(PACKAGE_VERSION).tar.gz htdocs
+
+.PHONY: web-build web-clean web-serve web-dist
+

configure.ac

@@ -396,6 +396,7 @@ AC_CONFIG_FILES([
 	src/Makefile
 	sqlext/Makefile
 	htdocs/Makefile
+	web-src/Makefile
 	Makefile
 	owntone.spec
 ])

htdocs/Makefile.am

@@ -1,8 +1,6 @@
-if COND_WEBINTERFACE
+
 WEBINTERFACE_SRC = \
 	index.html
-endif
-
 
 htdocsdir = $(datadir)/owntone/htdocs
 
@@ -19,7 +17,6 @@ dist_htdocs_DATA = \
 	safari-pinned-tab.svg \
 	site.webmanifest
 
-if COND_WEBINTERFACE
 htdocsassetsdir = $(datadir)/owntone/htdocs/assets
 
 dist_htdocsassets_DATA = \
@@ -31,4 +28,3 @@ dist_htdocsassets_DATA = \
 	assets/materialdesignicons-webfont.woff2 \
 	assets/materialdesignicons-webfont.woff \
 	assets/materialdesignicons-webfont.eot
-endif

web-src/Makefile.am

@@ -0,0 +1,67 @@
+#
+# Makefile for adding the web interface source files to the distribution
+#
+# Building a Vue.js application with Vite / npm does not support VPATH builds.
+# Therefor hooking the "npm build" command into the autotools build results
+# in "make distcheck" failing.
+#
+# This Makefile only adds the source files to the distribution tar file.
+# To run the web interface build, special make targets exist in this Makefile
+# (and in the root Makefile). The important ones are:
+#
+# - make web-build: builds the web interface (output files are in ../htdocs)
+# - make web-clean: deletes files from ../htdocs that were created by the build
+# - make web-dist: creates a tar file for the web interface build output
+# - make web-serve: runs a local development server
+#
+# https://www.gnu.org/software/automake/manual/html_node/Third_002dParty-Makefiles.html
+#
+
+EXTRA_DIST = public \
+	src \
+	.eslintrc.js \
+	.prettierrc.json \
+	index.html \
+	package.json \
+	package-lock.json \
+	vite.config.js
+
+HTDOCS_DIR = ../htdocs
+
+web-serve: node_modules
+	npm run serve
+
+web-build: node_modules
+	npm run build
+
+web-update:
+	npm update
+
+web-lint: node_modules
+	npm run lint
+
+web-format: node_modules
+	npm run format
+
+web-clean:
+	rm -rf $(HTDOCS_DIR)/assets
+	rm -f $(HTDOCS_DIR)/android-chrome-192x192.png \
+		$(HTDOCS_DIR)/android-chrome-512x512.png \
+		$(HTDOCS_DIR)/apple-touch-icon.png \
+		$(HTDOCS_DIR)/browserconfig.xml \
+		$(HTDOCS_DIR)/favicon.ico \
+		$(HTDOCS_DIR)/favicon-16x16.png \
+		$(HTDOCS_DIR)/favicon-32x32.png \
+		$(HTDOCS_DIR)/index.html \
+		$(HTDOCS_DIR)/logo.svg \
+		$(HTDOCS_DIR)/mstile-150x150.png \
+		$(HTDOCS_DIR)/safari-pinned-tab.svg \
+		$(HTDOCS_DIR)/site.webmanifest
+
+web-clean-all: web-clean
+	rm -rf node_modules
+
+node_modules: $(PKG_CONF)
+	npm clean-install
+
+.PHONY: web-serve web-build web-update web-lint web-format web-clean web-clean-all