New Multi-option React Scaffolder template

apps/portal/app-config.yaml

@@ -31,7 +31,8 @@ backend:
   # The production database configuration is stored in app-config.production.yaml
   database:
     client: better-sqlite3
-    connection: ':memory:'
+    connection:
+      filename: ':memory:'
   # workingDirectory: /tmp # Use this to configure a working directory for the scaffolder, defaults to the OS temp-dir
 
 integrations:
@@ -132,6 +133,12 @@ catalog:
       rules:
         - allow: [Template]
 
+    # Multi-Option React Scaffolder Template
+    - type: file
+      target: ../../examples/multi-option-react-template/template.yaml
+      rules:
+        - allow: [Template]
+
     # NestJS + Prisma Template
     - type: file
       target: ../../examples/nestjs-prisma-template/template.yaml

apps/portal/examples/multi-option-react-template/content/gitops/argocd-app.yaml

@@ -0,0 +1,22 @@
+apiVersion: argoproj.io/v1alpha1
+kind: Application
+metadata:
+  name: ${{ values.repoName }}-argocd
+  namespace: argocd
+  finalizers:
+  - resources-finalizer.argocd.argoproj.io
+spec:
+  project: default
+  source:
+    repoURL: ${{ values.gitopsRepo }}
+    targetRevision: HEAD
+    path: ./
+  destination:
+    server: https://kubernetes.default.svc
+    namespace: default
+  syncPolicy:
+    automated:
+      prune: true
+      selfHeal: true
+    syncOptions:
+    - CreateNamespace=true

apps/portal/examples/multi-option-react-template/content/gitops/helios-app.yaml

@@ -0,0 +1,28 @@
+apiVersion: app.helios.io/v1alpha1
+kind: HeliosApp
+metadata:
+  name: ${{ values.repoName }}
+  namespace: default
+spec:
+  owner: ${{ values.owner }}
+  description: "React application: ${{ values.name }}"
+  gitRepo: ${{ values.sourceRepo }}
+  gitBranch: main
+  imageRepo: ${{ values.image }}
+  gitopsRepo: ${{ values.gitopsRepo }}
+  gitopsPath: ${{ values.repoName }}
+  pipelineName: from-code-to-cluster
+  webhookSecret: git-credentials-${{ values.repoName }}
+  port: ${{ values.port }}
+  testCommand: ${{ values.testCommand }}
+  components:
+    - name: ${{ values.repoName }}
+      type: web-service
+      properties:
+        image: ${{ values.image }}:latest
+        port: ${{ values.port }}
+        replicas: 1
+      traits:
+        - type: service
+          properties:
+            port: ${{ values.port }}

apps/portal/examples/multi-option-react-template/content/gitops/pipeline.yaml

@@ -0,0 +1,40 @@
+apiVersion: tekton.dev/v1
+kind: PipelineRun
+metadata:
+  name: ${{ values.repoName }}-pipeline-run
+  annotations:
+    janus-idp.io/tekton: ${{ values.repoName }}
+spec:
+  serviceAccountName: pipeline
+  pipelineRef:
+    name: from-code-to-cluster
+  params:
+  - name: image-repo
+    value: ${{ values.image }}
+  - name: app-repo-url
+    value: ${{ values.sourceRepo }}
+  - name: app-repo-revision
+    value: main
+  - name: GITOPS_REPO_URL
+    value: ${{ values.gitopsRepo }}
+  - name: GITOPS_REPO_BRANCH
+    value: main
+  - name: MANIFEST_PATH
+    value: ./helios-app.yaml
+  - name: docker-secret
+    value: docker-credentials 
+  - name: test-command
+    value: ${{ values.testCommand }}
+  - name: argocd-namespace
+    value: argocd
+  - name: argocd-app-name
+    value: ${{ values.repoName }}-argocd
+  workspaces:
+  - name: source-workspace
+    volumeClaimTemplate:
+      spec:
+        accessModes:
+        - ReadWriteOnce
+        resources:
+          requests:
+            storage: 1Gi

apps/portal/examples/multi-option-react-template/content/gitops/triggers.yaml

@@ -0,0 +1,107 @@
+apiVersion: triggers.tekton.dev/v1beta1
+kind: TriggerBinding
+metadata:
+  name: ${{ values.repoName }}-git-binding
+spec:
+  params:
+    - name: git-repo-url
+      value: $(body.repository.clone_url)
+    - name: git-revision
+      value: $(body.head_commit.id)
+    - name: git-repo-name
+      value: $(body.repository.name)
+    - name: git-owner
+      value: $(body.repository.owner.login)
+
+---
+apiVersion: triggers.tekton.dev/v1beta1
+kind: TriggerTemplate
+metadata:
+  name: ${{ values.repoName }}-git-template
+spec:
+  resourcetemplates:
+    - apiVersion: tekton.dev/v1
+      kind: PipelineRun
+      metadata:
+        generateName: ${{ values.repoName }}-run-
+        labels:
+          tekton.dev/pipeline: from-code-to-cluster
+          app.kubernetes.io/instance: ${{ values.repoName }}
+      spec:
+        serviceAccountName: pipeline
+        pipelineRef:
+          name: from-code-to-cluster
+        params:
+          - name: app-repo-url
+            value: $(tt.params.git-repo-url)
+          - name: app-repo-revision
+            value: $(tt.params.git-revision)
+          - name: image-repo
+            value: "${{ values.image }}" 
+          - name: GITOPS_REPO_URL
+            value: "${{ values.gitopsRepo }}"
+          - name: GITOPS_REPO_BRANCH
+            value: "main"
+          - name: MANIFEST_PATH
+            value: "helios-app.yaml"
+          - name: docker-secret
+            value: "docker-credentials"
+          - name: test-command
+            value: "${{ values.testCommand }}"
+          - name: argocd-namespace
+            value: "argocd"
+          - name: argocd-app-name
+            value: "${{ values.repoName }}-argocd"
+        workspaces:
+          - name: source-workspace
+            volumeClaimTemplate:
+              spec:
+                accessModes:
+                  - ReadWriteOnce
+                resources:
+                  requests:
+                    storage: 1Gi
+
+---
+apiVersion: triggers.tekton.dev/v1beta1
+kind: EventListener
+metadata:
+  name: ${{ values.repoName }}-listener
+spec:
+  serviceAccountName: ${{ values.repoName }}-sa
+  triggers:
+    - binding:
+        name: ${{ values.repoName }}-git-binding
+      template:
+        name: ${{ values.repoName }}-git-template
+
+---
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: ${{ values.repoName }}-sa
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: RoleBinding
+metadata:
+  name: ${{ values.repoName }}-listener-binding
+roleRef:
+  apiGroup: rbac.authorization.k8s.io
+  kind: ClusterRole
+  name: tekton-triggers-eventlistener-roles
+subjects:
+  - kind: ServiceAccount
+    name: ${{ values.repoName }}-sa
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRoleBinding
+metadata:
+  name: ${{ values.repoName }}-listener-clusterbinding
+roleRef:
+  apiGroup: rbac.authorization.k8s.io
+  kind: ClusterRole
+  name: tekton-triggers-eventlistener-clusterroles
+subjects:
+  - kind: ServiceAccount
+    name: ${{ values.repoName }}-sa
+    namespace: default

apps/portal/examples/multi-option-react-template/content/source/.eslintignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+*.config.js
+*.config.cjs
+postcss.config.cjs
+tailwind.config.cjs
+vite.config.js
+webpack.config.js

apps/portal/examples/multi-option-react-template/content/source/.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "settings": {
+    "react": {
+      "version": "18.2"
+    }
+  },
+  "plugins": [
+    "react-refresh"
+  ],
+  "rules": {
+    "react-refresh/only-export-components": [
+      "warn",
+      { "allowConstantExport": true }
+    ],
+    "react/prop-types": "off"
+  }
+}

apps/portal/examples/multi-option-react-template/content/source/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.env
+.env.local
+.eslintcache

apps/portal/examples/multi-option-react-template/content/source/Dockerfile

@@ -0,0 +1,15 @@
+# Build stage
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+ARG PORT=${{ values.port }}
+RUN sed -i "s/listen\(  *\)80;/listen ${PORT};/" /etc/nginx/conf.d/default.conf
+EXPOSE ${PORT}
+CMD ["nginx", "-g", "daemon off;"]

apps/portal/examples/multi-option-react-template/content/source/babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ]
+}

apps/portal/examples/multi-option-react-template/content/source/catalog-info.yaml

@@ -0,0 +1,18 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: ${{ values.repoName | dump }}
+  description: ${{ (values.description or "") | dump }}
+  annotations:
+    gitea.org/repo-url: http://localhost:3030/${{ values.owner }}/${{ values.repoName }}
+    backstage.io/techdocs-ref: dir:.
+    backstage.io/kubernetes-id: ${{ values.repoName }}
+    backstage.io/kubernetes-label-selector: app.kubernetes.io/name=${{ values.repoName }}
+    backstage.io/kubernetes-namespace: default
+    janus-idp.io/tekton: ${{ values.repoName }}
+    tekton.dev/ci-cd: "true"
+    argocd/app-name: ${{ values.repoName }}-argocd
+spec:
+  type: website
+  lifecycle: experimental
+  owner: ${{ values.owner | dump }}

apps/portal/examples/multi-option-react-template/content/source/index.vite.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚛️</text></svg>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${{ values.name }}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

apps/portal/examples/multi-option-react-template/content/source/index.webpack.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚛️</text></svg>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${{ values.name }}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>