Merge pull request #168 from dec0dOS/modernize

Modernize codebase

.dockerignore

@@ -3,7 +3,7 @@
 *Dockerfile*
 *docker-compose*
 node_modules
-jsconfig.js
+.eslintrc.json
 .DS_Store
 tmp
 temp
@@ -13,4 +13,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+.yarn/cache
+db.json
 backend/data/db.json

.github/workflows/codeql-analysis.yml

@@ -7,7 +7,7 @@ on:
   pull_request:
     branches: [main]
   schedule:
-    - cron: "27 2 * * 4"
+    - cron: "30 2 * * 6"
 
 jobs:
   analyze:

.github/workflows/lock.yml

@@ -1,20 +0,0 @@
----
-name: Lock
-
-on:
-  schedule:
-    - cron: "0 9 * * *"
-  workflow_dispatch:
-
-jobs:
-  lock:
-    name: 🔒 Lock closed issues and PRs
-    runs-on: ubuntu-latest
-    steps:
-      - uses: dessant/lock-threads@v2.0.3
-        with:
-          github-token: ${{ github.token }}
-          issue-lock-inactive-days: "30"
-          issue-lock-reason: ""
-          pr-lock-inactive-days: "1"
-          pr-lock-reason: ""

.yarnrc.yml

@@ -1,11 +1,7 @@
-logFilters:
-  - code: YN0013
-    level: discard
+compressionLevel: mixed
+
+enableGlobalCache: false
 
 nodeLinker: node-modules
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-
-yarnPath: .yarn/releases/yarn-3.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.0.0-rc.53.cjs

README.md

@@ -43,34 +43,25 @@
 
 ## About
 
-<table>
-<tr>
-<td>
+This project drew inspiration from [ztncui](https://github.com/key-networks/ztncui) and was developed to address the current limitations of self-hosted [network controllers](https://github.com/zerotier/ZeroTierOne/tree/master/controller). Some of the issues in [ztncui](https://github.com/key-networks/ztncui) cannot be resolved due to the core architecture of the project. ZeroUI aims to resolve these issues and introduces the following features:
 
-This project is highly inspired by [ztncui](https://github.com/key-networks/ztncui) and was developed to address the current limitations of applying the self-hosted [network controllers](https://github.com/zerotier/ZeroTierOne/tree/master/controller). Some [ztncui](https://github.com/key-networks/ztncui) problems cannot be fixed because of the core architecture of the project. ZeroUI tries to solve them and implements the following features:
-
-- Full React-powered lightweight [SPA](https://en.wikipedia.org/wiki/Single-page_application) that brings a better user experience, and ZeroUI is mobile-friendly.
-- ZeroUI has ZeroTier Central compatible API. That means you could use CLI tools and custom applications made only for ZeroTier Central to manage your networks.
-- ZeroUI implements controller-specific workarounds that address some existing [issues](https://github.com/zerotier/ZeroTierOne/issues/859). ZTNCUI [does not](https://github.com/key-networks/ztncui/issues/63).
-- ZeroUI is more feature complete. ZeroUI has almost all network-controller-supported features, for example, rule editor. The development process hasn't stopped, so you will enjoy new features and bug fixes shortly.
-- ZeroUI deployment is simple. Please refer to [installation](#installation) for more info.
+- It is a lightweight [Single Page Application (SPA)](https://en.wikipedia.org/wiki/Single-page_application) built with React, providing an improved user experience, and it is mobile-friendly.
+- ZeroUI is compatible with the ZeroTier Central API, allowing you to use CLI tools and custom applications designed for ZeroTier Central to manage your networks.
+- ZeroUI implements controller-specific workarounds to address certain existing [issues](https://github.com/zerotier/ZeroTierOne/issues/859) that are not addressed in [ZTNCUI](https://github.com/key-networks/ztncui/issues/63).
+- ZeroUI is more feature-complete, supporting almost all network controller features, including a rule editor. Development is ongoing, so you can expect regular updates with new features and bug fixes.
+- Deploying ZeroUI is straightforward; refer to the [installation](#installation) section for more information.
 
 <details>
-<summary>Wait, I haven't heard about ZeroTier yet...</summary>
+<summary>Curious about ZeroTier?</summary>
 <br>
 
-[ZeroTier](https://www.zerotier.com) is awesome [open source project](https://github.com/zerotier/ZeroTierOne) that is available on wide range of [platforms](https://www.zerotier.com/download/).
-Most of your hard networking problems could be solved with ZeroTier. It could replace all your complex VPN setups. You can place all your devices on a virtual LAN and manage it easily.
+[ZeroTier](https://www.zerotier.com) is an impressive [open-source project](https://github.com/zerotier/ZeroTierOne) available on a wide range of [platforms](https://www.zerotier.com/download/). It can resolve many of your complex networking issues, potentially replacing your intricate VPN setups. You can create a virtual LAN and manage all your devices effortlessly.
 
-To sum up, ZeroTier combines the capabilities of VPN and SD-WAN, simplifying network management.
+In essence, ZeroTier combines the capabilities of VPN and SD-WAN, simplifying network management.
 
 </details>
 
-</td>
-</tr>
-</table>
-
-### Built With
+## Built With
 
 Frontend:
 
@@ -83,7 +74,7 @@ Backend:
 - [Express](https://expressjs.com)
 - [Lowdb](https://github.com/typicode/lowdb)
 
-Ready to use deployment solution:
+Ready-to-use deployment solution:
 
 - [Docker](https://www.docker.com)
 - [Docker Compose](https://docs.docker.com/compose/)
@@ -93,14 +84,13 @@ Ready to use deployment solution:
 
 ### Prerequisites
 
-The recommended method to install ZeroUI is by using Docker and Docker Compose.
-To install [Docker](https://docs.docker.com/get-docker) and [Docker Compose](https://docs.docker.com/compose/install) on your system, please follow the installation guide from the [official Docker documentation](https://docs.docker.com/get-docker).
+The recommended way to install ZeroUI is by using Docker and Docker Compose. To install [Docker](https://docs.docker.com/get-docker) and [Docker Compose](https://docs.docker.com/compose/install) on your system, please follow the installation guide in the [official Docker documentation](https://docs.docker.com/get-docker).
 
-For HTTPS setup you will need a domain name. You can get it for free at https://www.duckdns.org.
+For HTTPS setup, you will need a domain name. You can obtain one for free at https://www.duckdns.org.
 
 ### Installation
 
-The most simple one-minute installation. Great for the fresh VPS setup.
+Here's a straightforward one-minute installation guide, perfect for a fresh VPS setup:
 
 1. Create a project directory
 
@@ -140,28 +130,28 @@ docker-compose up -d --no-build
 docker-compose logs -f
 ```
 
-7. Disable your firewall for the following ports: `80/tcp`, `443/tcp` and `9993/udp`
+7. Disable your firewall for the following ports: `80/tcp`, `443/tcp`, and `9993/udp`
 
-- on Ubuntu/Debian with ufw installed:
+- On Ubuntu/Debian with ufw installed:
 
 ```sh
- ufw allow 80/tcp
- ufw allow 443/tcp
- ufw allow 9993/udp
+ufw allow 80/tcp
+ufw allow 443/tcp
+ufw allow 9993/udp
 ```
 
-- or you may use the old good iptables:
+- Or you can use iptables:
 
 ```sh
- iptables -A INPUT -p tcp --dport 80 -j ACCEPT
- iptables -A INPUT -p tcp --dport 443 -j ACCEPT
- iptables -A INPUT -p udp --dport 9993 -j ACCEPT
+iptables -A INPUT -p tcp --dport 80 -j ACCEPT
+iptables -A INPUT -p tcp --dport 443 -j ACCEPT
+iptables -A INPUT -p udp --dport 9993 -j ACCEPT
 ```
 
 8. Navigate to `https://YOURDOMAIN.com/app/`.
-   Now you could use your ZeroUI instance with HTTPS support and automated certificate renewal.
+   Now you can use your ZeroUI instance with HTTPS support and automated certificate renewal.
 
-> To disable Caddy proxy and HTTPS, remove the `https-proxy` from `docker-compose.yml`, set `ZU_SECURE_HEADERS` to `false` and change zero-ui port `expose` to `ports`.
+> To disable Caddy proxy and HTTPS, remove the `https-proxy` from `docker-compose.yml`, set `ZU_SECURE_HEADERS` to `false`, and change zero-ui port `expose` to `ports`.
 
 Advanced manual setups are also supported. Check the following environment variables as a reference:
 | Name | Default value | Description |
@@ -181,62 +171,49 @@ Advanced manual setups are also supported. Check the following environment varia
 
 ZeroUI could be deployed as a regular nodejs web application, but it requires a ZeroTier controller that is installed with the `zerotier-one` package. For more info about the network controller, you could read [here](https://github.com/zerotier/ZeroTierOne/tree/master/controller/#readme).
 
-For Ansible Role, please refer to [zero-ui-ansible repo](https://github.com/dec0dOS/zero-ui-ansible).
+For Ansible Role, please refer to the [zero-ui-ansible repository](https://github.com/dec0dOS/zero-ui-ansible).
 
 <details>
-<summary>Controller setup tips (outside the Docker)</summary>
+<summary>Controller Setup Tips (Outside Docker)</summary>
 <br>
 
-If you are using the existing controller on the host, it may be necessary to allow connection from the Docker container.
-You could do it in two ways:
+If you are using an existing controller on the host, you may need to allow connections from the Docker container. There are two ways to do this:
 
-1. Allowing controller management from any IP address:
+1. Allow controller management from any IP address:
 
 ```sh
 echo "{\"settings\": {\"portMappingEnabled\": true,\"softwareUpdate\": \"disable\",\"allowManagementFrom\": [\"0.0.0.0/0\"]}}" > /var/lib/zerotier-one/local.conf
 ```
 
-> Warning: don't forget to block connections to 9993/TCP from WAN. Direct controller API does not mean to be exposed to WAN, it should be proxified via the ZeroUI backend.
+> Warning: Don't forget to block connections to 9993/TCP from the WAN. Directly exposing the controller API to the WAN is not recommended; it should be proxified via the ZeroUI backend.
 
-2. Adding `network_mode: "host"` to zero-ui in docker-compose.yml.
+2. Add `network_mode: "host"` to zero-ui in `docker-compose.yml`.
 
-More info is provided in the following [discussion](https://github.com/dec0dOS/zero-ui/discussions/8).
+For more information, please refer to this [discussion](https://github.com/dec0dOS/zero-ui/discussions/8).
 
 </details>
 
 ## Usage
 
-After installation, log in with your credentials that are declared with ZU_DEFAULT_USERNAME and ZU_DEFAULT_PASSWORD.
+After installation, log in with the credentials declared with `ZU_DEFAULT_USERNAME` and `ZU_DEFAULT_PASSWORD`.
 
 Currently, almost all main ZeroTier Central features are available. Refer to the [roadmap](#roadmap) for more information.
 
-_For the screenshots, please refer to the [screenshots](docs/SCREENSHOTS.md)._
+_For screenshots, please refer to the [screenshots](docs/SCREENSHOTS.md) section._
 
 ### Update
 
-To get the latest version just run
+To get the latest version, simply run
 
 ```sh
 docker-compose pull && docker-compose up -d --no-build
 ```
 
-in the folder where `docker-compose.yml` is located. Backup is not required as your data is saved in Docker volumes but recommended.
-You could also set up [watchtower](https://github.com/containrrr/watchtower) for automatic updates.
-
-```sh
-docker run -d \
- --name watchtower \
- -v /var/run/docker.sock:/var/run/docker.sock \
- --restart always \
- containrrr/watchtower \
- --cleanup --include-restarting \
- zu-main zu-controller
-```
+in the folder where `docker-compose.yml` is located. While backups are not required as your data is saved in Docker volumes, it is recommended.
 
 ### Backup
 
-You should regularly back up the `zerotier-one` and `data` folders in your ZeroUI installation directory.
-You should do it manually before the upgrade via the following commands:
+You should regularly back up the `zerotier-one` and `data` folders in your ZeroUI installation directory. You can do this manually before upgrading using the following commands:
 
 ```sh
 tar cvf backup-ui.tar data/
@@ -245,7 +222,7 @@ tar cvf backup-zt.tar zerotier-one/
 
 ## Roadmap
 
-See the [open issues](https://github.com/dec0dOS/zero-ui/issues) for a list of proposed features (and known issues).
+For a list of proposed features (and known issues), see the [open issues](https://github.com/dec0dOS/zero-ui/issues).
 
 - [Top Feature Requests](https://github.com/dec0dOS/zero-ui/issues?q=label%3Aenhancement+is%3Aopen+sort%3Areactions-%2B1-desc) (Add your votes using the 👍 reaction)
 - [Top Bugs](https://github.com/dec0dOS/zero-ui/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Areactions-%2B1-desc) (Add your votes using the 👍 reaction)
@@ -253,29 +230,30 @@ See the [open issues](https://github.com/dec0dOS/zero-ui/issues) for a list of p
 
 [![GitHub issues open](https://img.shields.io/github/issues/dec0dOS/zero-ui.svg?maxAge=2592000)](https://github.com/dec0dOS/zero-ui/issues)
 
-Please try to create bug reports that are:
+When creating bug reports, please ensure they are:
 
 - _Reproducible._ Include steps to reproduce the problem.
-- _Specific._ Include as much detail as possible: which version, what environment, etc.
-- _Unique._ Do not duplicate existing opened issues.
-- _Scoped to a Single Bug._ One bug per report.
+- _Specific._ Provide as much detail as possible, including version, environment, etc.
+- _Unique._ Avoid duplicating existing open issues.
+- _Scoped to a Single Bug._ Report one bug per issue.
 
 ## Contributing
 
-First off, thanks for taking the time to contribute! Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make will benefit everybody else and are **greatly appreciated**.
+Firstly, thank you for considering contributing! Contributions are what make the open-source community thrive. Any contributions you make will benefit everyone, and they are highly appreciated.
 
-1. Fork the project
-2. Create your feature branch (`git checkout -b feat/amazing_feature`)
-3. Commit your changes (`git commit -m 'feat: add amazing_feature'`)
-4. Push to the branch (`git push origin feat/amazing_feature`)
+To contribute:
+
+1. Fork the project.
+2. Create your feature branch (`git checkout -b feat/amazing_feature`).
+3. Commit your changes (`git commit -m 'feat: add amazing_feature'`).
+4. Push to the branch (`git push origin feat/amazing_feature`).
 5. [Open a Pull Request](https://github.com/dec0dOS/zero-ui/compare?expand=1)
 
-ZeroUI uses [conventional commits](https://www.conventionalcommits.org), so please follow the guidelines.
-Run `yarn commit` to open [TUI](https://en.wikipedia.org/wiki/Text-based_user_interface) that follows conventional commits guidelines.
+ZeroUI uses [conventional commits](https://www.conventionalcommits.org), so please follow the guidelines. You can use `yarn commit` to open a [Text-Based User Interface (TUI)](https://en.wikipedia.org/wiki/Text-based_user_interface) that follows conventional commits guidelines.
 
-### Development environment
+### Development Environment
 
-To set up a development environment, please follow these steps:
+To set up a development environment, follow these steps:
 
 1. Clone the repo
 
@@ -298,37 +276,35 @@ yarn dev
 
 4. Navigate to http://localhost:3000
 
-It is also required to install the ZeroTier controller. On Linux installing the `zerotier-one` package is enough, other platforms require some tweaking. Firstly you should get the controller token. On macOS, you could find it with the following command:
+You will also need to install the ZeroTier controller. On Linux, installing the `zerotier-one` package is sufficient, but other platforms may require some adjustments. First, you should obtain the controller token. On macOS, you can find it using the following command:
 
 ```sh
 sudo cat "/Library/Application Support/ZeroTier/One/authtoken.secret"
 ```
 
-After you could start the ZeroUI development environment:
+Afterward, you can start the ZeroUI development environment:
 
 ```sh
 ZU_CONTROLLER_TOKEN=TOKEN_FROM_authtoken.secret yarn dev
 ```
 
-_For other platforms, please refer to [ZeroTier manual](https://www.zerotier.com/manual/#4)._
+For other platforms, please refer to the [ZeroTier manual](https://www.zerotier.com/manual/#4).
 
 ## Support
 
-Reach out to me at one of the following places:
-
-- [GitHub Discussions](https://github.com/dec0dOS/zero-ui/discussions)
+If you need assistance or have questions, reach out through [GitHub Discussions](https://github.com/dec0dOS/zero-ui/discussions).
 
 ## Security
 
-ZeroUI follows good practices of security, but 100% security cannot be assured. ZeroUI is provided "as is" without any warranty. Use at your own risk.
+ZeroUI follows best practices for security, but complete security cannot be guaranteed. ZeroUI is provided "as is" without any warranty. Use at your own risk.
 
-For enterprise support, a more reliable and scalable solution, please use ZeroTier Central.
+For enterprise support and a more reliable and scalable solution, please consider using ZeroTier Central.
 
-_For more information and to report security issues, please refer to our [security documentation](docs/SECURITY.md)._
+For more information and to report security issues, please refer to our [security documentation](docs/SECURITY.md).
 
-## Copyright notice
+## Copyright Notice
 
-ZeroUI is not affiliated or associated with or endorsed by ZeroTier Central or ZeroTier, Inc.
+ZeroUI is not affiliated with, associated with, or endorsed by ZeroTier Central or ZeroTier, Inc.
 
 ## License
 

backend/.eslintrc.json

@@ -0,0 +1,63 @@
+{
+  "plugins": [
+    "@typescript-eslint",
+    "unicorn",
+    "jsdoc",
+    "import",
+    "promise",
+    "sonarjs"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:n/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:unicorn/recommended",
+    "plugin:jsdoc/recommended",
+    "plugin:import/recommended",
+    "plugin:promise/recommended",
+    "plugin:sonarjs/recommended",
+    "plugin:security/recommended"
+  ],
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "ignoreRestSiblings": true
+      }
+    ],
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        "checksVoidReturn": false
+      }
+    ],
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "jsdoc/require-jsdoc": ["warn", { "publicOnly": true }],
+    "jsdoc/require-description": "off",
+    "import/no-unresolved": "off",
+    "unicorn/no-empty-file": "off",
+    "unicorn/consistent-function-scoping": [
+      "error",
+      {
+        "checkArrowFunctions": false
+      }
+    ],
+    "unicorn/prefer-module": "off",
+    "unicorn/prevent-abbreviations": "off",
+    "unicorn/catch-error-name": "off",
+    "unicorn/prefer-ternary": "off",
+    "unicorn/prefer-event-target": "off",
+    "security/detect-object-injection": "off",
+    "security/detect-non-literal-fs-filename": "off"
+  }
+}

backend/app.js

@@ -36,6 +36,7 @@ if (
   process.env.NODE_ENV === "production" &&
   process.env.ZU_SECURE_HEADERS !== "false"
 ) {
+  // @ts-ignore
   app.use(helmet());
 }
 

backend/global.d.ts

@@ -0,0 +1 @@
+declare module "axios";

backend/jsconfig.json

@@ -1,6 +0,0 @@
-{
-  "exclude": ["node_modules", "**/node_modules/*"],
-  "typeAcquisition": {
-    "exclude": ["dotenv"]
-  }
-}

backend/package.json

@@ -2,20 +2,36 @@
   "name": "backend",
   "private": true,
   "scripts": {
-    "start": "node ./bin/www"
+    "start": "node ./bin/www",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "typecheck": "tsc --pretty --noEmit -p tsconfig.json"
   },
   "dependencies": {
     "axios": "^0.27.2",
     "compression": "^1.7.4",
-    "debug": "~4.3.4",
-    "dotenv": "^16.0.1",
-    "express": "~4.18.1",
+    "debug": "^4.3.4",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
     "express-bearer-token": "^2.4.0",
     "helmet": "^5.1.1",
     "lodash": "^4.17.21",
     "lowdb": "^1.0.0",
-    "morgan": "~1.10.0",
+    "morgan": "^1.10.0",
     "node-cron": "^3.0.2",
     "pbkdf2-wrapper": "^1.3.4"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.18",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "eslint": "^8.50.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsdoc": "^46.8.2",
+    "eslint-plugin-n": "^16.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-security": "^1.7.1",
+    "eslint-plugin-sonarjs": "^0.21.0",
+    "eslint-plugin-unicorn": "^48.0.1",
+    "typescript": "^5.2.2"
   }
 }

backend/routes/member.js

@@ -8,6 +8,7 @@ const api = require("../utils/controller-api");
 
 // get all members
 router.get("/", auth.isAuthorized, async function (req, res) {
+  // @ts-ignore
   const nwid = req.params.nwid;
   api
     .get("controller/network/" + nwid + "/member")
@@ -23,6 +24,7 @@ router.get("/", auth.isAuthorized, async function (req, res) {
 
 // get member
 router.get("/:mid", auth.isAuthorized, async function (req, res) {
+  // @ts-ignore
   const nwid = req.params.nwid;
   const mid = req.params.mid;
   const data = await member.getMembersData(nwid, [mid]);
@@ -35,6 +37,7 @@ router.get("/:mid", auth.isAuthorized, async function (req, res) {
 
 // update member
 router.post("/:mid", auth.isAuthorized, async function (req, res) {
+  // @ts-ignore
   const nwid = req.params.nwid;
   const mid = req.params.mid;
   member.updateMemberAdditionalData(nwid, mid, req.body);
@@ -56,6 +59,7 @@ router.post("/:mid", auth.isAuthorized, async function (req, res) {
 
 // delete member
 router.delete("/:mid", auth.isAuthorized, async function (req, res) {
+  // @ts-ignore
   const nwid = req.params.nwid;
   const mid = req.params.mid;
   member.deleteMemberAdditionalData(nwid, mid);

backend/services/member.js

@@ -71,6 +71,7 @@ async function getMemberAdditionalData(data) {
     networkId: data.nwid,
     nodeId: data.id,
     controllerId: ZT_ADDRESS,
+    // @ts-ignore
     lastOnline: lastOnline,
     ...additionalData,
     ...peerData,

backend/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "baseUrl": ".",
+    "module": "CommonJS",
+    "moduleResolution": "Node"
+  },
+  "include": ["."]
+}

backend/utils/zt-address.js

@@ -6,6 +6,7 @@ module.exports = async function () {
     return res.data.address;
   } catch (err) {
     console.error(
+      // @ts-ignore
       "Couldn't connect to the controller on " + err.config.baseURL
     );
   }

docker/zero-ui/Dockerfile

@@ -1,31 +1,30 @@
 FROM --platform=$BUILDPLATFORM node:lts-alpine as frontend-build
 
-ENV INLINE_RUNTIME_CHUNK=false
 ENV GENERATE_SOURCEMAP=false
-ENV NODE_OPTIONS=--openssl-legacy-provider
 
+WORKDIR /app/
+COPY --link tsconfig.json package.json yarn.lock* .yarnrc.yml ./
+COPY --link .yarn/ ./.yarn
 WORKDIR /app/frontend
-COPY yarn.lock .yarnrc.yml ./
-COPY .yarn/ ./.yarn/
-COPY ./frontend/package*.json /app/frontend
-RUN yarn install
-
-COPY ./frontend /app/frontend
+COPY --link ./frontend/package.json /app/frontend
+RUN yarn workspaces focus frontend
+COPY --link ./frontend /app/frontend
 RUN yarn build
 
 
 FROM node:lts-alpine
 
 WORKDIR /app/frontend/build
-COPY --from=frontend-build /app/frontend/build /app/frontend/build/
+COPY --link --from=frontend-build /app/frontend/build /app/frontend/build/
 
+WORKDIR /app/
+COPY --link package.json yarn.lock* .yarnrc.yml ./
+COPY --link .yarn/ ./.yarn
 WORKDIR /app/backend
-COPY yarn.lock .yarnrc.yml ./
-COPY .yarn/ ./.yarn/
-COPY ./backend/package*.json /app/backend
-RUN yarn install
+COPY --link ./backend/package.json /app/backend
+RUN yarn workspaces focus --production backend && yarn cache clean
 
-COPY ./backend /app/backend
+COPY --link ./backend /app/backend
 
 EXPOSE 4000
 ENV NODE_ENV=production

frontend/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "root": true,
+  "env": { "browser": true, "es2020": true },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended"
+  ],
+  "ignorePatterns": ["dist", ".eslintrc.cjs"],
+  "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
+  "settings": { "react": { "version": "17.0.2" } },
+  "plugins": ["react-refresh"],
+  "rules": {
+    "react-refresh/only-export-components": [
+      "warn",
+      { "allowConstantExport": true }
+    ],
+    "react/prop-types": ["off"],
+    "no-unused-vars": ["off"]
+  }
+}

frontend/index.html

@@ -2,18 +2,18 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <base href="%PUBLIC_URL%/" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <meta name="description" content="ZeroUI" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <title>ZeroUI</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>

frontend/jsconfig.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "src"
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "**/node_modules/*"],
-  "typeAcquisition": {
-    "exclude": ["dotenv", "harmony-reflect"]
-  }
-}

frontend/package.json

@@ -18,23 +18,32 @@
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
     "react-use": "^17.4.0",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
-    "source-map-explorer": "^2.5.2"
+    "@types/react": "^18.2.24",
+    "@types/react-dom": "^18.2.9",
+    "@vitejs/plugin-react": "^4.1.0",
+    "eslint": "^8.50.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "rimraf": "^5.0.5",
+    "source-map-explorer": "^2.5.3",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.10"
   },
   "scripts": {
-    "start": "BROWSER=none react-scripts start",
-    "build": "react-scripts build",
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "clean": "rimraf build",
+    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "typecheck": "tsc --pretty --noEmit -p tsconfig.json",
     "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "homepage": "/app",
-  "proxy": "http://127.0.0.1:4000",
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

frontend/src/components/Bar/Bar.jsx

@@ -90,7 +90,7 @@ function Bar() {
             >
               {menuItems.map((menuItem, index) => {
                 if (
-                  menuItem.hasOwnProperty("condition") &&
+                  Object.prototype.hasOwnProperty.call(menuItem, "condition") &&
                   !menuItem.condition
                 ) {
                   return null;

frontend/src/components/LogIn/LogIn.jsx

@@ -6,7 +6,7 @@ import LogInToken from "./components/LogInToken";
 function LogIn() {
   return (
     <>
-      {process.env.NODE_ENV === "development" && (
+      {import.meta.env.DEV && (
         <>
           <LogInToken />
           <Divider orientation="vertical" />

frontend/src/components/NetworkRules/NetworkRules.jsx

@@ -124,7 +124,7 @@ function NetworkRules({ network, callback }) {
             width: "250px",
           }}
         >
-          {!!errors.length ? (
+          {errors.length ? (
             <Typography color="error">
               {"[" + errors[0] + ":" + errors[1] + "] " + errors[2]}
             </Typography>

frontend/src/external/RuleCompiler.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 /* eslint-disable */
 // rule-compiler.js from ZeroTierOne before its relicensing
 // source:

frontend/src/types.d.ts

@@ -0,0 +1 @@
+declare module "*.png";

frontend/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "baseUrl": "src",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "jsx": "preserve"
+  },
+  "include": ["src"]
+}

frontend/vite.config.js

@@ -0,0 +1,27 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  base: "/app",
+  server: {
+    port: 3000,
+    strictPort: true,
+    proxy: {
+      "/auth": "http://127.0.0.1:4000",
+      "/api": "http://127.0.0.1:4000",
+      "/controller": "http://127.0.0.1:4000",
+    },
+  },
+  resolve: {
+    alias: {
+      components: "/src/components",
+      utils: "/src/utils",
+      external: "/src/external",
+    },
+  },
+  build: {
+    outDir: "build",
+    chunkSizeWarningLimit: 1000,
+  },
+  plugins: [react()],
+});

package.json

@@ -7,28 +7,30 @@
   ],
   "scripts": {
     "postinstall": "husky install",
-    "upgradeDeps": "yarn upgrade-interactive",
-    "upgradeYarn": "yarn set version latest",
-    "cleanDeps": "cd frontend && rimraf node_modules && cd ../backend && rimraf node_modules && cd .. && rimraf node_modules",
-    "lint": "yarn prettier --write .",
+    "upgrade:deps": "yarn upgrade-interactive",
+    "upgrade:yarn": "yarn set version latest",
+    "clean:deps": "cd frontend && rimraf node_modules && cd ../backend && rimraf node_modules && cd .. && rimraf node_modules",
+    "format": "yarn prettier",
+    "format:fix": "yarn prettier --write .",
+    "lint": "yarn workspaces foreach --all --parallel run lint",
     "dev": "concurrently \"cd frontend && cross-env FAST_REFRESH=true yarn start\" \"cd backend && cross-env NODE_ENV=development ZU_DEFAULT_USERNAME=admin ZU_DEFAULT_PASSWORD=zero-ui nodemon ./bin/www --ignore data/db.json\"",
-    "build": "cd frontend && cross-env INLINE_RUNTIME_CHUNK=false GENERATE_SOURCEMAP=false yarn build",
+    "build": "cd frontend && cross-env GENERATE_SOURCEMAP=false yarn build",
     "prod": "cd backend && cross-env NODE_ENV=production ZU_SECURE_HEADERS=false yarn start",
     "release": "standard-version && git push --follow-tags origin main && git add CHANGELOG.md",
     "commit": "yarn git-cz"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.0.3",
-    "@commitlint/config-conventional": "^17.0.3",
-    "commitizen": "^4.2.5",
-    "concurrently": "^7.3.0",
+    "@commitlint/cli": "^17.7.2",
+    "@commitlint/config-conventional": "^17.7.0",
+    "commitizen": "^4.3.0",
+    "concurrently": "^8.2.1",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "nodemon": "^2.0.19",
-    "prettier": "^2.7.1",
-    "rimraf": "^3.0.2",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
+    "nodemon": "^3.0.1",
+    "prettier": "^3.0.3",
+    "rimraf": "^5.0.5",
     "standard-version": "^9.5.0"
   },
   "prettier": {
@@ -52,5 +54,5 @@
       "yarn prettier --write"
     ]
   },
-  "packageManager": "yarn@3.3.1"
+  "packageManager": "yarn@4.0.0-rc.53"
 }

tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "target": "ESNext",
+    "lib": ["ESNext", "dom"],
+    "strict": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true
+  }
+}