Base/setup repo (#5)

* initialised frontend project

* added workflow for testing frontend

* Update ci-tests.yml

Doing install instead of clean install

* Update ci-tests.yml: going to frontend directory for testing

* Update ci-tests.yml: setting working directory for steps

* Update ci-tests.yml: pipeline works, using clean install

* lint: fixed indentation

* added linting check to workflow

* initialised backend

* added backend testing and linting to dependencies

* renamed run name

* cacheing pip to make actions faster

* added flask-restfull to dependencies

* registered index blueprint to root

* created index blueprint

* switched module pathing

* Added self-hosted runner

---------

Co-authored-by: warre <[email protected]>

.github/workflows/ci-tests.yml

@@ -0,0 +1,62 @@
+name: UGent-3
+run-name: ${{ github.actor }} is running tests 🚀
+on: [push, pull_request]
+jobs:
+  Frontend-tests:
+    runs-on: self-hosted
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: npm-
+
+      - name: Install dependencies
+        working-directory: ./frontend
+        run: npm ci
+
+      - name: Build
+        working-directory: ./frontend
+        run: npm run build
+
+      - name: Preview Web App
+        working-directory: ./frontend
+        run: npm run preview &
+
+      - name: Running tests
+        working-directory: ./frontend
+        run: npm test
+
+      - name: Run linting
+        working-directory: ./frontend
+        run: npm run lint
+  Backend-tests:
+    runs-on: self-hosted
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.x'
+          cache: 'pip'
+
+      - name: Install dependencies
+        working-directory: ./backend
+        run: pip3 install -r requirements.txt && pip3 install -r dev-requirements.txt
+
+      - name: Running tests
+        working-directory: ./backend
+        run: pytest
+
+      - name: Run linting
+        working-directory: ./backend
+        run: pylint ./*/*.py
+
+

backend/.gitignore

@@ -0,0 +1,10 @@
+.idea/
+.vscode/
+__pycache__/
+.tox/
+.coverage
+.coverage.*
+htmlcov/
+docs/_build/
+dist/
+venv/

backend/Dockerfile

@@ -0,0 +1,6 @@
+FROM python:3.9
+RUN mkdir /app
+WORKDIR /app/
+ADD ./project /app/
+RUN pip3 install -r requirements.txt
+CMD ["python3", "/app"]

backend/dev-requirements.txt

@@ -0,0 +1,3 @@
+pytest
+pylint
+pylint-flask

backend/project/__init__.py

@@ -0,0 +1,18 @@
+""" Flask API base file
+This file is the base of the Flask API. It contains the basic structure of the API.    
+"""
+
+from flask import Flask, jsonify
+from .endpoints.index import index_bp
+
+def create_app():
+    """
+    Create a Flask application instance.
+    Returns:
+        Flask -- A Flask application instance
+    """
+    app = Flask(__name__)
+
+    app.register_blueprint(index_bp)
+
+    return app

backend/project/__main__.py

@@ -0,0 +1,9 @@
+"""Main entry point for the application."""
+from sys import path
+
+path.append(".")
+
+if __name__ == "__main__":
+    from project import create_app
+    app = create_app()
+    app.run(debug=True)

backend/project/endpoints/index.py

@@ -0,0 +1,10 @@
+from flask import Blueprint
+from flask_restful import Resource
+
+index_bp = Blueprint("index", __name__)
+
+class Index(Resource):
+    def get(self):
+        return {"Message": "Hello World!"}
+
+index_bp.add_url_rule("/", view_func=Index.as_view("index"))

backend/requirements.txt

@@ -0,0 +1,2 @@
+flask
+flask-restful

backend/tests/conftest.py

@@ -0,0 +1,22 @@
+""" Configuration for pytest, Flask, and the test client."""
+import pytest
+from project import create_app
+
+@pytest.fixture
+def app():
+    """A fixture that creates and configure a new app instance for each test.
+    Returns:
+        Flask -- A Flask application instance
+    """
+    app = create_app() # pylint: disable=redefined-outer-name ; fixture testing requires the same name to be used
+    yield app
+
+@pytest.fixture
+def client(app): # pylint: disable=redefined-outer-name ; fixture testing requires the same name to be used
+    """A fixture that creates a test client for the app.
+    Arguments:
+        app {Flask} -- A Flask application instance
+    Returns:
+        Flask -- A Flask test client instance
+    """
+    return app.test_client()

backend/tests/test_base.py

@@ -0,0 +1,6 @@
+"""Test the base routes of the application"""
+
+def test_home(client):
+    """Test whether the index page is accesible"""
+    response = client.get("/")
+    assert response.status_code == 200

frontend/.dockerignore

@@ -0,0 +1 @@
+/node_modules

frontend/.eslintrc.cjs

@@ -0,0 +1,55 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh", "jsdoc", "eslint-plugin-tsdoc"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+    "prefer-const": [
+      "error",
+      {
+        destructuring: "any",
+        ignoreReadBeforeAssign: false,
+      },
+    ],
+    "no-multiple-empty-lines": ["error", { max: 1, maxEOF: 0 }],
+    indent: ["error", 2],
+    "jsdoc/check-access": 1,
+    "tsdoc/syntax": "warn",
+    "jsdoc/check-alignment": 1,
+    "jsdoc/check-param-names": 1,
+    "jsdoc/check-property-names": 1,
+    "jsdoc/check-tag-names": 1,
+    "jsdoc/check-types": 1,
+    "jsdoc/check-values": 1,
+    "jsdoc/empty-tags": 1,
+    "jsdoc/implements-on-classes": 1,
+    "jsdoc/multiline-blocks": 1,
+    "jsdoc/no-multi-asterisks": 1,
+    "jsdoc/no-undefined-types": 1,
+    "jsdoc/require-jsdoc": 1,
+    "jsdoc/require-param": 1,
+    "jsdoc/require-param-description": 1,
+    "jsdoc/require-param-name": 1,
+    "jsdoc/require-param-type": 1,
+    "jsdoc/require-property": 1,
+    "jsdoc/require-property-description": 1,
+    "jsdoc/require-property-name": 1,
+    "jsdoc/require-returns": 1,
+    "jsdoc/require-returns-check": 1,
+    "jsdoc/require-returns-description": 1,
+    "jsdoc/require-yields": 1,
+    "jsdoc/require-yields-check": 1,
+    "jsdoc/tag-lines": 1,
+    "jsdoc/valid-types": 1,
+  },
+};

frontend/.gitignore

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

frontend/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:18 as build
+WORKDIR /app
+COPY package*.json .
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+WORKDIR /usr/share/nginx/html
+RUN rm -rf ./*
+COPY --from=build /app/dist /usr/share/nginx/html
+CMD ["nginx", "-g", "daemon off;"]

frontend/README.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

frontend/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    defaultCommandTimeout: 10000,
+    baseUrl: 'http://localhost:5173',
+    supportFile: false,
+    video: false
+  },
+});

frontend/cypress/e2e/base.cy.ts

@@ -0,0 +1,5 @@
+describe("Base tests", () => {
+  it("Can visit the index page", () => {
+    cy.visit("/");
+  });
+});

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/logo_ugent.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ugent-3</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>