set up basic frontend and separate frontend and backend (#9)

* set up redirect

* separate backend and frontend part 1

* separate backend and frontend part 2

* separate backend

* remove obsolete route

* first svelte setup

* crawling forward

* intermittent commit

* remove initial ansatz

* redo with svelte-kit and vite

* update packages

* remove packages

* update pages

* update dependencies and css conflicts

* update gitignore

* with server-side actions

* include test changes

* add frontend data

* set up map

* update dockerfile and build env

* set up docker compose nhinx reverse proxy

* add package manager info

* add dev coverage

.gitignore

@@ -25,6 +25,8 @@ share/python-wheels/
 .installed.cfg
 *.egg
 MANIFEST
+src/app/frontend/node_modules/
+src/app/frontend/.svelte-kit/
 
 # PyInstaller
 #  Usually these files are written by a python script from a template
@@ -160,3 +162,5 @@ cython_debug/
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 #.idea/
+
+!/src/app/frontend/src/lib/

Dockerfile

@@ -1,8 +1,20 @@
-FROM python
+FROM node:20-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
 WORKDIR /app
+COPY src/app/frontend /app
+
+FROM base AS prod-deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
 
-COPY ./src/app /app
-COPY ./requirements.txt /app
+FROM base AS build
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+RUN pnpm run build
 
-RUN pip install --upgrade pip
-RUN pip install -r requirements.txt
+FROM base
+COPY --from=prod-deps /app/node_modules /app/node_modules
+COPY --from=build /app/dist /app/dist
+EXPOSE 8000
+CMD [ "pnpm", "start" ]

codecov.yml

@@ -0,0 +1,8 @@
+coverage:
+  status:
+    project:
+      default:
+        target: 50
+    patch:
+      default:
+        target: 50

docker-compose.yml

@@ -2,18 +2,22 @@ services:
   nginx:
     image: nginx
     ports:
-      - "8080:80"
-      - "8443:443"
+      - '8080:80'
+      - '8443:443'
     volumes:
       - ./src/nginx/conf/:/etc/nginx/conf.d/:ro
       - ./src/nginx/keys/:/etc/nginx/ssl/:ro
-  webapp:
+    depends_on:
+      - mailcom
+  mailcom:
     build: .
-    env_file:
-      - flask.env
-    command: gunicorn --bind 0.0.0.0:8000 wsgi:app
+    command: pnpm run start
+    ports:
+      - '3000:3000'
     expose:
-      - "8000"
+      - '3000'
+    volumes:
+      - ./src/app/frontend:/app
   db: 
     image: mysql:9.0.1
     restart: always

src/app/website/__init__.py → src/app/backend/__init__.py

@@ -20,19 +20,9 @@ def create_app():
     # app.config['SQLALCHEMY_DATABASE_URI'] = f'mysql://donor:{PASSWD}@localhost/{DB_NAME}'
     app.config['SQLALCHEMY_DATABASE_URI'] = f'mysql://donor:{PASSWD}@127.0.0.1/{DB_NAME}'
     db.init_app(app)
-
-    from .views import views
-    from .donate import donate
-    from .about import about
-
-    app.register_blueprint(views, url_prefix="/")
-    app.register_blueprint(donate, url_prefix="/")
-    app.register_blueprint(about, url_prefix="/")
-
-    from .models import RawData  # noqa
-
+
     with app.app_context():
         db.create_all()
 
-    return app
 
+    return app

src/app/website/donate.py → src/app/backend/donate.py

@@ -1,20 +1,17 @@
-from flask import Blueprint, render_template, request, flash, redirect, url_for
+from flask import request, flash, redirect, url_for
 from werkzeug.security import generate_password_hash
 from sqlalchemy import func, cast, VARBINARY
 from .models import RawData
 from . import db
 
-donate = Blueprint("donate", __name__)
-
-@donate.route("/donation", methods=["GET", "POST"])
-def donation():
-    if request.method == "GET":
-        return render_template("donate.html")
-    elif request.method == "POST":
+def init_views(app):
+    @app.route("/donation", methods=["POST"])
+    def donation():
         text = request.form.get("text")
         # make sure this is not empty
         if not text:
-            flash("Please provide text input", category="error")
+            return "Error: No text provided"
+            # we should also use logging
         else:
             # at the moment we are generating the hash checksum for the raw text
             new_submission = RawData(
@@ -25,12 +22,8 @@ def donation():
             db.session.add(new_submission)
             # make commit to db
             db.session.commit()
-            flash("Text input received", category="success")
             # results = db.session.query(RawData).filter_by(
             #     donation='text').all()
             # for result in results:
             #     print(f"ID: {result.donor_id}, Donation: {result.donation}")
-            # redirect to homepage
-            return redirect(url_for("views.home"))
-
-    return render_template("donate.html")
+            return "Success: data transferred to database"

src/app/frontend/package.json

@@ -0,0 +1,56 @@
+{
+	"name": "donation-webserver",
+	"version": "0.0.1",
+	"type": "module",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"start": "node build",
+		"test": "playwright test",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test:unit": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"gh-pages": "npm run build && npx gh-pages -d build"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.49.1",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/adapter-node": "^5.2.11",
+		"@sveltejs/kit": "^2.15.2",
+		"@typescript-eslint/eslint-plugin": "^8.19.1",
+		"@typescript-eslint/parser": "^8.19.1",
+		"autoprefixer": "^10.4.20",
+		"eslint": "^9.17.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"gh-pages": "^6.3.0",
+		"postcss": "^8.4.49",
+		"postcss-load-config": "^6.0.1",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.2",
+		"svelte": "^5.17.3",
+		"svelte-check": "^4.1.3",
+		"svelte-preprocess": "^6.0.3",
+		"tailwindcss": "^3.4.17",
+		"tslib": "^2.8.1",
+		"typescript": "^5.7.3",
+		"vite": "^5.4.11",
+		"vitest": "^2.1.8"
+	},
+	"dependencies": {
+		"@popperjs/core": "^2.11.8",
+		"@sveltejs/vite-plugin-svelte": "^4.0.4",
+		"classnames": "^2.5.1",
+		"flowbite": "^2.5.2",
+		"flowbite-svelte": "^0.47.4",
+		"flowbite-svelte-icons": "^2.0.2",
+		"globrex": "^0.1.2",
+		"pnpm": "^9.15.3",
+		"svelte-awesome-icons": "^2.0.1"
+	},
+	"packageManager": "[email protected]+sha512.1f79bc245a66eb0b07c5d4d83131240774642caaa86ef7d0434ab47c0d16f66b04e21e0c086eb61e62c77efc4d7f7ec071afad3796af64892fae66509173893a"
+}

src/app/frontend/playwright.config.ts

@@ -0,0 +1,11 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests'
+};
+
+export default config;