🚀 v0.0.1-alpha.3 (#17)

* 🎨 Nuxt >> Refactoring Nuxt App to "scr/client" folder.

* 👷 Building >> Changing directories for generating nuxt app.

* 🔨 App >> Changing generate script, for future express build script.

* 🏗️ Server >> Changing express folder structure.

* 🐛 App >> Bugfix in version comparinson.

* 👷 Nuxt >> Changing client dist dir.

* 👷 App >> Adding/using webpack for express app.

* 👷 App >> Changing PM2 script.

* 🚀 v0.0.1-alpha.3

ecosystem.config.js

@@ -5,7 +5,7 @@ module.exports = {
             name: pkg.name,
             exec_mode: 'cluster',
             instances: 1, // 'max' Or a number of instances
-            script: './api/app.js', // './node_modules/nuxt/bin/nuxt.js',
+            script: './src/api/app.cjs', // './node_modules/nuxt/bin/nuxt.js',
             args: 'start'
         }
     ]

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pi-control",
   "productName": "Pi-Control 🐱‍👤",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.3",
   "description": "Pi-Control helps with gathering information, as well as to simplify controlling your raspberry pi.",
   "author": "borsTiHD",
   "license": "MIT",
@@ -11,11 +11,13 @@
   },
   "type": "module",
   "scripts": {
-    "dev:nuxt": "nuxt",
-    "dev:api": "node -r dotenv/config ./api/app.js",
+    "dev:nuxt": "nuxt src/client",
+    "dev:api": "node -r dotenv/config ./src/api/app.js",
     "dev": "cross-env NODE_ENV=development concurrently \"yarn dev:api\" \"yarn dev:nuxt\"",
-    "generate": "nuxt generate",
-    "start": "node -r dotenv/config ./api/app.js",
+    "generate:nuxt": "nuxt generate src/client",
+    "build:server": "webpack",
+    "build": "yarn generate:nuxt && yarn build:server",
+    "start": "node -r dotenv/config ./dist/server/app.cjs",
     "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
     "lint": "yarn lint:js"
   },
@@ -49,6 +51,9 @@
     "passport": "^0.4.1",
     "passport-jwt": "^4.0.0",
     "passport-local": "^1.0.0",
-    "vue-toastification": "^1.7.11"
+    "vue-toastification": "^1.7.11",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.0",
+    "webpack-node-externals": "^3.0.0"
   }
 }

api/app.js → src/api/app.js

@@ -1,4 +1,5 @@
 // Imports
+import path from 'path'
 import createError from 'http-errors'
 import express from 'express'
 import cors from 'cors'
@@ -12,15 +13,16 @@ import baseRoutes from './router.js'
 
 // Development
 const isDev = process.env.NODE_ENV === 'development'
-console.log('[App] -> Development:', isDev)
+console.log('[Server] -> Development:', isDev)
 
 // Config
 const PORT = process.env.PORT || 8800 // Default Port: 8800
+const DIST_DIR = path.join('dist', 'client')
 
 // Express Init
 const app = express()
 if (isDev) app.use(cors()) // CORS policy only in dev
-app.use(express.static('dist'))
+app.use(express.static(DIST_DIR))
 app.use(express.json())
 app.use(express.urlencoded({ extended: true })) // for form data
 app.use(cookieParser()) // Cookies
@@ -53,5 +55,5 @@ app.use((err, req, res, next) => {
 
 // Listening on port
 app.listen(PORT, () => {
-    console.log(`[App] -> App is running on ${PORT}`)
+    console.log(`[Server] -> App is running on ${PORT}`)
 })

api/controllers/scripts.controller.js → src/api/controllers/scripts.controller.js

@@ -8,7 +8,7 @@ import isCustomScript from '../middleware/isCustomScript.js' // Testing if given
 import zipDirectory from '../middleware/zipDirectory.js' // Zipping file/folder middleware
 
 // ChildProcess Spawn Import
-import ChildProcessClass from '../../classes/ChildProcessClass.js'
+import ChildProcessClass from '../classes/ChildProcessClass.js'
 const childProcessSpawn = new ChildProcessClass()
 
 // Script Directory

components/display/AppVersion.vue → src/client/components/display/AppVersion.vue

@@ -35,7 +35,7 @@
 import axios from 'axios'
 import { mapGetters, mapActions } from 'vuex'
 
-import pkg from '~~/package.json'
+import pkg from 'projRoot/package.json'
 
 export default {
     name: 'AppVersion',
@@ -49,7 +49,7 @@ export default {
             getReleaseData: 'getReleaseData'
         }),
         currentVersion() {
-            return `v.${pkg.version}`
+            return `v${pkg.version}`
         },
         latestVersion() {
             if (this.getReleaseData) {

components/layout/Footer.vue → src/client/components/layout/Footer.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import pkg from '~~/package.json'
+import pkg from 'projRoot/package.json'
 
 export default {
     data() {

components/layout/Header.vue → src/client/components/layout/Header.vue

@@ -15,9 +15,9 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
+import pkg from 'projRoot/package.json'
 import AppUpdateChip from '~/components/display/AppUpdateChip.vue'
 
-import pkg from '~~/package.json'
 export default {
     name: 'Header',
     components: {

nuxt.config.js → src/client/nuxt.config.js

@@ -1,9 +1,21 @@
 // import colors from 'vuetify/es5/util/colors'
-import pkg from './package.json'
+import path from 'path'
+import pkg from '../../package.json'
 
 // Development
 const isDev = process.env.NODE_ENV !== 'production'
 
+// Alias
+const PROJECT_ROOT = path.join(__dirname, '..', '..')
+const SRC_DIR = path.join(PROJECT_ROOT, 'src')
+const DIST_DIR = path.join(PROJECT_ROOT, 'dist')
+const alias = {
+    alias: {
+        projRoot: PROJECT_ROOT,
+        srcDir: SRC_DIR
+    }
+}
+
 // Server Settings
 const server = {
     server: {
@@ -27,10 +39,16 @@ export default {
     // Adding env variables
     ...env,
 
+    // Adding path alias
+    ...alias,
+
     // Nuxt target -> Client Side Rendering (SPA)
     target: 'static',
     ssr: false,
 
+    // Root folder
+    srcDir: '',
+
     // Global page headers: https://go.nuxtjs.dev/config-head
     head: {
         titleTemplate: '%s',
@@ -150,6 +168,11 @@ export default {
         }
     },
 
+    // Generate Configuration: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate
+    generate: {
+        dir: path.join(DIST_DIR, 'client')
+    },
+
     // Build Configuration: https://go.nuxtjs.dev/config-build
     build: {}
 }

pages/about.vue → src/client/pages/about.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import pkg from '~~/package.json'
+import pkg from 'projRoot/package.json'
 
 export default {
     name: 'About',

webpack.config.js

@@ -0,0 +1,28 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
+import nodeExternals from 'webpack-node-externals'
+
+// we need to change up how __dirname is used for ES6 purposes
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const { NODE_ENV = 'production' } = process.env
+
+export default {
+    entry: './src/api/app.js',
+    mode: NODE_ENV,
+    // target: 'node',
+    node: {
+        global: false,
+        __filename: false,
+        __dirname: false
+    },
+    output: {
+        path: path.resolve(__dirname, 'dist', 'server'),
+        filename: 'app.cjs'
+    },
+    resolve: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx']
+    },
+    externalsPresets: { node: true }, // in order to ignore built-in modules like path, fs, etc.
+    externals: [nodeExternals({ allowlist: ['lowdb'] })] // in order to ignore all modules in node_modules folder, except 'lowdb' (lowdb can only be used as esm)
+}