update Vite (front) folder structure

* move src/client to src/ui/client
* merge src/client and src/setup inside src/ui/client and updated package.json
* now we have two config files (for setup and dashboard pages) with new paths + update scripts in package.json in order to work with changes
* add README
* update build.js from commonjs to es6

src/client/dashboard/README.md

@@ -1,7 +0,0 @@
-# Vue 3 + Vite
-
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

src/client/dashboard/vite.config.js

@@ -1,43 +0,0 @@
-import { resolve } from "path";
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-    VueI18nPlugin({
-      include: resolve(__dirname, "./src/lang/**"),
-      jitCompilation: true,
-    }),
-  ],
-  server: {
-    host: true,
-    port: 3000,
-  },
-  resolve: {
-    alias: {
-      "@": resolve(__dirname, "./src"),
-      "@store": resolve(__dirname, "./src/store"),
-      "@utils": resolve(__dirname, "./src/utils"),
-      "@layouts": resolve(__dirname, "./src/layouts"),
-      "@pages": resolve(__dirname, "./src/pages"),
-      "@components": resolve(__dirname, "./src/components"),
-      "@assets": resolve(__dirname, "./src/assets"),
-      "@lang": resolve(__dirname, "./src/lang"),
-      "@public": resolve(__dirname, "./public"),
-    },
-  },
-  build: {
-    chunkSizeWarningLimit: 1024,
-    outDir: "../static",
-    emptyOutDir: "../static",
-    rollupOptions: {
-      input: {
-        home: resolve(__dirname, "./src/pages/home/index.html"),
-        instances: resolve(__dirname, "./src/pages/instances/index.html"),
-      },
-    },
-  },
-});

src/client/setup/README.md

@@ -1,7 +0,0 @@
-# Vue 3 + Vite
-
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

src/client/setup/package.json

@@ -1,19 +0,0 @@
-{
-  "name": "dashboard-setup",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "vite-plugin-singlefile": "^2.0.2",
-    "vue": "^3.3.8"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^4.5.0",
-    "vite": "^5.0.0"
-  }
-}

src/client/setup/vite.config.js

@@ -1,23 +0,0 @@
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import { viteSingleFile } from "vite-plugin-singlefile";
-import { resolve } from "path";
-
-export default defineConfig({
-  plugins: [vue(), viteSingleFile()],
-  resolve: {
-    alias: {
-      "@store": resolve(__dirname, "../dashboard/src/store"),
-      "@utils": resolve(__dirname, "../dashboard/src/utils"),
-      "@layouts": resolve(__dirname, "../dashboard/src/layouts"),
-      "@components": resolve(__dirname, "../dashboard/src/components"),
-      "@assets": resolve(__dirname, "../dashboard/src/assets"),
-      "@lang": resolve(__dirname, "../dashboard/src/lang"),
-      "@public": resolve(__dirname, "../dashboard/public"),
-    },
-  },
-  build: {
-    outDir: "./output",
-    emptyOutDir: "./output",
-  },
-});

src/ui/client/README.md

@@ -0,0 +1,24 @@
+# General
+
+Vite.js will be use to build needed pages and resources (CSS, JS...) for the BunkerWeb UI.
+
+# Structure
+
+We have two main folders : 
+- `dashboard` with a multi page approach, this part is used to dev main pages on the dashboard. Use `vite.config.dashboard.js`.
+- `setup` that is special because we need a all-in-one HTML file for the setup page. Use `vite.config.setup.js`.
+
+# Dev mode client only
+
+In case you want to check pages without build, you can run available scripts in `package.json`.
+For example, you need to execute `npm run dev-dashboard` to run a vite dev server.
+
+# Dev mode BunkerWeb UI
+
+In case you want to run the BunkerWeb UI, try to update front-end and get the modifications on your app, you need to do the following :
+- go to `misc/dev` path and run `docker compose -f docker-compose.ui.yml up --build` in order to create BunkerWeb with UI looking for local static and templates folder
+- update front-end in dev mode and run inside `cd/src/ui/client` : `node ./build.js` to rebuild setup and dashboard pages.
+
+# Prod mode
+
+You only have to run a basic `docker-compose` and `src/ui/Dockerfile` will build the front automatically. 

src/ui/client/build.js

@@ -1,9 +1,10 @@
-const { execSync } = require("child_process");
-const { resolve } = require("path");
-const fs = require("fs");
+import { execSync } from "child_process";
+import { resolve } from "path";
+import fs from "fs";
 
-const frontDir = "/dashboard";
-const clientBuildDir = "static";
+const __dirname = import.meta.dirname;
+
+const clientBuildDir = "dashboard";
 const appStaticDir = "../ui/static";
 const appTempDir = "../ui/templates";
 
@@ -60,8 +61,8 @@ async function runCommand(dir, command) {
 // Install deps and build vite (work for client and setup)
 async function buildVite() {
   // Install packages
-  await runCommand(frontDir, "npm install");
-  await runCommand(frontDir, "npm run build");
+  await runCommand("", "npm run build-setup");
+  await runCommand("", "npm run build-dashboard");
 }
 
 // Change dir structure for flask app
@@ -155,13 +156,13 @@ async function setBuildTempToUI() {
       );
     });
     // Delete templates to avoid to add it to static
-    delElRecursive("./static/templates");
+    delElRecursive("./dashbord/templates");
   });
 }
 
 async function moveBuildStaticToUI() {
   // move build static subdir to app ui static dir
-  const srcDir = resolve(`./static`);
+  const srcDir = resolve(`./dashboard`);
   const destDir = resolve(appStaticDir);
   fs.readdir(srcDir, (err, dirs) => {
     dirs.forEach((dir) => {
@@ -183,10 +184,9 @@ async function delPrevDirs() {
 
 async function buildSetup() {
   // Build setup
-  await runCommand("/setup", "npm install");
-  await runCommand("/setup", "npm run build");
+  await runCommand("/", "npm run build-setup");
   // Move /setup/output/index.html to ui/templates/setup.html
-  await moveFile("./setup/output/index.html", "../ui/templates/setup.html");
+  await moveFile("./setup/index.html", "../ui/templates/setup.html");
 }
 
 async function build() {

src/ui/client/dashboard/components/Dashboard/Layout.vue

@@ -1,14 +1,13 @@
 <script setup>
 // Components
-import Footer from "@components/dashboard/Footer.vue";
-import Loader from "@components/dashboard/Loader.vue";
-import LangSwitch from "@components/dashboard/LangSwitch.vue";
-import Menu from "@components/dashboard/Menu.vue";
-import News from "@components/dashboard/News.vue";
-import Header from "@components/dashboard/Header.vue";
-import Banner from "@components/dashboard/Banner.vue";
-import Feedback from "@components/dashboard/Feedback.vue";
-import { onMounted } from "vue";
+import Footer from "@components/Dashboard/Footer.vue";
+import Loader from "@components/Dashboard/Loader.vue";
+import LangSwitch from "@components/Dashboard/LangSwitch.vue";
+import Menu from "@components/Dashboard/Menu.vue";
+import News from "@components/Dashboard/News.vue";
+import Header from "@components/Dashboard/Header.vue";
+import Banner from "@components/Dashboard/Banner.vue";
+import Feedback from "@components/Dashboard/Feedback.vue";
 
 /** 
   @name Dashboard/Layout.vue