dockerfile -> nix

.github/workflows/publish.yml

@@ -1,36 +1,48 @@
 name: Publish Docker image
 
-# on:
-#   release:
-#     types: [published]
 on: push
 
 jobs:
   push_to_registry:
-    name: Push Docker image to Docker Hub
+    name: Build and push Docker image to Docker Hub
     runs-on: ubuntu-latest
     if: github.ref == 'refs/heads/master'
     steps:
       - name: Check out the repo
         uses: actions/checkout@v4
 
+      - name: Install Nix
+        uses: cachix/install-nix-action@v30
+        with:
+          nix_path: nixpkgs=channel:nixos-unstable
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Angular app
+        run: pnpm build
+
+      - name: Build Docker image with Nix
+        run: nix build .#dockerImage
+
       - name: Log in to Docker Hub
         uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
-        with:
-          images: mmayss/typ
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@3b5e8027fcad23fda98b2e3ac259d8d67585f671
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+      - name: Load and push Docker image
+        run: |
+          docker load < result
+          docker push mmayss/typ:master

angular.json

@@ -18,7 +18,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/typ",
             "index": "src/index.html",
@@ -59,7 +59,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "typ:build:production"
@@ -71,10 +71,10 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@angular/build:extract-i18n"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "tsConfig": "tsconfig.spec.json",
             "inlineStyleLanguage": "css",
@@ -93,5 +93,31 @@
   },
   "cli": {
     "analytics": false
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

docker-compose.yaml

@@ -1,5 +1,3 @@
-version: '3'
-
 services:
   web:
     image: mmayss/typ:master

flake.nix

@@ -1,5 +1,5 @@
 {
-  description = "Basic dev environment for Angular";
+  description = "typ - font preview/comparison tool";
 
   outputs =
     { nixpkgs, ... }:
@@ -11,6 +11,13 @@
         "x86_64-linux"
       ];
       forAllSystems = nixpkgs.lib.genAttrs supportedSystems;
+
+      # Docker images are always Linux
+      linuxSystems = [
+        "aarch64-linux"
+        "x86_64-linux"
+      ];
+      forLinuxSystems = nixpkgs.lib.genAttrs linuxSystems;
     in
     {
       devShells = forAllSystems (
@@ -32,5 +39,55 @@
           };
         }
       );
+
+      packages = forLinuxSystems (
+        system:
+        let
+          pkgs = nixpkgs.legacyPackages.${system};
+
+          # The pre-built Angular static assets.
+          # Run `pnpm install && pnpm build` before `nix build .#dockerImage`.
+          staticFiles = pkgs.runCommand "typ-static" { } ''
+            mkdir -p $out/usr/share/nginx/html
+            cp -r ${./dist/typ/browser}/* $out/usr/share/nginx/html/
+          '';
+
+          nginxConf = pkgs.runCommand "typ-nginx-conf" { } ''
+            mkdir -p $out/etc/nginx
+            cp ${./nginx.conf} $out/etc/nginx/nginx.conf
+          '';
+        in
+        {
+          dockerImage = pkgs.dockerTools.buildLayeredImage {
+            name = "mmayss/typ";
+            tag = "master";
+
+            contents = [
+              pkgs.nginx
+              staticFiles
+              nginxConf
+              # nginx needs a tmp dir and log dir at runtime
+              pkgs.dockerTools.fakeNss
+            ];
+
+            extraCommands = ''
+              mkdir -p tmp
+              mkdir -p var/log/nginx
+              mkdir -p var/cache/nginx
+            '';
+
+            config = {
+              Cmd = [
+                "nginx"
+                "-g"
+                "daemon off;"
+              ];
+              ExposedPorts = {
+                "80/tcp" = { };
+              };
+            };
+          };
+        }
+      );
     };
 }

package.json

@@ -10,23 +10,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^19.2.0",
-    "@angular/compiler": "^19.2.0",
-    "@angular/core": "^19.2.0",
-    "@angular/forms": "^19.2.0",
-    "@angular/platform-browser": "^19.2.0",
-    "@angular/platform-browser-dynamic": "^19.2.0",
-    "@angular/router": "^19.2.0",
+    "@angular/common": "^20.3.7",
+    "@angular/compiler": "^20.3.7",
+    "@angular/core": "^20.3.7",
+    "@angular/forms": "^20.3.7",
+    "@angular/platform-browser": "^20.3.7",
+    "@angular/platform-browser-dynamic": "^20.3.7",
+    "@angular/router": "^20.3.7",
     "@tailwindcss/postcss": "^4.0.17",
     "postcss": "^8.5.3",
     "rxjs": "~7.8.0",
     "tailwindcss": "^4.0.17",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.1",
-    "@angular/cli": "^19.2.1",
-    "@angular/compiler-cli": "^19.2.0",
+    "@angular/build": "^20.3.7",
+    "@angular/cli": "^20.3.7",
+    "@angular/compiler-cli": "^20.3.7",
     "@types/jasmine": "~5.1.0",
     "daisyui": "^5.0.9",
     "jasmine-core": "~5.6.0",
@@ -35,6 +35,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.7.2"
+    "postcss": "^8.5.3",
+    "typescript": "~5.9.3"
   }
-}
+}