Upgrade frontend related stuff

Use node 18
Update styling from the default template
Update tooling from the default template

Author: Viicos

.github/workflows/ci.yml

@@ -34,7 +34,7 @@ jobs:
           python-version: '3.10'
       - uses: actions/setup-node@v4
         with:
-          node-version: '12'
+          node-version: '18'
 
       - name: Install system packages
         run: |

.github/workflows/codeql-analysis.yml

@@ -48,11 +48,11 @@ jobs:
         # If you wish to specify custom queries, you can do so here or in a config file.
         # By default, queries listed here will override any specified in a config file.
         # Prefix the list here with "+" to use these queries and those in the config file.
-        
+
         # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
         # queries: security-extended,security-and-quality
 
-        
+
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild

.github/workflows/generate-postman-collection.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '12'
+          node-version: '18'
       - name: Install dependencies
         run: npm install -g openapi-to-postmanv2
       - name: Create tests folder

.github/workflows/generate-sdks.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '12'
+          node-version: '18'
       - name: Install dependencies
         run: npm install -g @openapitools/openapi-generator-cli
       - name: Determing oas path

.github/workflows/lint-oas.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '12'
+          node-version: '18'
       - name: Install spectral
         run: npm install -g @stoplight/spectral@5
       - name: Run OAS linter

.nvmrc

@@ -0,0 +1 @@
+18

Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1 - Compile needed python dependencies
-FROM python:3.10-buster AS build
+FROM python:3.10-slim-bullseye AS backend-build
 
 RUN apt-get update && apt-get install -y --no-install-recommends \
         libpq-dev \
@@ -13,7 +13,7 @@ RUN pip install -r requirements/production.txt
 
 
 # Stage 2 - build frontend
-FROM mhart/alpine-node:12 AS frontend-build
+FROM node:18-alpine AS frontend-build
 
 WORKDIR /app
 
@@ -23,7 +23,7 @@ RUN npm ci
 COPY ./webpack.config.js ./.babelrc /app/
 COPY ./build /app/build/
 
-COPY src/objects/sass/ /app/src/objects/sass/
+COPY src/objects/scss/ /app/src/objects/scss/
 COPY src/objects/js/ /app/src/objects/js/
 RUN npm run build
 
@@ -40,16 +40,18 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
         libproj13 \
     && rm -rf /var/lib/apt/lists/*
 
-COPY --from=build /usr/local/lib/python3.10 /usr/local/lib/python3.10
-COPY --from=build /usr/local/bin/uwsgi /usr/local/bin/uwsgi
+COPY --from=backend-build /usr/local/lib/python3.10 /usr/local/lib/python3.10
+COPY --from=backend-build /usr/local/bin/uwsgi /usr/local/bin/uwsgi
 
 # Stage 3.2 - Copy source code
 WORKDIR /app
 COPY ./bin/docker_start.sh /start.sh
 RUN mkdir /app/log /app/config
 
-COPY --from=frontend-build /app/src/objects/static/css /app/src/objects/static/css
-COPY --from=frontend-build /app/src/objects/static/js /app/src/objects/static/js
+# copy frontend build statics
+COPY --from=frontend-build /app/src/objects/static /app/src/objects/static
+
+# copy source code
 COPY ./src /app/src
 
 RUN useradd -M -u 1000 user

INSTALL.rst

@@ -18,7 +18,7 @@ Prerequisites
 
 You need the following libraries and/or programs:
 
-* `Python`_ 3.9 or above
+* `Python`_ 3.10 or above
 * Python `Virtualenv`_ and `Pip`_
 * `PostgreSQL`_ 12 or above with PostGIS extension
 * `Node.js`_
@@ -47,22 +47,20 @@ development machine.
        $ git clone git@github.com:maykinmedia/objects-api.git
        $ cd objects-api
 
-3. Install all required libraries.
+3. Install all required (backend) libraries.
 
    .. code-block:: bash
 
        $ virtualenv env
        $ source env/bin/activate
        $ pip install -r requirements/dev.txt
 
-4. Install the front-end CLI tool `gulp`_ if you've never installed them
-   before and install the frontend libraries:
+4. Install all required (frontend) libraries and build static files.
 
    .. code-block:: bash
 
-       $ npm install -g gulp
        $ npm install
-       $ gulp sass
+       $ npm run build
 
 5. Activate your virtual environment and create the statics and database:
 
@@ -94,12 +92,9 @@ development machine.
 ``src/objects/conf/local.py``. You can base this file on the
 example file included in the same directory.
 
-**Note:** You can run watch-tasks to compile `Sass`_ to CSS and `ECMA`_ to JS
-using `gulp`_. By default this will compile the files if they change.
 
 .. _ECMA: https://ecma-international.org/
 .. _Sass: https://sass-lang.com/
-.. _gulp: https://gulpjs.com/
 
 
 Update installation
@@ -121,7 +116,7 @@ When updating an existing installation:
        $ git pull
        $ pip install -r requirements/dev.txt
        $ npm install
-       $ gulp sass
+       $ npm run build
 
 3. Update the statics and database:
 

build/paths.js

@@ -1,15 +1,14 @@
-var path = require('path');
-var fs = require('fs');
+const fs = require('fs');
 
 
 /** Parses package.json */
-var pkg = JSON.parse(fs.readFileSync('./package.json', 'utf-8'));
+const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf-8'));
 
-/** Name of the sources directory */
-var sourcesRoot = 'src/' + pkg.name + '/';
+/** Src dir */
+const sourcesRoot = 'src/' + pkg.name + '/';
 
-/** Name of the static (source) directory */
-var staticRoot = sourcesRoot + 'static/';
+/** "Main" static dir */
+const staticRoot = sourcesRoot + 'static/';
 
 
 /**
@@ -19,32 +18,23 @@ module.exports = {
     // Parsed package.json
     package: pkg,
 
-    // Path to the sass (sources) directory
-    sassSrcDir: sourcesRoot + 'sass/',
+    // Path to the scss entry point
+    scssEntry: sourcesRoot + 'scss/screen.scss',
 
-    // Path to the sass (sources) entry point
-    sassSrc: sourcesRoot + 'sass/**/*.scss',
-
-    // Path to the (transpiled) css directory
-    cssDir: staticRoot + 'css/',
-
-    // Path to the fonts directory
-    fontsDir: staticRoot + 'fonts/',
+    // Path to the scss (sources) directory
+    scssSrcDir: sourcesRoot + 'scss/',
 
     // Path to the js entry point (source)
     jsEntry: sourcesRoot + 'js/index.js',
 
-    // Path to the js (sources) directory
-    jsSrcDir: sourcesRoot + 'js/',
-
     // Path to js (sources)
     jsSrc: sourcesRoot + 'js/**/*.js',
 
     // Path to the js (sources) directory
     jsSrcDir: sourcesRoot + 'js/',
 
     // Path to the (transpiled) js directory
-    jsDir: staticRoot + 'js/',
+    jsDir: staticRoot + 'bundles/',
 
     // Path to js spec (test) files
     jsSpec: sourcesRoot + 'jstests/**/*.spec.js',
@@ -54,10 +44,4 @@ module.exports = {
 
     // Path to js code coverage directory
     coverageDir: 'reports/jstests/',
-
-    // Path to HTML templates directory
-    htmlTemplatesDir: sourcesRoot + 'templates/views',
-
-    // Path to HTML includes directory
-    htmlIncludesDir: sourcesRoot + 'templates/components/'
 };