Feature: Vite Build (#3569)

* Feature: Vite Build MVP

* Chore: Readme, default ports, remove lock

* Fix: Return yarn lock

* Fix: Use different plugin that works in dev too

.eslintrc.js

@@ -38,4 +38,6 @@ module.exports = {
         appAvailability: true,
         // end cordova bindings
     },
+    // ignore src/dist folders
+    ignorePatterns: ["src/dist/*"],
 };

README.md

@@ -75,6 +75,25 @@ Betaflight Configurator has been translated into several languages. The applicat
 
 If you prefer to have the application in English or any other language, you can select your desired language in the first screen of the application.
 
+## App build via Vite (web)
+
+### Development
+
+1. Install node.js (refer to [.nvmrc](./.nvmrc) for required version)
+2. Install yarn: `npm install yarn -g`
+3. Change to project folder and run `yarn install`.
+4. Run `yarn dev`.
+
+The web app will be available at http://localhost:8000 with full HMR.
+
+### Build Preview
+
+1. Run `yarn build`.
+2. Run `yarn preview` after build has finished.
+3. Alternatively run `yarn review` to build and preview in one step.
+
+The web app should behave directly as in production, available at http://localhost:8080.
+
 ## App build via NW.js (windows/linux/macos) or Cordova (android)
 
 ### Development
@@ -106,7 +125,7 @@ List of possible values of `<task-name>`:
 * **dist** copies all the JS and CSS files in the `./dist` folder [2].
 * **apps** builds the apps in the `./apps` folder [1].
 * **debug** builds debug version of the apps in the `./debug` folder [1][3].
-* **release** zips up the apps into individual archives in the `./release` folder [1]. 
+* **release** zips up the apps into individual archives in the `./release` folder [1].
 
 [1] Running this task on macOS or Linux requires Wine, since it's needed to set the icon for the Windows app (build for specific platform to avoid errors).
 [2] For Android platform, **dist** task will generate folders and files in the `./dist_cordova` folder.
@@ -117,7 +136,7 @@ To build or release only for one specific platform you can append the plaform af
 If no platform is provided, the build for the host platform is run.
 
 * **MacOS X** use `yarn gulp <task-name> --osx64`
-* **Linux** use `yarn gulp <task-name> --linux64` 
+* **Linux** use `yarn gulp <task-name> --linux64`
 * **Windows** use `yarn gulp <task-name> --win64`
 * **Android** use `yarn gulp <task-name> --android`
 

package.json

@@ -7,6 +7,9 @@
   "chromium-args": "--disable-features=nw2",
   "scripts": {
     "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "review": "vite build && vite preview",
     "start": "run-script-os",
     "start:default": "NODE_ENV=development NW_PRE_ARGS=--load-extension='./node_modules/nw-vue-devtools-prebuilt/extension' gulp debug",
     "start:windows": "set NODE_ENV=development && set NW_PRE_ARGS=--load-extension='./node_modules/nw-vue-devtools-prebuilt/extension' && gulp debug",
@@ -120,6 +123,7 @@
     "os": "^0.1.2",
     "postcss": "^8.4.17",
     "rollup": "^3.9.0",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-vue": "^5.*.*",
     "rpm-builder": "^1.2.1",
     "run-script-os": "^1.1.6",

src/index.html

@@ -4,8 +4,8 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta name="author" content="cTn"/>
 
-    <script type="module" src="./src/js/utils/common.js"></script>
-    <script type="module" src="./src/js/browserMain.js"></script>
+    <script type="module" src="/src/js/utils/common.js"></script>
+    <script type="module" src="/src/js/browserMain.js"></script>
 
     <title></title>
 </head>
@@ -81,7 +81,7 @@
                     :batteryState="FC.BATTERY_STATE?.batteryState"
                 >
                 </battery-icon>
-                <battery-legend 
+                <battery-legend
                     :voltage="FC.ANALOG.voltage"
                     :vbatmaxcellvoltage="FC.BATTERY_CONFIG.vbatmaxcellvoltage"
                 ></battery-legend>

vite.config.js

@@ -3,6 +3,7 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue2";
 import path from "node:path";
 import { readFileSync } from "node:fs";
+import copy from "rollup-plugin-copy";
 
 function serveFileFromDirectory(directory) {
     return (req, res, next) => {
@@ -23,7 +24,7 @@ function serveFileFromDirectory(directory) {
  * This is plugin to work around the file structure required nwjs.
  * In future this can be dropped if we restructure folder structure
  * to be more web friendly.
- * @returns {import('vite').Plugin}
+ * @returns {import("vite").Plugin}
  */
 function serveLocalesPlugin() {
     return {
@@ -32,9 +33,9 @@ function serveLocalesPlugin() {
             return () => {
                 server.middlewares.use((req, res, next) => {
                     if (req.url.startsWith("/locales/")) {
-                        serveFileFromDirectory('locales')(req, res, next);
+                        serveFileFromDirectory("locales")(req, res, next);
                     } else if (req.url.startsWith("/resources/")) {
-                        serveFileFromDirectory('resources')(req, res, next);
+                        serveFileFromDirectory("resources")(req, res, next);
                     } else {
                         next();
                     }
@@ -52,14 +53,29 @@ export default defineConfig({
         include: ["test/**/*.test.{js,mjs,cjs}"],
         environment: "jsdom",
         setupFiles: ["test/setup.js"],
-        root: '.',
+        root: ".",
     },
-    plugins: [vue(), serveLocalesPlugin()],
+    plugins: [
+        vue(),
+        serveLocalesPlugin(),
+        copy({
+            targets: [
+                { src: ["locales", "resources", "src/tabs", "src/images"], dest: "src/dist" },
+            ],
+            hook: "writeBundle",
+        }),
+    ],
     root: "./src",
     resolve: {
         alias: {
             "/src": path.resolve(process.cwd(), "src"),
-            'vue': path.resolve(__dirname, 'node_modules/vue/dist/vue.esm.js'),
+            "vue": path.resolve(__dirname, "node_modules/vue/dist/vue.esm.js"),
         },
     },
+    server: {
+        port: 8000,
+    },
+    preview: {
+        port: 8080,
+    },
 });