Add frontend CosmoView

Author: ljfp

.github/workflows/deploy.yml

@@ -13,10 +13,27 @@ jobs:
       PYTHON_BIN: ${{ secrets.EC2_PYTHON_BIN }}
       SERVICE_NAME: ${{ secrets.EC2_SERVICE_NAME }}
       UVICORN_PORT: ${{ secrets.EC2_UVICORN_PORT }}
+      EC2_HOST: ${{ secrets.EC2_HOST }}
+      EC2_USER: ${{ secrets.EC2_USER }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
 
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+          cache-dependency-path: CosmoView/package-lock.json
+
+      - name: Install frontend dependencies
+        working-directory: CosmoView
+        run: npm ci
+
+      - name: Build frontend bundle
+        working-directory: CosmoView
+        run: npm run build
+
       - name: Start SSH agent
         uses: webfactory/ssh-agent@v0.9.0
         with:
@@ -25,15 +42,15 @@ jobs:
       - name: Add EC2 host to known_hosts
         run: |
           mkdir -p ~/.ssh
-          ssh-keyscan -H "${{ secrets.EC2_HOST }}" >> ~/.ssh/known_hosts
+          ssh-keyscan -H "${{ env.EC2_HOST }}" >> ~/.ssh/known_hosts
 
       - name: Ensure remote application directory exists
         env:
           REMOTE_APP_DIR: ${{ env.APP_DIR }}
         run: |
           set -euo pipefail
           APP_DIR="${REMOTE_APP_DIR:-/opt/nasa-sky-explorer}"
-          ssh "${{ secrets.EC2_USER }}@${{ secrets.EC2_HOST }}" "sudo mkdir -p ${APP_DIR}"
+          ssh "${{ env.EC2_USER }}@${{ env.EC2_HOST }}" "sudo mkdir -p ${APP_DIR}"
 
       - name: Sync repository to EC2
         env:
@@ -44,16 +61,17 @@ jobs:
           TEMP_DIR="/tmp/nasa-sky-explorer-deploy-$$"
           
           # Sync to temp directory first
-          ssh "${{ secrets.EC2_USER }}@${{ secrets.EC2_HOST }}" "mkdir -p ${TEMP_DIR}"
+          ssh "${{ env.EC2_USER }}@${{ env.EC2_HOST }}" "mkdir -p ${TEMP_DIR}"
           rsync -az --delete \
             --exclude ".git" \
             --exclude ".github/" \
             --exclude ".venv/" \
+            --exclude "CosmoView/node_modules/" \
             --exclude "logs/" \
-            ./ "${{ secrets.EC2_USER }}@${{ secrets.EC2_HOST }}:${TEMP_DIR}/"
+            ./ "${{ env.EC2_USER }}@${{ env.EC2_HOST }}:${TEMP_DIR}/"
           
           # Move from temp to final location with sudo
-          ssh "${{ secrets.EC2_USER }}@${{ secrets.EC2_HOST }}" "sudo rsync -a --delete ${TEMP_DIR}/ ${APP_DIR}/ && rm -rf ${TEMP_DIR}"
+          ssh "${{ env.EC2_USER }}@${{ env.EC2_HOST }}" "sudo rsync -a --delete ${TEMP_DIR}/ ${APP_DIR}/ && rm -rf ${TEMP_DIR}"
 
       - name: Install Python dependencies and restart the service
         env:
@@ -68,5 +86,5 @@ jobs:
           SERVICE_NAME="${REMOTE_SERVICE:-nasaspaceapps}"
           UVICORN_PORT="${REMOTE_PORT:-80}"
 
-          ssh "${{ secrets.EC2_USER }}@${{ secrets.EC2_HOST }}" \
+          ssh "${{ env.EC2_USER }}@${{ env.EC2_HOST }}" \
             "cd '${APP_DIR}' && sudo APP_DIR='${APP_DIR}' PYTHON_BIN='${PYTHON_BIN}' SERVICE_NAME='${SERVICE_NAME}' UVICORN_PORT='${UVICORN_PORT}' bash deploy/remote_deploy.sh"

README.md

@@ -4,21 +4,30 @@ A FastAPI-powered prototype that serves an interactive Aladin Lite interface for
 
 ## Quickstart
 
-1. Create a virtual environment and install the dependencies:
+1. Build the CosmoView frontend (repeat whenever you change the React app):
 
    ```bash
-   python -m venv .venv
+   cd CosmoView
+   npm install
+   npm run build
+   cd ..
+   ```
+
+2. Create a virtual environment and install the FastAPI dependencies:
+
+   ```bash
+   python3 -m venv .venv
    source .venv/bin/activate
    pip install -r requirements.txt
    ```
 
-2. Launch the development server:
+3. Launch the development server:
 
    ```bash
    uvicorn src.server:app --reload
    ```
 
-3. Open <http://127.0.0.1:8000/> in your browser and click **“Launch the viewer.”** The FITS explorer lives at <http://127.0.0.1:8000/aladin>.
+4. Open <http://127.0.0.1:8000/> in your browser. The CosmoView landing page now lives at the root route with an **“Explore the Universe”** button that jumps directly to the Aladin viewer at <http://127.0.0.1:8000/aladin>.
 
 ### Working with FITS datasets
 
@@ -42,12 +51,14 @@ ruff check .
 
 ```
 NASASpaceAppsChallenge2025/
+├── CosmoView/                          # React + Vite front-end project
+│   ├── client/src/                     # UI components and pages
+│   └── dist/public/                    # Production build served by FastAPI
 ├── requirements.txt                    # FastAPI and Uvicorn dependencies
 ├── src/
 │   ├── __init__.py
-│   └── server.py                       # FastAPI application serving the HTML page
+│   └── server.py                       # FastAPI application that serves both front-ends
 ├── web/
-│   ├── index.html                      # Landing page served at the root route
 │   ├── aladin.html                     # FITS explorer with Aladin Lite integration
 │   └── styles.css                      # Styling for the viewer interface
 ├── deploy/
@@ -70,12 +81,19 @@ Every push to `main` triggers the GitHub Actions workflow in `.github/workflows/
 pipeline performs the following steps:
 
 1. Checks out the latest code.
-2. Copies the repository to `/opt/nasa-sky-explorer` on your EC2 instance via `rsync`.
-3. Creates a dedicated service user (`nasaapp`) if it doesn't exist.
-4. Sets proper ownership and permissions for the application directory.
-5. Installs Python dependencies in a virtual environment owned by the service user.
-6. Applies necessary capabilities to bind to port 80 (if running on a privileged port).
-7. Restarts the systemd service or launches Uvicorn as a background process.
+2. Installs Node.js dependencies for the CosmoView frontend and builds the production bundle.
+3. Copies the repository to `/opt/nasa-sky-explorer` on your EC2 instance via `rsync` (skipping
+   local build artefacts such as `node_modules/`).
+4. Creates a dedicated service user (`nasaapp`) if it doesn't exist.
+5. Sets proper ownership and permissions for the application directory.
+6. Installs Python dependencies in a virtual environment owned by the service user.
+7. Installs CosmoView dependencies on the EC2 host and rebuilds the Vite bundle to guarantee fresh
+   assets.
+8. Applies necessary capabilities to bind to port 80 (if running on a privileged port).
+9. Restarts the systemd service or launches Uvicorn as a background process.
+
+> **Prerequisite:** Ensure Node.js (v20 or newer recommended) is available on the EC2 instance so
+> the deployment script can run `npm install` and `npm run build` inside `CosmoView/`.
 
 ### Required GitHub secrets
 

deploy/remote_deploy.sh

@@ -6,6 +6,10 @@ PYTHON_BIN="${PYTHON_BIN:-/usr/bin/python3}"
 SERVICE_NAME="${SERVICE_NAME:-nasaspaceapps}"
 UVICORN_PORT="${UVICORN_PORT:-80}"
 APP_USER="${APP_USER:-nasaapp}"
+FRONTEND_DIR="${FRONTEND_DIR:-CosmoView}"
+NPM_BIN="${NPM_BIN:-npm}"
+
+cd "${APP_DIR}"
 
 # Create dedicated service user if it doesn't exist
 if ! id "${APP_USER}" >/dev/null 2>&1; then
@@ -31,6 +35,32 @@ pip install -r requirements.txt
 deactivate || true
 EOSCRIPT
 
+# Build the frontend bundle
+FRONTEND_PATH="${APP_DIR}/${FRONTEND_DIR}"
+if [ ! -d "${FRONTEND_PATH}" ]; then
+  echo "Error: Frontend directory ${FRONTEND_PATH} not found."
+  exit 1
+fi
+
+if ! command -v "${NPM_BIN}" >/dev/null 2>&1; then
+  echo "Error: npm command '${NPM_BIN}' not found. Install Node.js/npm or set NPM_BIN." >&2
+  exit 1
+fi
+
+echo "Installing frontend dependencies with ${NPM_BIN}..."
+sudo -u "${APP_USER}" bash -c "cd '${FRONTEND_PATH}' && ${NPM_BIN} install"
+
+echo "Building frontend production bundle..."
+sudo -u "${APP_USER}" bash -c "cd '${FRONTEND_PATH}' && ${NPM_BIN} run build"
+
+FRONTEND_BUILD_DIR="${FRONTEND_PATH}/dist/public"
+if [ ! -d "${FRONTEND_BUILD_DIR}" ]; then
+  echo "Error: Frontend build directory ${FRONTEND_BUILD_DIR} was not created." >&2
+  exit 1
+fi
+
+chown -R "${APP_USER}:${APP_USER}" "${FRONTEND_PATH}"
+
 # Apply capability for port binding if needed (for systemd < 229)
 # Modern systemd (>= 229) uses AmbientCapabilities in the service file
 if [ "${UVICORN_PORT}" -lt 1024 ]; then

src/server.py

@@ -7,8 +7,9 @@
 from fastapi.staticfiles import StaticFiles
 
 BASE_DIR = Path(__file__).resolve().parent.parent
+FRONTEND_DIR = BASE_DIR / "CosmoView" / "dist" / "public"
 WEB_DIR = BASE_DIR / "web"
-INDEX_PATH = WEB_DIR / "index.html"
+INDEX_PATH = FRONTEND_DIR / "index.html"
 ALADIN_PATH = WEB_DIR / "aladin.html"
 FAVICON_SVG = (
     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>\n"
@@ -18,8 +19,22 @@
     "</svg>"
 )
 
+if not INDEX_PATH.exists():
+    raise RuntimeError(
+        "Frontend bundle not found. Run 'npm run build' in the CosmoView directory "
+        "to generate dist/public before starting the API server."
+    )
+
+ASSETS_DIR = FRONTEND_DIR / "assets"
+if not ASSETS_DIR.exists():
+    raise RuntimeError(
+        "Frontend assets directory missing. Ensure the CosmoView build succeeded "
+        "and dist/public/assets is present."
+    )
+
 app = FastAPI(title="NASA Sky Explorer Prototype")
-app.mount("/static", StaticFiles(directory=WEB_DIR), name="static")
+app.mount("/assets", StaticFiles(directory=ASSETS_DIR), name="frontend-assets")
+app.mount("/static", StaticFiles(directory=WEB_DIR), name="legacy-static")
 
 
 def _read_html(path: Path) -> str: