feat: add npm deploy and move backend source to /api folder (#3422)

.github/workflows/release-it.yml

@@ -34,9 +34,16 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
 
+      - name: Initialize NPM config
+        run: |
+          npm config set //registry.npmjs.org/:_authToken $NPM_TOKEN
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
       - name: Make the release
         env:
           GITHUB_TOKEN: ${{ secrets.BOT_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 
         run: |
           git config user.email "bot@zwave-js.io"
           git config user.name "Z-Wave JS Bot"

.npmignore

@@ -0,0 +1,27 @@
+.github
+.vscode
+.yarn
+/api/
+/src/
+/certs/
+/docker/
+/docs/
+/kubernetes/
+/test/
+/pkg/
+/store/
+
+
+/.*
+/*.ts
+/*.js
+/kustomization.yaml
+/fakeNodes.json
+/nodemon.json
+/package.sh
+/index.html
+
+/tsconfig.*
+
+/*.md
+/*.tgz

app.ts → api/app.ts

@@ -1,5 +1,4 @@
 import express, { Request, RequestHandler, Response, Router } from 'express'
-import { version } from './package.json'
 import history from 'connect-history-api-fallback'
 import cors from 'cors'
 import csrf from 'csurf'
@@ -1158,7 +1157,7 @@ app.post(
 
 			// update versions to actual ones
 			settings.gateway.versions = {
-				app: version, // don't use getVersion here as it may include commit sha
+				app: utils.pkgJson.version, // don't use getVersion here as it may include commit sha
 				driver: libVersion,
 				server: serverVersion,
 			}

config/app.ts → api/config/app.ts

@@ -10,15 +10,16 @@ export const logsDir: string = joinPath(storeDir, 'logs')
 export const snippetsDir: string = joinPath(storeDir, 'snippets')
 
 export const tmpDir: string = joinPath(storeDir, '.tmp')
-export const backupsDir: string = process.env.BACKUPS_DIR || joinPath(storeDir, 'backups')
+export const backupsDir: string =
+	process.env.BACKUPS_DIR || joinPath(storeDir, 'backups')
 export const nvmBackupsDir: string = joinPath(backupsDir, 'nvm')
 export const storeBackupsDir: string = joinPath(backupsDir, 'store')
 
-
-export const defaultUser: string =  'admin'
-export const defaultPsw: string =  'zwave'
+export const defaultUser: string = 'admin'
+export const defaultPsw: string = 'zwave'
 // lgtm [js/hardcoded-credentials]
-export const sessionSecret: string =  process.env.SESSION_SECRET || 'DEFAULT_SESSION_SECRET_CHANGE_ME'
-export const base: string =  process.env.BASE_PATH || '/'
-export const port: string | number =  process.env.PORT || 8091
-export const host: string =  process.env.HOST // by default undefined, so it will listen on all interfaces both ipv4 and ipv6
+export const sessionSecret: string =
+	process.env.SESSION_SECRET || 'DEFAULT_SESSION_SECRET_CHANGE_ME'
+export const base: string = process.env.BASE_PATH || '/'
+export const port: string | number = process.env.PORT || 8091
+export const host: string = process.env.HOST // by default undefined, so it will listen on all interfaces both ipv4 and ipv6

lib/BackupManager.ts → api/lib/BackupManager.ts

@@ -1,5 +1,5 @@
 import store from '../config/store'
-import { module } from '../lib/logger'
+import { module } from './logger'
 import jsonStore, { STORE_BACKUP_PREFIX } from './jsonStore'
 import Cron from 'croner'
 import { readdir, unlink } from 'fs/promises'

lib/Gateway.ts → api/lib/Gateway.ts

@@ -1,10 +1,10 @@
 import * as fs from 'fs'
 import * as path from 'path'
-import * as utils from '../lib/utils'
+import * as utils from './utils'
 import { AlarmSensorType, SetValueAPIOptions } from 'zwave-js'
 import { CommandClasses, ValueID } from '@zwave-js/core'
 import * as Constants from './Constants'
-import { LogLevel, module } from '../lib/logger'
+import { LogLevel, module } from './logger'
 import hassCfg from '../hass/configurations'
 import hassDevices from '../hass/devices'
 import { storeDir } from '../config/app'

lib/MqttClient.ts → api/lib/MqttClient.ts

@@ -8,9 +8,8 @@ import {
 	IStore,
 	connect,
 } from 'mqtt'
-import { allSettled, parseJSON, sanitizeTopic } from './utils'
+import { allSettled, parseJSON, sanitizeTopic, pkgJson } from './utils'
 import { module } from './logger'
-import { version as appVersion } from '../package.json'
 import { TypedEventEmitter } from './EventEmitter'
 import { storeDir } from '../config/app'
 import { ensureDir } from 'fs-extra'
@@ -203,7 +202,7 @@ class MqttClient extends TypedEventEmitter<MqttClientEventCallbacks> {
 		if (this.client) {
 			this.client.publish(
 				this.getClientTopic(MqttClient.VERSION_TOPIC),
-				JSON.stringify({ value: appVersion, time: Date.now() }),
+				JSON.stringify({ value: pkgJson.version, time: Date.now() }),
 				{ retain: this.config.retain, qos: this.config.qos },
 			)
 		}

lib/ZwaveClient.ts → api/lib/ZwaveClient.ts

@@ -110,7 +110,6 @@ import * as utils from './utils'
 import { serverVersion, ZwavejsServer } from '@zwave-js/server'
 import { ensureDir, exists, mkdirp, writeFile } from 'fs-extra'
 import { Server as SocketServer } from 'socket.io'
-import * as pkgjson from '../package.json'
 import { TypedEventEmitter } from './EventEmitter'
 import { GatewayValue } from './Gateway'
 
@@ -2135,7 +2134,7 @@ class ZwaveClient extends TypedEventEmitter<ZwaveClientEventCallbacks> {
 						: true,
 				},
 				userAgent: {
-					[pkgjson.name]: pkgjson.version,
+					[utils.pkgJson.name]: utils.pkgJson.version,
 				},
 			}
 
@@ -2677,9 +2676,9 @@ class ZwaveClient extends TypedEventEmitter<ZwaveClientEventCallbacks> {
 		if (this._driver) {
 			this._driver.enableStatistics({
 				applicationName:
-					pkgjson.name +
+					utils.pkgJson.name +
 					(this.cfg.serverEnabled ? ' / zwave-js-server' : ''),
-				applicationVersion: pkgjson.version,
+				applicationVersion: utils.pkgJson.version,
 			})
 			logger.info('Zwavejs usage statistics ENABLED')
 		}

lib/utils.ts → api/lib/utils.ts

@@ -1,11 +1,13 @@
 // eslint-disable-next-line one-var
-import * as appRoot from 'app-root-path'
-import { version } from '../package.json'
 import { ValueID } from 'zwave-js'
-import path from 'path'
+import path, { resolve } from 'path'
 import crypto from 'crypto'
 import { readFileSync } from 'fs'
 
+// don't use import here, it will break the build
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+export const pkgJson = require('../../package.json')
+
 let VERSION: string
 
 export interface Snippet {
@@ -77,13 +79,16 @@ export function fileDate(date?: Date) {
 	return date.toISOString().slice(-24).replace(/\D/g, '').slice(0, 14)
 }
 
+/** Where package.json is */
+export const basePath = resolve(__dirname, '..', '..')
+
 /**
  *  Get the base root path to application directory. When we are in a `pkg` environment
  *  the path of the snapshot is not writable
  */
 export function getPath(write: boolean): string {
 	if (write && hasProperty(process, 'pkg')) return process.cwd()
-	else return appRoot.toString()
+	else return basePath
 }
 
 /**
@@ -167,9 +172,11 @@ export function getVersion(): string {
 					.trim()
 			}
 
-			VERSION = `${version}${rev ? '.' + rev.substring(0, 7) : ''}`
+			VERSION = `${pkgJson.version}${
+				rev ? '.' + rev.substring(0, 7) : ''
+			}`
 		} catch {
-			VERSION = version
+			VERSION = pkgJson.version
 		}
 	}
 

docs/getting-started/other-methods.md

@@ -34,6 +34,64 @@ sudo snap connect zwave-js-ui:hardware-observe
 >
 > Raspberry Pi users running Raspbian/Debian, read [this thread](https://github.com/zwave-js/zwave-js-ui/discussions/1216#discussion-3364776). Please ask Raspbian/Debian related-questions in this thread.
 
+## NPM
+
+You can install Z-Wave JS UI from NPM:
+
+```bash
+npm install -g zwave-js-ui
+```
+
+And run it with:
+
+```bash
+zwave-js-ui
+```
+
+> [!WARNING]
+> You **MUST** configure a custom storage path using an environment variable, otherwise settings will be lost on updates.
+
+Run with custom storage path:
+
+```bash
+STORE_DIR=~/.zwave-js-ui \
+ZWAVEJS_EXTERNAL_CONFIG=~/.zwave-js-ui/.config-db \
+zwave-js-ui
+```
+
+If you want to run it as a service, you can use [PM2](https://pm2.keymetrics.io/):
+
+```bash
+npm install -g pm2
+```
+
+Create a file named `ecosystem.config.js` with the following content (change the paths to match your system):
+
+```js
+module.exports = {
+  apps : [
+      {
+        out_file: "/dev/null", // disable logs, use log to file when needed
+        error_file: "/dev/null", // disable logs, use log to file when needed
+        cwd: "~/",
+        script: "zwave-js-ui",
+        env: {
+          STORE_DIR: "~/.zwave-js-ui",
+          ZWAVEJS_EXTERNAL_CONFIG: "~/.zwave-js-ui/.config-db",
+        },
+      },
+  ]
+}
+```
+
+And run it with:
+
+```bash
+pm2 start ecosystem.config.js
+pm2 save
+pm2 startup
+```
+
 ## NodeJS or PKG version
 
 The most complex way to run Z-Wave JS UI is on bare metal. To do so, you can use the packaged version (you don't need NodeJS/yarn installed) or clone this repository and build the project:

nodemon.json

@@ -2,5 +2,5 @@
 	"watch": ["**/*.ts", "package.json", "tsconfig.json", "../node-zwave-js/packages/*/build/**/*.js"],
 	"ext": "ts,json,js",
 	"ignore": ["pkg", "store", "node_modules", "src", "dist", "server"],
-	"exec": "node --inspect=7004 --trace-warnings -r ./esbuild-register bin/www.ts"
+	"exec": "node --inspect=7004 --trace-warnings -r ./esbuild-register api/bin/www.ts"
 }

package.json

@@ -41,7 +41,7 @@
     "dev": "vite",
     "dev-https": "SERVER_SSL='true' yarn run dev",
     "dev:server": "nodemon",
-    "server": "ts-node -r esbuild-register bin/www.ts",
+    "server": "ts-node -r esbuild-register api/bin/www.ts",
     "fake-stick": "yarn mock-server -c server_config.js",
     "start": "node --preserve-symlinks server/bin/www.js",
     "lint": "npm-run-all 'lint:*'",
@@ -81,7 +81,7 @@
       "before:release": "./package.sh --release"
     },
     "npm": {
-      "publish": false
+      "publish": true
     },
     "plugins": {
       "@release-it/conventional-changelog": {
@@ -119,10 +119,8 @@
     "@zwave-js/server": "^1.33.0",
     "@zwave-js/winston-daily-rotate-file": "^4.5.6-1",
     "ansi_up": "^6.0.2",
-    "app-root-path": "^3.1.0",
     "archiver": "^6.0.1",
     "axios": "^1.5.1",
-    "axios-progress-bar": "^1.2.0",
     "connect-history-api-fallback": "2.0.0",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
@@ -145,6 +143,7 @@
     "mqtt-jsonl-store": "^0.2.0",
     "multer": "^1.4.5-lts.1",
     "native-url": "^0.3.4",
+    "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "prismjs": "^1.29.0",
     "qr-scanner": "^1.4.2",
@@ -168,7 +167,6 @@
     "@actions/github": "^6.0.0",
     "@babel/register": "^7.22.15",
     "@tsconfig/node18": "^18.2.2",
-    "@types/app-root-path": "^1.2.7",
     "@types/archiver": "^5.3.4",
     "@types/chai": "^4.3.9",
     "@types/chai-as-promised": "^7.1.7",

src/apis/ConfigApis.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { loadProgressBar } from 'axios-progress-bar'
+import loadProgressBar from '../lib/axios-progress-bar'
 import Router from '../router'
 import logger from '../lib/logger'
 

src/lib/axios-progress-bar.js

@@ -0,0 +1,55 @@
+import 'nprogress/nprogress.css'
+import NProgress from 'nprogress'
+import axios from 'axios'
+
+const calculatePercentage = (loaded, total) => Math.floor(loaded * 1.0) / total
+
+export default function loadProgressBar(config, instance = axios) {
+	let requestsCounter = 0
+
+	const setupStartProgress = () => {
+		instance.interceptors.request.use((c) => {
+			requestsCounter++
+			NProgress.start()
+			return c
+		})
+	}
+
+	const setupUpdateProgress = () => {
+		const update = (e) => {
+			const { loaded, total } = e
+
+			// sometimes `total` is undefined, in that case simply call `inc` without params
+			if (loaded !== undefined && total !== undefined) {
+				NProgress.set(calculatePercentage(loaded, total))
+			} else {
+				NProgress.inc()
+			}
+		}
+		instance.defaults.onDownloadProgress = update
+		instance.defaults.onUploadProgress = update
+	}
+
+	const setupStopProgress = () => {
+		const responseFunc = (response) => {
+			if (--requestsCounter === 0) {
+				NProgress.done()
+			}
+			return response
+		}
+
+		const errorFunc = (error) => {
+			if (--requestsCounter === 0) {
+				NProgress.done()
+			}
+			return Promise.reject(error)
+		}
+
+		instance.interceptors.response.use(responseFunc, errorFunc)
+	}
+
+	NProgress.configure(config)
+	setupStartProgress()
+	setupUpdateProgress()
+	setupStopProgress()
+}

src/main.js

@@ -3,8 +3,6 @@ import pinia from './plugins/pinia'
 import vuetify from './plugins/vuetify' // path to vuetify export
 import router from './router'
 import App from './App.vue'
-
-import 'axios-progress-bar/dist/nprogress.css'
 // Custom assets CSS JS
 import './assets/css/main.css'