renaming + dockerfile fix + vue from node-red-vue template + fix flask

Dockerfile

@@ -1,30 +1,44 @@
-FROM node:14-alpine AS frontend
+FROM node:23-alpine AS vue-build
 
 WORKDIR /app
 
-COPY vue/package*.json ./vue/
-RUN cd vue && npm install
+## Build and copy the vue app
+COPY vue .
+RUN npm install && npm run build
 
-COPY vue/ ./vue/
-RUN cd vue && npm run build
+FROM python:3.12-alpine
 
-RUN cp -r vue/dist dist
+# Set dir and user
+ENV GROUP_NAME=app
+ENV HOME=/app
+ENV GROUP_ID=11000
+ENV USER_ID=11001
+ENV PORT=8080
 
-RUN rm -rf vue
-
-FROM python:3.10-alpine AS backend
-
-WORKDIR /app
+# Add user
+RUN addgroup --gid $GROUP_ID $GROUP_NAME && \
+    adduser $USER_ID -u $USER_ID -D -G $GROUP_NAME -h $HOME
 
+# Install packages
 RUN apk update
 RUN apk add musl-dev gcc libpq-dev mariadb-connector-c-dev postgresql-dev python3-dev
 
-COPY python/src/requirements.txt ./python/src/
-RUN pip install -r python/src/requirements.txt
+# Set working dir
+WORKDIR $HOME
+
+# Copy files and 
+COPY --from=vue-build /app/dist ./dist
+COPY flask/src .
+
+# Install python packages
+RUN pip install --upgrade pip
+RUN pip install -r requirements.txt
 
-COPY python/ ./python/
+# Open port
+EXPOSE $PORT
 
-COPY --from=frontend /app/dist /app/frontend
+# Set user
+USER $USER_ID
 
-EXPOSE 8000
-CMD ["python", "python/src/main.py"]
+ENTRYPOINT ["python"]
+CMD ["main.py"]

docker-compose.yaml

@@ -0,0 +1,7 @@
+version: "3.9"
+services:
+  app:
+    build: .
+    read_only: true
+    ports:
+      - "8080:8080"

flask/src/api_endpoints.py

@@ -0,0 +1,13 @@
+import logging
+import time
+
+from datetime import timedelta
+from flask import Blueprint, Response, jsonify
+
+logger = logging.getLogger(__name__)
+api_endpoints = Blueprint('api', __name__, url_prefix='/api')
+
+
+@api_endpoints.route('/status', methods=['GET'])
+def status():
+    return jsonify({"success": True, "message": "API is up and running"})

python/src/main.py → flask/src/main.py

@@ -1,20 +1,21 @@
-from flask import Flask
+import os
+from flask import Flask, send_from_directory
 from healthcheck import HealthCheck
 from prometheus_client import generate_latest
 from utils.logging import set_logging_configuration, is_ready_gauge, last_updated_gauge
 from utils.config import DEBUG, PORT, POD_NAME
-from api_endpoints import api_endpoints  # Uncomment to import enpoints
+from api_endpoints import api_endpoints
 
 set_logging_configuration()
 
 
 def create_app():
-    app = Flask(__name__)
+    app = Flask(__name__, static_folder='dist', static_url_path='/')
     health = HealthCheck()
     app.add_url_rule('/healthz', 'healthcheck', view_func=lambda: health.run())
     app.add_url_rule('/metrics', 'metrics', view_func=generate_latest)
 
-    app.register_blueprint(api_endpoints)  # Uncomment to add enpoints from api_endpoints.py
+    app.register_blueprint(api_endpoints)
 
     @app.before_request
     def set_ready():
@@ -27,5 +28,14 @@ def set_ready():
 app = create_app()
 
 
+@app.route('/', defaults={'path': ''})
+@app.route('/<path:path>')
+def serve(path):
+    if path != "" and os.path.exists(app.static_folder + '/' + path):
+        return send_from_directory(app.static_folder, path)
+    else:
+        return send_from_directory(app.static_folder, 'index.html')
+
+
 if __name__ == '__main__':  # pragma: no cover
     app.run(debug=DEBUG, host='0.0.0.0', port=PORT)

vue/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

vue/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

vue/Dockerfile

@@ -0,0 +1,21 @@
+FROM node:lts-alpine
+
+# make the 'app' folder the current working directory
+WORKDIR /app
+
+# copy project files and folders to the current working directory
+COPY . .
+
+# install project dependencies
+RUN npm install
+
+# build app for production with minification
+RUN npm run build
+
+# install project dependencies
+RUN cd express && npm install
+
+# Build express server
+RUN cd express && npm ci --only=production
+
+CMD [ "node", "express/server.js" ]

vue/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 KvalitetsIT
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

vue/README.md

@@ -0,0 +1,29 @@
+# vue
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](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).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```

vue/docker-compose.yml

@@ -0,0 +1,13 @@
+version: "3.9"
+services:
+  node-js:
+    build: .
+    networks:
+      - express_vue
+    ports:
+      - "80:80"
+    volumes:
+      - ./vue:/app/vue
+networks: 
+  express_vue:
+    name: express_vue

vue/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flask + Vue Template</title>
+  </head>
+  <body id="body">
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>