Add tailwind & landing page (#140)

Author: marcgibbons

.dockerignore

@@ -2,4 +2,5 @@
 .git/
 .venv/
 __pycache__/
+dist/
 node_modules/

.github/workflows/main.yml

@@ -29,11 +29,6 @@ jobs:
            --exclude=.github \
            project_name .
 
-      - name: Create blank index.js file
-        run: |
-          mkdir -p client/dist
-          touch client/dist/index.js
-
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3
 
@@ -61,10 +56,10 @@ jobs:
           curl -I --retry 10 --retry-all-errors --fail \
           localhost:8000/project_name-admin/login/
 
-      - name: curl /static/index.js
+      - name: curl /static/bundles/main.css
         run: |
           curl -I --retry 10 --retry-all-errors --fail \
-          localhost:8000/static/index.js
+          localhost:8000/static/bundles/main.css
 
       - name: Check missing migrations
         run: docker compose exec app coverage run -m manage makemigrations --check

.gitignore

@@ -6,3 +6,4 @@
 /staticfiles
 /{{ project_name }}.yml
 __pycache__
+dist/

.prettierrc.toml

@@ -1,11 +1,13 @@
 plugins = [
   "prettier-plugin-jinja-template",
+  "prettier-plugin-tailwindcss",
 ]
 printWidth = 88
 semi = true
 singleAttributePerLine = true
 singleQuote = false
 tabWidth = 2
+tailwindStylesheet = "ui/main.css"
 trailingComma = "all"
 
 [[overrides]]

Makefile

@@ -8,6 +8,7 @@ init:  ## Initialize the project
 	command -v uvx || curl -LsSf https://astral.sh/uv/install.sh | sh \
 		&& docker compose build \
 		&& docker compose run --rm app python manage.py migrate \
+    && docker compose stop \
 		&& git init && git add . \
 		&& command -v pre-commit || uv tool install pre-commit \
 		&& pre-commit install

client/index.js

@@ -1,17 +1,5 @@
 ---
 services:
-  client:
-    build:
-      context: .
-      dockerfile: docker/app/Dockerfile
-      target: build-node
-    command: npm run dev
-    volumes:
-      - .:/home/node/app
-      # node_modules is not shared with the host
-      - /home/node/app/node_modules
-      - client:/home/node/app/client/dist
-
   db:
     image: postgres:18-alpine
     environment:
@@ -34,6 +22,7 @@ services:
       restart: on-failure
       depends_on:
         - db
+        - tailwind
     command: python manage.py runserver 0.0.0.0:8000
     ports:
       - ${PORT:-8000}:8000
@@ -42,7 +31,18 @@ services:
     volumes:
       - .:/app
       - /app/.venv
-      - client:/app/client/dist
+
+  tailwind:
+    build:
+      context: .
+      dockerfile: docker/app/Dockerfile
+      target: build-node
+    command: npm run tailwind-watch
+    tty: true
+    stop_grace_period: 0s
+    volumes:
+      - ./:/app
+      - /app/node_modules # node_modules is not shared with the host
 
   prettier:
     build:

client/package-lock.json

@@ -1,12 +1,18 @@
 # STAGE 1: BUILD NODE
-FROM node:25.2.1-alpine AS build-node
+FROM node:25.2-alpine AS build-node
+ARG PROJECT_NAME="{{ project_name }}"
+
+WORKDIR /app
+RUN --mount=type=bind,source=package.json,target=package.json \
+  --mount=type=bind,source=package-lock.json,target=package-lock.json \
+  npm install --no-save
+
+RUN --mount=type=bind,source=package.json,target=package.json \
+  --mount=type=bind,source=package-lock.json,target=package-lock.json \
+  --mount=type=bind,source=ui/,target=ui/ \
+  --mount=type=bind,source=${PROJECT_NAME},target=${PROJECT_NAME}/ \
+  npm run tailwind-build
 
-WORKDIR /home/node/app/client
-COPY client/package-lock.json client/package.json ./
-RUN --mount=type=cache,target=/home/node/.npm \
-  set -ex && npm install -g npm@latest && npm ci
-COPY client/ ./
-RUN npm run build
 
 
 # STAGE 2: BUILD PYTHON
@@ -28,7 +34,7 @@ RUN --mount=type=cache,target=/root/.cache/uv \
   uv sync --locked
 
 COPY . ./
-COPY --from=build-node /home/node/app/client/dist ./client/dist
+COPY --from=build-node /app/dist/ /opt/static/
 RUN SECRET_KEY=s python manage.py collectstatic --noinput
 
 EXPOSE 8000