Merge pull request back-stack#3 from vrabbi-backstage/browser-codespace-support

Refactor for browser based codespace support

Author: vrabbi

.devcontainer/README.md .devcontainer/DESKTOP_BASED_CODESPACE.md.devcontainer/README.md renamed to .devcontainer/DESKTOP_BASED_CODESPACE.md

@@ -2,39 +2,9 @@
 
 This directory contains the configuration for running the Backstack Demo in GitHub Codespaces.
 
-## What's Included
-
-The devcontainer is configured with:
-
-- **Node.js 20**: The required Node.js version for Backstage
-- **kubectl**: Kubernetes command-line tool
-- **helm**: Kubernetes package manager
-- **kind**: Kubernetes in Docker (for local cluster creation)
-- **Docker-in-Docker**: Required for kind and container operations
-- **Yarn 4**: Package manager (enabled via corepack)
-- **crossplane**: CLI for interacting with crossplane
-- **kyverno**: CLI for interacting with Kyverno
-- **argocd**: CLI for interacting with ArgoCD
-
-## Pre-installed Extensions
-
-The following VS Code extensions are automatically installed:
-- ESLint
-- Prettier
-- Kubernetes Tools
-- YAML support
-
-## Environment Setup
-
-The devcontainer automatically:
-1. Enables yarn via corepack
-2. Installs Backstage dependencies
-3. Configures Node.js environment
-4. Forwards ports 3000 (frontend) and 7007 (backend)
-5. Creates a Kind Cluster
-6. Installs Kyverno, ArgoCD, and Crossplane
-7. Configures Crossplane and Kyverno
-8. Setups RBAC for Backstage in the Kubernetes Cluster
+## Important Notes
+* While it can work with the default 2 CPU Core instance of a codespace, it is highly recommended to use at minimum the 4 CPU Core instance type for better performance and speed
+* When the browser opens up for backstage after starting it, if it opens up to http://127.0.0.1:3000 change this to http://localhost:3000 as otherwise the github authentication flow will fail
 
 ## Getting Started
 
@@ -47,7 +17,7 @@ The devcontainer automatically:
     * Authorization Callback URL: http://localhost:7007/api/auth/github
 3. Copy the Client ID
 4. Create a Client Secret and copy it
-5. Update first User Manifests Username from vrabbi to your Github Username in [the relevant file](./backstage/examples/org.yaml)
+5. Update first User Manifests Username from vrabbi to your Github Username in [the relevant file](../backstage/examples/org.yaml)
 
 ### After the Codespace starts
 1. **Set up GitHub credentials** (required for Backstage):
@@ -70,7 +40,8 @@ The devcontainer automatically:
    ```
 3. **Start Backstage**:
    ```bash
-   cd backstage
+   cd backstage/src
+   yarn install
    export NODE_OPTIONS="--max_old_space_size=8192 --no-node-snapshot"
    export NODE_TLS_REJECT_UNAUTHORIZED=0
    yarn start
@@ -81,3 +52,4 @@ The devcontainer automatically:
 - The environment includes Docker-in-Docker support, allowing you to run kind clusters within the Codespace
 - All prerequisites mentioned in the main README are pre-installed
 - The workspace is configured with recommended VS Code settings for the project
+

.devcontainer/WEB_BASED_CODESPACE.md

@@ -0,0 +1,53 @@
+# Web Based GitHub Codespaces Configuration
+
+This directory contains the configuration for running the Backstack Demo in GitHub Codespaces.
+
+## Getting Started
+
+### While the Codespace starts:
+
+1. [Create Github PAT](https://github.com/settings/tokens/new)
+2. [Create Github Oauth App](https://github.com/settings/applications/new)
+
+    * Get the values by running in the terminal of this codespace the following commands:
+    ```bash
+    echo "Application Name: Backstage"
+    echo "Homepage URL: https://${CODESPACE_NAME}-443.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}"
+    echo "Authorization Callback URL: https://${CODESPACE_NAME}-443.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}/api/auth/github"
+    ```
+3. Copy the Client ID
+4. Create a Client Secret and copy it
+
+### After the Codespace starts
+1. **Set up GitHub credentials** (required for Backstage):
+   ```bash
+   export GITHUB_TOKEN="your_github_token"
+   export GITHUB_CLIENT_ID="your_oauth_app_client_id"
+   export GITHUB_CLIENT_SECRET="your_oauth_app_client_secret"
+   export GITHUB_OWNER="your_github_username"
+   export GITHUB_REPO="your_repo_name"
+   ```
+2. **Configure Argo AppSet**:
+   ```bash
+   envsubst <argo/app-set-template.yaml > argo/app-set-rendered.yaml
+   kubectl apply -f argo/app-set-rendered.yaml
+   ```
+3. **Export Kubernetes Cluster Details**:
+   ```bash
+   export KUBERNETES_SERVICE_ACCOUNT_TOKEN=`kubectl get secret -n backstage-system backstage-token -o jsonpath='{.data.token}' | base64 --decode`
+   ```
+4. **Render Backstage Values File**:
+   ```bash
+   envsubst <backstage/values-templated.yaml > backstage/values-rendered.yaml
+   ```
+3. **Deploy Backstage**:
+   ```bash
+   helm repo add backstage https://backstage.github.io/charts
+   helm upgrade --install backstack backstage/backstage -n backstage-system -f backstage/values-rendered.yaml --wait
+   ```
+
+## Notes
+
+- The environment includes Docker-in-Docker support, allowing you to run kind clusters within the Codespace
+- All prerequisites mentioned in the main README are pre-installed
+- The workspace is configured with recommended VS Code settings for the project

.devcontainer/devcontainer.json

@@ -39,14 +39,10 @@
     }
   },
   "postCreateCommand": "bash .devcontainer/post-create.sh",
-  "forwardPorts": [3000, 7007],
+  "forwardPorts": [443],
   "portsAttributes": {
-    "3000": {
-      "label": "Backstage Frontend",
-      "onAutoForward": "notify"
-    },
-    "7007": {
-      "label": "Backstage Backend",
+    "443": {
+      "label": "Backstage",
       "onAutoForward": "notify"
     }
   },

.devcontainer/post-create.sh

@@ -2,13 +2,13 @@
 set -e
 
 echo "Setting up Backstack Demo environment..."
-# Navigate to backstage directory and install dependencies
-echo "Installing Backstage dependencies..."
-cd backstage
-yarn install
-cd ..
-echo "Create Kind Cluster..."
-kind create cluster --name backstack-demo 
+kind create cluster --name backstack-demo --config kind/config.yaml
+
+echo "Install Cert Manager..."
+kubectl apply -f https://github.com/cert-manager/cert-manager/releases/download/v1.19.1/cert-manager.yaml
+
+echo "Install Ingres NGINX..."
+kubectl apply -f https://kind.sigs.k8s.io/examples/ingress/deploy-ingress-nginx.yaml
 
 echo "Install Kyverno..."
 helm repo add kyverno https://kyverno.github.io/kyverno/
@@ -65,10 +65,17 @@ kubectl apply -f crossplane/06-examples --recursive
 echo "Configure Kyverno..."
 kubectl apply -f kyverno/
 
+echo "Create Cluster Issuer..."
+kubectl apply -f cert-manager/ca-issuer.yaml
+
+echo "Install Metrics Server..."
+kubectl apply -k metrics-server/
+
 echo "Setup complete!"
 echo ""
 echo "Next steps:"
 echo "  1. Set up your environment variables (GITHUB_TOKEN, GITHUB_CLIENT_ID, etc.)"
 echo "  2. Render and Apply ArgoCD AppSet"
-echo "  3. Start Backstage: cd backstage && yarn start"
+echo "  3. Render Backstage values file"
+echo "  4. Deploy Backstage"
 echo ""

.gitignore

@@ -1,55 +1,56 @@
 # macOS
-backstage/.DS_Store
+backstage/source/.DS_Store
 
 # Logs
-backstage/logs
-backstage/*.log
-backstage/npm-debug.log*
-backstage/yarn-debug.log*
+backstage/source/logs
+backstage/source/*.log
+backstage/source/npm-debug.log*
+backstage/source/yarn-debug.log*
 yarn-error.log*
 
 # Coverage directory generated when running tests with coverage
-backstage/coverage
+backstage/source/coverage
 
 # Dependencies
-backstage/node_modules/
+backstage/source/node_modules/
 
 # Yarn files
-backstage/.pnp.*
-backstage/.yarn/*
-!backstage/.yarn/patches
-!backstage/.yarn/plugins
-!backstage/.yarn/releases
-!backstage/.yarn/sdks
-!backstage/.yarn/versions
+backstage/source/.pnp.*
+backstage/source/.yarn/*
+!backstage/source/.yarn/patches
+!backstage/source/.yarn/plugins
+!backstage/source/.yarn/releases
+!backstage/source/.yarn/sdks
+!backstage/source/.yarn/versions
 
 # Node version directives
-backstage/.nvmrc
+backstage/source/.nvmrc
 
 # dotenv environment variables file
-backstage/.env
-backstage/.env.test
+backstage/source/.env
+backstage/source/.env.test
 
 # Build output
-backstage/dist
-backstage/dist-types
+backstage/source/dist
+backstage/source/dist-types
 
 # Temporary change files created by Vim
-backstage/*.swp
+backstage/source/*.swp
 
 # MkDocs build output
-backstage/site
+backstage/source/site
 
 # Sensitive credentials
-backstage/*-credentials.yaml
+backstage/source/*-credentials.yaml
 
 # vscode database functionality support files
-backstage/*.session.sql
+backstage/source/*.session.sql
 
 # E2E test reports
-backstage/e2e-test-report/
+backstage/source/e2e-test-report/
 
 # Cache
-backstage/.cache/
+backstage/source/.cache/
 
-argo/app-set-rendered.yaml
+argo/app-set-rendered.yaml
+backstage/values-rendered.yaml

.vscode/mcp.json

@@ -0,0 +1,8 @@
+{
+	"servers": {
+		"dev": {
+			"url": "https://localhost/api/mcp-actions/v1",
+			"type": "http"
+		}
+	}
+}