Switch to using tailwind.css build and subsequently switch to docker file

.gitignore

@@ -158,3 +158,13 @@ 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/
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Build output
+dist/
+build/
+.tmp/
+out/

Dockerfile

@@ -0,0 +1,47 @@
+# Stage 1: Node.js for TailwindCSS build
+FROM node:16-alpine as tailwind-builder
+
+# Set working directory for Tailwind build
+WORKDIR /app
+
+# Copy only the necessary files for TailwindCSS build
+COPY package.json package-lock.json ./
+COPY ./app/templates ./app/templates
+COPY tailwind.config.js ./
+COPY ./app/static/css/tailwind.css ./app/static/css/tailwind.css
+
+# Install Node.js dependencies
+RUN npm install
+
+# Build TailwindCSS assets
+RUN npm run build
+
+# Stage 2: Python for Flask app
+FROM python:3.9-slim
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    libpq-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set working directory for Flask app
+WORKDIR /app
+
+# Copy only necessary application files
+COPY requirements.txt ./
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application files
+COPY . .
+
+# Copy the built TailwindCSS assets from the first stage
+COPY --from=tailwind-builder /app/app/static/css/tailwind.css ./app/static/css/tailwind.css
+
+# Expose the port Flask will run on
+EXPOSE 5000
+
+# Command to run the Flask app
+CMD ["gunicorn", "-b", "0.0.0.0:5000", "app:create_app()"]

Readme.md

@@ -0,0 +1,7 @@
+# Docker build
+
+docker build -t bloodpressure .
+
+# Run locally
+
+docker run -p 5000:5000 -e DATABASE_URL=postgresql://postgres:59fff56880e1bbb42e753d2a82ac21b6@peterstockings.com:15389/bloodpressure_db bloodpressure

app/templates/_layout.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}BP Tracker{% endblock %}</title>
-    <script src="/static/js/tailwindcss@3.2.4.js"></script>
+    <link href="/static/css/tailwind.css" rel="stylesheet">
     <script src="/static/js/alpine.min.js" defer></script>
 </head>
 

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "bloodpressure",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "npx tailwindcss -o ./app/static/css/tailwind.css --minify",
+    "serve": "npx tailwindcss -o ./app/static/css/tailwind.css --watch"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "tailwindcss": "^3.0.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17"
+  }
+}

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./app/templates/**/*.html"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};