New Multi-option React Scaffolder template

apps/portal/app-config.yaml

@@ -132,6 +132,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.name }}-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.name }}
+  namespace: default
+spec:
+  owner: ${{ values.owner }}
+  description: "React application: ${{ values.name }}"
+  gitRepo: ${{ values.sourceRepo }}
+  gitBranch: main
+  imageRepo: ${{ values.image }}
+  gitopsRepo: ${{ values.gitopsRepo }}
+  gitopsPath: ${{ values.name }}
+  pipelineName: from-code-to-cluster
+  webhookSecret: git-credentials-${{ values.name }}
+  port: ${{ values.port }}
+  testCommand: ${{ values.testCommand }}
+  components:
+    - name: ${{ values.name }}
+      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/v1beta1
+kind: PipelineRun
+metadata:
+  name: ${{ values.name }}-pipeline-run
+  annotations:
+    janus-idp.io/tekton: ${{ values.name }}
+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.name }}-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,92 @@
+apiVersion: triggers.tekton.dev/v1beta1
+kind: TriggerBinding
+metadata:
+  name: ${{ values.name }}-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.name }}-git-template
+spec:
+  resourcetemplates:
+    - apiVersion: tekton.dev/v1beta1
+      kind: PipelineRun
+      metadata:
+        generateName: ${{ values.name }}-run-
+        labels:
+          tekton.dev/pipeline: from-code-to-cluster
+          app.kubernetes.io/instance: ${{ values.name }}
+      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"
+
+---
+apiVersion: triggers.tekton.dev/v1beta1
+kind: EventListener
+metadata:
+  name: ${{ values.name }}-listener
+spec:
+  serviceAccountName: ${{ values.name }}-sa
+  triggers:
+    - binding:
+        name: ${{ values.name }}-git-binding
+      template:
+        name: ${{ values.name }}-git-template
+
+---
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: ${{ values.name }}-sa
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: RoleBinding
+metadata:
+  name: ${{ values.name }}-listener-binding
+roleRef:
+  apiGroup: rbac.authorization.k8s.io
+  kind: ClusterRole
+  name: tekton-triggers-eventlistener-roles
+subjects:
+  - kind: ServiceAccount
+    name: ${{ values.name }}-sa
+---
+apiVersion: rbac.authorization.k8s.io/v1
+kind: ClusterRoleBinding
+metadata:
+  name: ${{ values.name }}-listener-clusterbinding
+roleRef:
+  apiGroup: rbac.authorization.k8s.io
+  kind: ClusterRole
+  name: tekton-triggers-eventlistener-clusterroles
+subjects:
+  - kind: ServiceAccount
+    name: ${{ values.name }}-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.name | dump }}
+  description: ${{ (values.description or "") | dump }}
+  annotations:
+    gitea.org/repo-url: http://localhost:3030/${{ values.owner }}/${{ values.name }}
+    backstage.io/techdocs-ref: dir:.
+    backstage.io/kubernetes-id: ${{ values.name }}
+    backstage.io/kubernetes-label-selector: app.kubernetes.io/name=${{ values.name }}
+    backstage.io/kubernetes-namespace: default
+    janus-idp.io/tekton: ${{ values.name }}
+    tekton.dev/ci-cd: "true"
+    argocd/app-name: ${{ values.name }}-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>

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

@@ -0,0 +1,62 @@
+{
+  "name": "${{ values.name }}",
+  "private": true,
+  "version": "1.0.0",
+  {% if values.buildTool == 'vite' -%}
+  "type": "module",
+  {%- endif %}
+  "scripts": {
+    {% if values.buildTool == 'vite' -%}
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+    {%- else -%}
+    "dev": "webpack serve --mode development",
+    "build": "webpack --mode production",
+    "lint": "eslint src/ --ext js,jsx --report-unused-disable-directives --max-warnings 0"
+    {%- endif %}
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+    {%- if values.stateManagement == 'redux' -%},
+    "@reduxjs/toolkit": "^2.2.5",
+    "react-redux": "^9.1.2"
+    {%- elif values.stateManagement == 'zustand' -%},
+    "zustand": "^4.5.2"
+    {%- endif %}
+    {%- if values.dataFetching == 'react-query' -%},
+    "@tanstack/react-query": "^5.40.1"
+    {%- endif %}
+  },
+  "devDependencies": {
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6"
+    {%- if values.buildTool == 'vite' -%},
+    "vite": "^5.2.11",
+    "@vitejs/plugin-react": "^4.2.1"
+    {%- else -%},
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4",
+    "html-webpack-plugin": "^5.6.0",
+    "babel-loader": "^9.1.3",
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "style-loader": "^4.0.0",
+    "css-loader": "^7.1.1"
+    {%- endif %}
+    {%- if values.styling == 'tailwind' -%},
+    "tailwindcss": "^3.4.3",
+    "postcss": "^8.4.38",
+    "autoprefixer": "^10.4.19"
+    {%- if values.buildTool == 'webpack' -%},
+    "postcss-loader": "^8.1.1"
+    {%- endif %}
+    {%- endif %}
+  }
+}

apps/portal/examples/multi-option-react-template/content/source/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}