Server Side Rendering (#102)

* add title generation Signed-off-by: Mirko Mollik <[email protected]> * fix: update angular core Signed-off-by: Mirko Mollik <[email protected]> * fix: update angular core Signed-off-by: Mirko Mollik <[email protected]> * fix: update angular material Signed-off-by: Mirko Mollik <[email protected]> * fix: ssr Signed-off-by: Mirko Mollik <[email protected]> * add docker build image Signed-off-by: Mirko Mollik <[email protected]> * optimize og integration for seo Signed-off-by: Mirko Mollik <[email protected]> --------- Signed-off-by: Mirko Mollik <[email protected]>
openwallet-foundation · Oct 8, 2024 · 082082d · 082082d
1 parent ef279c4
commit 082082d
Show file tree

Hide file tree

Showing 34 changed files with 1,501 additions and 1,067 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -14,6 +14,7 @@ permissions:
   contents: read
   pages: write
   id-token: write
+  packages: write
 
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
@@ -107,3 +108,37 @@ jobs:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
+
+  docker:
+    # only run on the main branch
+    if: github.ref == 'refs/heads/main'
+    needs: [validate, build]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Cache Docker layers
+        uses: actions/cache@v4
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: viewer/
+          push: true
+          tags: ghcr.io/${{ github.repository_owner }}/wallet-agent-overview:latest
diff --git a/viewer/.dockerignore b/viewer/.dockerignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/viewer/Dockerfile b/viewer/Dockerfile
@@ -0,0 +1,36 @@
+# Stage 1: Build the Angular application
+FROM node:18-alpine AS build
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the package.json and package-lock.json files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the Angular application
+RUN npm run build:ssr
+
+# Stage 2: Serve the application using Node.js
+FROM node:18-alpine
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the built application from the previous stage
+COPY --from=build /app/dist /app/dist
+
+# Install only production dependencies
+COPY package*.json ./
+RUN npm install --only=production
+
+# Expose the port the app runs on
+EXPOSE 4000
+
+# Start the application
+CMD ["npm", "run", "serve:ssr:viewer"]
diff --git a/viewer/angular.json b/viewer/angular.json
@@ -29,7 +29,12 @@
               "src/styles.scss",
               "node_modules/prismjs/themes/prism-okaidia.css"
             ],
-            "scripts": ["node_modules/prismjs/prism.js"]
+            "scripts": ["node_modules/prismjs/prism.js"],
+            "server": "src/main.server.ts",
+            "prerender": true,
+            "ssr": {
+              "entry": "server.ts"
+            }
           },
           "configurations": {
             "production": {
@@ -48,6 +53,27 @@
               ],
               "outputHashing": "all"
             },
+            "ssr": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "1mb",
+                  "maximumError": "2mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.ssr.ts"
+                }
+              ]
+            },
             "development": {
               "optimization": false,
               "extractLicenses": false,