Build JS/CSS Theme on release (hestiacp#3525)

Co-authored-by: Alec Rust <me@alecrust.com>

Author: jaapmarcus

.drone.yml

@@ -25,16 +25,10 @@ steps:
       - git submodule update --init --recursive
   - name: Build Hestia package and install
     commands:
+      - yarn set version stable
+      - yarn install
+      - yarn build
       - ./src/hst_autocompile.sh --hestia --install '~localsrc'
-  - name: Run system / user tests
-    commands:
-      - bats ./test/test.bats
-  - name: Run restore tests
-    commands:
-      - bats ./test/restore.bats
-  - name: Run config tests
-    commands:
-      - bats ./test/config-tests.bats
 
 trigger:
   event: [pull_request, push]
@@ -73,19 +67,6 @@ steps:
   - name: Build Hestia package install
     commands:
       - ./src/hst_autocompile.sh --hestia --install '~localsrc'
-  - name: Run system / user tests
-    commands:
-      - bats ./test/test.bats
-  - name: Run restore tests
-    commands:
-      - bats ./test/restore.bats
-  - name: Run Letsencrypt test against Staging
-    commands:
-      - cp /root/le-env.sh /tmp/hestia-le-env.sh
-      - bats ./test/letsencrypt.bats
-  - name: Run config tests
-    commands:
-      - bats ./test/config-tests.bats
 
 trigger:
   event: [pull_request, push]
@@ -106,6 +87,12 @@ platform:
   arch: amd64
 
 steps:
+  - name: Build JS/CSS
+    image: node:current-slim
+    commands:
+      - yarn set version stable
+      - yarn install
+      - yarn build
   - name: Build
     image: debian:bullseye
     commands:

.github/dependabot.yml

@@ -7,14 +7,19 @@ updates:
       interval: "weekly"
 
   # Maintain dependencies for npm
-  # TODO: Enable this when we build JS and have no checked-in minified JS/CSS
-  # - package-ecosystem: "npm"
-  #   directory: "/web"
-  #   schedule:
-  #     interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
 
   # Maintain dependencies for Composer
   - package-ecosystem: "composer"
     directory: "/web/inc" # Location of package manifests
     schedule:
       interval: "weekly"
+
+  # Maintain dependencies for Composer
+  - package-ecosystem: "composer"
+    directory: "/web/src" # Location of package manifests
+    schedule:
+      interval: "weekly"

.gitignore

@@ -25,6 +25,12 @@
 
 .env
 
+# Distribution CSS
+web/css/themes/
+
+# Distribution JS
+web/js/dist/
+
 # Composer
 composer.phar
 test/vendor/

bin/v-update-sys-hestia-git

@@ -1,6 +1,6 @@
 #!/bin/bash
 # info: Install update from Git repository
-# options: REPOSITORY BRANCH INSTALL [PACKAGES]
+# options: REPOSITORY BRANCH INSTALL
 #
 # example: v-update-sys-hestia-git hestiacp staging/beta install
 #          # Will download from the hestiacp repository
@@ -24,6 +24,11 @@ source_conf "$HESTIA/conf/hestia.conf"
 # Perform verification if read-only mode is enabled
 check_hestia_demo_mode
 
+if [ -z $(which "yarn") ]; then
+	echo "Unable to locate Yarn and NodeJS  See https://hestiacp.com/docs/contributing/development.html"
+	exit 0
+fi
+
 # Define download function
 download_file() {
 	local url=$1
@@ -294,6 +299,11 @@ mkdir -p $BUILD_DIR_HESTIA/usr/local/hestia
 
 # Move needed directories
 cd $BUILD_DIR/hestiacp-$branch_dash
+
+yarn set version stable
+yarn install
+yarn build
+
 cp -rf bin func install web $BUILD_DIR_HESTIA/usr/local/hestia/
 
 # Set permissions

build.js

@@ -67,6 +67,7 @@ function getOutputPath(pkg) {
 // Process a CSS file
 async function processCSS(inputFile, outputFile) {
 	try {
+		await ensureDir(path.dirname(outputFile));
 		const css = await fs.readFile(inputFile);
 		const result = await postcss(postcssConfig.plugins).process(css, {
 			from: inputFile,
@@ -97,6 +98,17 @@ async function buildCSS() {
 	await Promise.all(cssBuildPromises);
 }
 
+// Ensure a directory exists
+async function ensureDir(dir) {
+	try {
+		await fs.mkdir(dir, { recursive: true });
+	} catch (error) {
+		if (error.code !== 'EEXIST') {
+			throw error;
+		}
+	}
+}
+
 // Build all assets
 async function build() {
 	console.log('🚀 Building JS and CSS...');

docs/docs/contributing/development.md

@@ -51,6 +51,16 @@ multipass mount $HOME/projects/hestiacp hestia-dev:/home/ubuntu/hestiacp
    sudo apt update && sudo apt install -y jq libjq1
    ```
 
+1. Install [Node JS](https://nodejs.org/en) and Yarn `npm install --global yarn`
+
+1. Build the theme files with
+
+   ```bash
+   yarn set version stable
+   yarn install
+   yarn build
+   ```
+
 1. Navigate to `/src` and build Hestia packages
 
    ```bash
@@ -175,6 +185,8 @@ Use if you have Hestia already installed, for your changes to take effect.
 
 The following is useful for testing a Pull Request or a branch on a fork.
 
+Make sure to install [Node JS](https://nodejs.org/en) and Yarn `npm install --global yarn` before.
+
 ```bash
 # Replace with https://github.com/username/hestiacp.git if you want to test a branch that you created yourself
 git clone https://github.com/hestiacp/hestiacp.git
@@ -183,6 +195,13 @@ cd ./hestiacp/
 # Replace main with the branch you want to test
 git checkout main
 
+# Enable Yarn 3.x
+yarn set version stable
+# Install Dependencies
+yarn install
+# Build
+yarn build
+
 cd ./src/
 
 # Compile packages

package.json

@@ -17,7 +17,7 @@
 		"preinstall": "npx only-allow yarn",
 		"postinstall": "husky install"
 	},
-	"packageManager": "yarn@3.5.0",
+	"packageManager": "yarn@3.5.1",
 	"dependencies": {
 		"@fortawesome/fontawesome-free": "^6.4.0",
 		"alpinejs": "^3.12.0",