Add express prod server

Add vite dev server

Dockerfile

@@ -1,30 +1,41 @@
-FROM node:14-alpine AS frontend
-
+# Stage 1: Build Vue app and install Express dependencies
+FROM node:lts-alpine AS node-build
 WORKDIR /app
 
-COPY vue/package*.json ./vue/
-RUN cd vue && npm install
+# Copy project files and folders to the current working directory
+COPY . .
 
-COPY vue/ ./vue/
-RUN cd vue && npm run build
+# Install and build Vue app
+RUN cd vue && npm install && npm run build
 
+# Copy built Vue app to a separate directory
 RUN cp -r vue/dist dist
 
-RUN rm -rf vue
-
-FROM python:3.10-alpine AS backend
+# Install Express dependencies
+RUN cd express && npm install && npm ci --only=production
 
+# Stage 2: Build the final image with Python and Node.js
+FROM python:3.10-alpine
 WORKDIR /app
 
-RUN apk update
-RUN apk add musl-dev gcc libpq-dev mariadb-connector-c-dev postgresql-dev python3-dev
+# Install necessary packages
+RUN apk update && \
+    apk add --no-cache musl-dev gcc libpq-dev mariadb-connector-c-dev postgresql-dev python3-dev nodejs npm
 
+# Install backend dependencies
 COPY python/src/requirements.txt ./python/src/
 RUN pip install -r python/src/requirements.txt
 
+# Copy backend source files
 COPY python/ ./python/
 
-COPY --from=frontend /app/dist /app/frontend
+# Copy built Vue app and Express server files from the node-build stage
+COPY --from=node-build /app/dist ./dist
+COPY --from=node-build /app/express ./express
+
+# Expose ports
+EXPOSE 3000
+EXPOSE 8765
 
-EXPOSE 8000
-CMD ["python", "python/src/main.py"]
+# Start both the Python backend and the Express server
+CMD ["sh", "-c", "python python/src/main.py & node express/server.js"]

README.md

@@ -1,20 +1,17 @@
 # Vue-Python-Tempplate
 Template for vue and python projects
 
-## Kørsel af Frontenden(Vue)
+## Kørsel af Frontenden (Vue)
 * CD hen til vue folder: ``` cd vue ```
 * Installerer afhængigheder: ``` npm install ```
-* Compile, hot reload og start frontenden: ``` npm run serve ```
+* Compile, hot reload og start frontenden: ``` npm run dev ```
 
 ## Kørsel af Bakcenden(Python)
-* CD hen til python folder: ``` cd python\src ```
-* Start applikationen: ``` python main.py ```
-
+* Start applikationen: ``` python python/src/main.py ```
 
 ## Udviklings commands:
+* Byg og start docker container: ````docker compose up --build```
 * Bygge docker image: ```docker build -t vue-python-template .```
-* Kør container ud fra det image man byggede: ```docker run -p 8080:8080 vue-python-template```
+* Start container ud fra image: ```docker run -p 8080:8080 vue-python-template```
 * Lint: ```flake8 python/src tests --count --select=E9,F63,F7,F82 --show-source --statistics```
-* Unit tests: ``` pytest ```
-
-
+* Unit tests: ``` pytest ```

docker-compose.yaml

@@ -0,0 +1,21 @@
+services:
+  python_vue:
+    build: .
+
+    networks:
+    - python_vue
+
+    # volumes:
+    # - ./vue:/app/vue
+    # - ./python:/app/python
+
+    # command: sh -c "cd vue && npm run serve && python python/src/main.py"
+
+    ports:
+    - "8080:8080"
+    - "8765:8765"
+    - "3000:3000"
+
+networks: 
+  python_vue:
+    name: python_vue

express/.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?

express/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "server",
+    "version": "0.1.0",
+    "description": "server",
+    "main": "server.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "start": "node server.js"
+    },
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "cors": "^2.8.5",
+        "express": "^4.18.2",
+        "http-proxy-middleware": "^2.0.6"
+    }
+}

express/server.js

@@ -0,0 +1,42 @@
+const express = require('express'); 
+const cors = require('cors');
+const path = require('path');
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+const app = express(); 
+const PORT =  process.env.VUE_PORT || 3000;
+const BACKEND_URL = process.env.BACKEND_URL || 'http://localhost:8080';
+const WS_URL = process.env.WS_URL || 'ws://localhost:8765';
+
+function proxyRouter (req) {
+    // Does not proxy calls to api without a path e.g. /api or /api/
+    if (req.path === '/api' || req.path === '/api/') {
+        return 'http://localhost:' + PORT;
+    } else if (req.path === '/api/*') {
+        return BACKEND_URL;
+    }
+}
+
+// Proxy calls to api to backend url, rewrites the path to remove /api e.g. /api/test -> /test
+app.use('/api', createProxyMiddleware({target: BACKEND_URL, router: proxyRouter, pathRewrite: {'^/api' : ''} }));
+
+app.use(cors())
+
+// Serving dist directory from this script's parent directory
+app.use(express.static(path.join(__dirname, '..', 'dist')));
+app.use('*', express.static(path.join(__dirname, '..', 'dist')));
+
+app.get("/status", (request, response) => {
+    const status = {
+       "status": "running"
+    };
+    response.send(status);
+ });
+
+app.listen(PORT, (error) =>{ 
+    if(!error) 
+        console.log("Server is Successfully Running, and App is listening on port " + PORT) 
+    else 
+        console.log("Error occurred, server can't start", error); 
+    } 
+);

python/src/api_endpoints.py

@@ -8,10 +8,10 @@
 from utils.logging import is_ready_gauge, last_updated_gauge, job_start_counter, job_complete_counter, job_duration_summary
 
 logger = logging.getLogger(__name__)
-api_endpoints = Blueprint('api', __name__, url_prefix='/api')
+api_endpoints = Blueprint('api', __name__)
 
 # NB: uncomment code in main.py to enable these endpoints
-# Any endpoints added here will be available at /api/<endpoint> - e.g. http://127.0.0.1:8080/api/example
+# Any endpoints added here will be available at frontend /api/<endpoint> - e.g. http://127.0.0.1:3000/api/example
 # Change the the example below to suit your needs + add more as needed
 
 

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>Vue Python Template</title>
+  </head>
+  <body id="body">
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>