Update dependencies and improve development experience

.dockerignore

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

.env.example

@@ -0,0 +1,6 @@
+PACKET_IP=0.0.0.0
+PACKET_SERVER_NAME=localhost.localdomain:8000
+PACKET_DATABASE_URI=postgresql://postgres:mysecretpassword@postgres:5432/postgres
+PACKET_OIDC_CLIENT_SECRET=
+PACKET_LDAP_BIND_PASS=
+PACKET_LDAP_BIND_DN=

.github/workflows/node-js.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v2

.nvmrc

@@ -1 +1 @@
-10
+20

Dockerfile

@@ -1,37 +1,34 @@
-FROM docker.io/python:3.9-slim-buster
-MAINTAINER Devin Matte <[email protected]>
-
-ENV DD_LOGS_INJECTION=true
+FROM docker.io/python:3.9-slim-trixie
 
+RUN ln -sf /usr/share/zoneinfo/America/New_York /etc/localtime
 RUN apt-get -yq update && \
     apt-get -yq --no-install-recommends install gcc curl libsasl2-dev libldap2-dev libssl-dev gnupg2 git && \
-    apt-get -yq clean all
+    apt-get -yq clean all \
+    curl -sL https://deb.nodesource.com/setup_20.x | bash - && \
+    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor -o /usr/share/keyrings/yarn-archive-keyring.gpg && \
+    echo "deb [signed-by=/usr/share/keyrings/yarn-archive-keyring.gpg] https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
+    apt-get -yq update && \
+    apt-get -yq --no-install-recommends install nodejs yarn
 
 RUN mkdir /opt/packet
-
 WORKDIR /opt/packet
 
 COPY requirements.txt /opt/packet/
-
 RUN pip install -r requirements.txt
 
-COPY . /opt/packet
+COPY package.json /opt/packet/
+COPY yarn.lock /opt/packet/
 
-RUN curl -sL https://deb.nodesource.com/setup_10.x | grep -v 'sleep 20' | bash - && \
-    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
-    echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
-    apt-get -yq update && \
-    apt-get -yq --no-install-recommends install nodejs yarn && \
-    yarn install && \
-    npm install -g gulp && \
-    gulp production && \
+RUN yarn install && \
+    yarn global add gulp
+
+COPY . /opt/packet
+RUN gulp production && \
     rm -rf node_modules && \
     apt-get -yq remove nodejs npm yarn && \
     apt-get -yq autoremove && \
     apt-get -yq clean all
 
-RUN ln -sf /usr/share/zoneinfo/America/New_York /etc/localtime
-
 # Set version for apm
 RUN echo "export DD_VERSION=\"$(python3 packet/git.py)\"" >> /tmp/version
 

Dockerfile.dev

@@ -0,0 +1,34 @@
+FROM docker.io/python:3.9-slim-trixie
+
+RUN ln -sf /usr/share/zoneinfo/America/New_York /etc/localtime
+RUN apt-get -yq update && \
+    apt-get -yq --no-install-recommends install gcc curl libsasl2-dev libldap2-dev libssl-dev gnupg2 git && \
+    apt-get -yq clean all \
+    curl -sL https://deb.nodesource.com/setup_20.x | bash - && \
+    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor -o /usr/share/keyrings/yarn-archive-keyring.gpg && \
+    echo "deb [signed-by=/usr/share/keyrings/yarn-archive-keyring.gpg] https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
+    apt-get -yq update && \
+    apt-get -yq --no-install-recommends install nodejs yarn
+
+RUN mkdir /opt/packet
+WORKDIR /opt/packet
+
+COPY requirements.txt /opt/packet/
+RUN pip install -r requirements.txt
+
+COPY package.json /opt/packet/
+COPY yarn.lock /opt/packet/
+
+RUN yarn install && \
+    yarn global add gulp
+
+COPY . /opt/packet
+RUN gulp production && \
+    rm -rf node_modules && \
+    apt-get -yq remove nodejs npm yarn && \
+    apt-get -yq autoremove && \
+    apt-get -yq clean all
+
+EXPOSE 8000
+
+CMD ["/bin/bash", "-c", "python3 wsgi.py"]

README.md

@@ -7,7 +7,44 @@ Packet is used by CSH to facilitate the freshmen packet portion of our introduct
 the second major iteration of packet on the web. The first version was 
 [Tal packet](https://github.com/TalCohen/CSHWebPacket).
 
-## Setup
+
+## Develop with Docker (Recommended)
+
+1. Copy the `.env.example` to `.env` and insert the required credentials
+2. Build the dev environment with `docker compose build`
+3. Start the dev environment with `docker compose up`
+4. Run the database migrations with `docker exec -it packet-packet-1 flask db upgrade`
+5. Go check out the app at http://localhost.localdomain:8000
+
+> Useful Tip: use `docker compose up --watch` so that you don't need to rebuild the container every time you want to test a change
+
+### Secrets and configuration
+
+Packet pulls in environment variables via the `config.env.py` so consult that file for all environment variables that configure the application.
+Use the `.env.example` file as an example to get started with development by making a copy called `.env` and adding what you need.
+
+**Required configuration values:**
+
+* `PACKET_DATABASE_URI` - Must be set to a valid [SQLAlchemy DB URI](http://flask-sqlalchemy.pocoo.org/2.3/config/#connection-uri-format). The `.env.example` has the default value for the containerized PostgreSQL database defined in the `docker-compose.yml`
+* `PACKET_LDAP_BIND_DN` - Must point to a valid CSH account on LDAP. Use the form 
+`uid={username},cn=users,cn=accounts,dc=csh,dc=rit,dc=edu`.
+* `PACKET_LDAP_BIND_PASS` - The password for that CSH account.
+* `PACKET_SECRET_KEY` - Use a sufficiently long random string here. The `flask create-secret` command can generate a good one 
+for you.
+* `PACKET_OIDC_CLIENT_SECRET` - Required to use CSH auth. Contact a current maintainer of packet for the details.
+
+To switch between OIDC realms you'll need to set the modify the following values:
+
+* `PACKET_OIDC_CLIENT_SECRET` - Unique to each realm. Again, contact a current maintainer of packet for the details.
+* `PACKET_OIDC_ISSUER` - The OIDC issuer URL.
+* `PACKET_REALM` - Set to `"csh"` or `"intro"` depending on the realm you want.
+
+By default `PACKET_OIDC_ISSUER` and `PACKET_REALM` are configured for the CSH members realm.
+
+## Develop locally (Not Recommended)
+
+### Setup
+
 **Requires Python 3.9 or newer.**
 
 To get the server working you'll just need the Python dependencies and some secrets. There will be some UI issues due 
@@ -18,6 +55,7 @@ Alternatively, you can set up a Docker container using `Dockerfile`. This is wha
 reliable method.
 
 ### Python dependencies
+
 Use `pip3 install -r requirements.txt` to install the required python dependencies. A 
 [venv](https://packaging.python.org/tutorials/installing-packages/#creating-virtual-environments) is *highly* 
 recommended. To add new dependencies, add them to `requirements.in` and run `pip-compile requirements.in` to update
@@ -29,6 +67,7 @@ pain. Try using [WSL](https://docs.microsoft.com/en-us/windows/wsl/about) or fin
 trustworthy source.
 
 ### Frontend dependencies
+
 To build any of the frontend dependencies you're going to need [node](https://nodejs.org/), 
 [npm](https://www.npmjs.com/get-npm), and [yarn](https://yarnpkg.com/).
 
@@ -49,6 +88,7 @@ npm install -g gulp
 ```
 
 ### Local Development
+
 * PostgreSQL
 You'll need a postgres instance to use as a development DB.
 You can use an existing database, like the instance used for the dev branch, use a database on another server, or spin up a container using docker or podman. 
@@ -62,32 +102,8 @@ Once the container is up, run the following to set up the database tables.
 flask db upgrade
 ```
 
-### Secrets and configuration
-Packet supports 2 primary configuration methods:
-1. Environment variables - See `config.env.py` for the expected names and default values.
-2. Pyfile config - Create a `config.py` file in the root directory of the project and set variables to override the 
-values in `config.env.py`.
-
-Both methods can be used at the same time, though Pyfile config will take priority over environment variables.
+### Usage
 
-**Required configuration values:**
-* `SQLALCHEMY_DATABASE_URI` - Must be set to a valid [SQLAlchemy DB URI](http://flask-sqlalchemy.pocoo.org/2.3/config/#connection-uri-format). 
-A dev database for the project is hosted by CSH. Contact a current maintainer of packet for the details.
-* `LDAP_BIND_DN` - Must point to a valid CSH account on LDAP. Use the form 
-`uid={username},cn=users,cn=accounts,dc=csh,dc=rit,dc=edu`.
-* `LDAP_BIND_PASS` - The password for that CSH account.
-* `SECRET_KEY` - Use a sufficiently long random string here. The `flask create-secret` command can generate a good one 
-for you.
-* `OIDC_CLIENT_SECRET` - Required to use CSH auth. Contact a current maintainer of packet for the details.
-
-To switch between OIDC realms you'll need to set the modify the following values:
-* `OIDC_CLIENT_SECRET` - Unique to each realm. Again, contact a current maintainer of packet for the details.
-* `OIDC_ISSUER` - The OIDC issuer URL.
-* `REALM` - Set to `"csh"` or `"intro"` depending on the realm you want.
-
-By default `OIDC_ISSUER` and `REALM` are configured for the CSH members realm.
-
-## Usage
 To run packet using the flask dev server use this command:
 ```bash
 python3 wsgi.py
@@ -99,7 +115,8 @@ Alternative you can run it through [gunicorn](https://gunicorn.org/) using this
 gunicorn -b :8000 packet:app --access-logfile -
 ```
 
-### CLI
+## CLI
+
 Packet makes use of the Flask CLI for exposing functionality to devs and admins. This is primarily designed to be used 
 locally with the target DB set via the server's config values.
 

docker-compose.yml

@@ -0,0 +1,44 @@
+services:
+  packet:
+    build:
+      context: .
+      dockerfile: ./Dockerfile.dev
+    env_file:
+      - path: ".env"
+        required: true
+    ports:
+      - "8000:8000"
+    develop:
+      watch:
+        - action: sync+restart
+          path: packet
+          target: /opt/packet/packet
+        - action: rebuild
+          path: frontend
+          target: /opt/packet/frontend
+
+    networks:
+      - packet-network-dev
+    depends_on:
+      postgres:
+        condition: service_healthy
+        restart: true
+  postgres:
+    image: "postgres:17"
+    networks:
+      - packet-network-dev
+    environment:
+      POSTGRES_USER: "postgres"
+      POSTGRES_DB: "postgres"
+      POSTGRES_PASSWORD: "mysecretpassword"
+    ports:
+      - "5432:5432"
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres -d postgres"]
+      interval: 10s
+      retries: 5
+      start_period: 30s
+      timeout: 10s
+
+networks:
+  packet-network-dev:

frontend/scss/components/badges.scss

@@ -19,7 +19,7 @@ span {
 
     &.badge-wm {
         color: #fff;
-        background-color: #b19cd9;
+        background-color: #800040;
     }
 
     &.badge-webmaster {

frontend/scss/packet.scss

@@ -1,10 +1,8 @@
-$csh-pink: #b0197e;
+@use "partials/base";
 
-@import "partials/base";
-
-@import "components/switches";
-@import "components/datatables";
-@import "components/buttons";
-@import "components/signatures";
-@import "components/badges";
-@import "components/code";
+@use "components/switches";
+@use "components/datatables";
+@use "components/buttons";
+@use "components/signatures";
+@use "components/badges";
+@use "components/code";

frontend/scss/partials/_base.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 body {
   padding-top: 40px;
 }
@@ -6,7 +7,7 @@ body {
   margin-top: 40px;
 }
 
-@import "global";
+@include meta.load-css("global");
 
 .header {
   display: flex;

frontend/scss/partials/_global.scss

@@ -1,3 +1,5 @@
+$csh-pink: #b0197e;
+
 .navbar-fixed-bottom,
 .navbar-fixed-top {
   z-index: 900;
@@ -98,7 +100,7 @@ tr {
 }
 
 .label-primary {
-    background-color: $csh-pink;
+  background-color: $csh-pink;
 }
 
 .eval-user-img {

gulpfile.js/tasks/stylesheets.js

@@ -1,29 +1,32 @@
-const gulp = require('gulp');
-const sass = require('gulp-sass');
-const cleanCSS = require('gulp-clean-css');
+const gulp = require("gulp");
+const sass = require("gulp-sass")(require("sass"));
+const cleanCSS = require("gulp-clean-css");
 const rename = require("gulp-rename");
 
 // Compile SCSS
-gulp.task('sass:compile', () => {
-    return gulp.src('frontend/scss/**/*.scss')
-        .pipe(sass.sync({
-            outputStyle: 'expanded'
-        }).on('error', sass.logError))
-        .pipe(gulp.dest('packet/static/css'))
+gulp.task("sass:compile", () => {
+  return gulp
+    .src("frontend/scss/**/*.scss")
+    .pipe(
+      sass({
+        outputStyle: "expanded",
+      }).on("error", sass.logError),
+    )
+    .pipe(gulp.dest("packet/static/css"));
 });
 
 // Minify CSS
-gulp.task('css:minify', () => {
-    return gulp.src([
-        'packet/static/css/*.css',
-        '!packet/static/css/*.min.css'
-    ])
-        .pipe(cleanCSS())
-        .pipe(rename({
-            suffix: '.min'
-        }))
-        .pipe(gulp.dest('packet/static/css'));
+gulp.task("css:minify", () => {
+  return gulp
+    .src(["packet/static/css/*.css", "!packet/static/css/*.min.css"])
+    .pipe(cleanCSS())
+    .pipe(
+      rename({
+        suffix: ".min",
+      }),
+    )
+    .pipe(gulp.dest("packet/static/css"));
 });
 
 // CSS
-gulp.task('css', gulp.series('sass:compile', 'css:minify'));
+gulp.task("css", gulp.series("sass:compile", "css:minify"));

migrations/alembic.ini

@@ -11,7 +11,7 @@
 
 # Logging configuration
 [loggers]
-keys = root,sqlalchemy,alembic
+keys = root,sqlalchemy,alembic,flask_migrate
 
 [handlers]
 keys = console
@@ -34,6 +34,11 @@ level = INFO
 handlers =
 qualname = alembic
 
+[logger_flask_migrate]
+level = INFO
+handlers =
+qualname = flask_migrate
+
 [handler_console]
 class = StreamHandler
 args = (sys.stderr,)