Hypermode Apps

apps/deploy.mdx

@@ -0,0 +1,252 @@
+---
+title: "Deploy"
+description: "Deploy your Apps to production with Hypermode"
+"og:title": "Deploy - Apps"
+---
+
+Once you've developed and tested your App locally, you're ready to deploy it to
+production on Hypermode. This guide walks you through creating an app in the
+Hypermode console and deploying your Modus code.
+
+## Prerequisites
+
+Before deploying, ensure you have:
+
+- A completed Modus app (see the [Develop guide](/develop) for setup)
+- A GitHub account and repository
+
+## Step 1: Create Your Workspace
+
+First, go to [hypermode.com](https://hypermode.com) and create your workspace.
+
+<img
+  src="/images/apps/workspace-creation.png"
+  alt="Create workspace interface showing workspace name input field"
+/>
+
+Enter a name for your workspace and click "Create workspace". Workspaces are
+where you and your team manage apps in Hypermode.
+
+## Step 2: Create a New App
+
+From the dashboard, click on "Apps":
+
+<img
+  src="/images/apps/workspace-landing.png"
+  alt="Hypermode dashboard showing Apps option"
+/>
+
+Click "Import your Modus app" to start creating your app.
+
+## Step 3: Configure Your App
+
+Fill in the app configuration details:
+
+<img
+  src="/images/apps/app-create.png"
+  alt="Import Modus app configuration form with app name, GitHub repository, and location fields"
+/>
+
+Configure your app settings:
+
+- **Modus app name**: Enter your app name (e.g., `my-modus-app`)
+- **GitHub Repository**: Select your existing repository from the dropdown
+- **Modus app location**: Choose your deployment region (e.g., Portland)
+
+If you don't have a repository yet, you can create one first.
+
+## Step 4: Create Your GitHub Repository (if needed)
+
+If you need to create a new repository:
+
+<img
+  src="/images/apps/github-create.png"
+  alt="GitHub repository creation interface with repository name field"
+/>
+
+Fill in your repository details:
+
+- Choose the repository owner (your organization or personal account)
+- Enter a memorable repository name (e.g., `my-modus-app`)
+- Add an optional description
+
+Then return to the app configuration and select your newly created repository.
+
+## Step 5: View Your App Configuration
+
+Once your app is created, you'll see your app's configuration:
+
+Once your app is created, you'll see your app's configuration:
+
+<img
+  src="/images/apps/console-app.png"
+  alt="App details panel showing endpoint, GitHub repository, and API key information"
+/>
+
+Your app is now configured with:
+
+- **Endpoint**: Your production GraphQL endpoint
+- **GitHub repository**: Connected repository for deployments
+- **API key**: Authentication key for your app
+
+## Deployment Options
+
+You have two ways to deploy your app to Hypermode:
+
+### Option 1: Automatic Deployment via GitHub Actions
+
+Add a GitHub Actions workflow to your repository for automatic deployments.
+
+Create `.github/workflows/ci-modus-build.yml`:
+
+```yaml
+name: ci-modus-build
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+
+      - name: Setup Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.23.1"
+
+      - name: Setup TinyGo
+        uses: acifani/setup-tinygo@v2
+        with:
+          tinygo-version: "0.34.0"
+
+      - name: Build project
+        run: npx -p @hypermode/modus-cli -y modus build
+```
+
+Once the workflow is added, **any push to the `main` branch automatically
+deploys your app**:
+
+```bash
+# Commit your changes
+git add .
+git commit -m "Deploy my Modus app"
+
+# Push to trigger deployment
+git push origin main
+```
+
+### Option 2: Deploy with Hyp CLI
+
+You can also deploy directly using the Hyp CLI for immediate deployments:
+
+```bash
+# Install the Hyp CLI
+npm install -g @hypermode/hyp-cli
+
+# Login to Hypermode
+hyp login
+
+# Deploy your current app
+hyp deploy
+```
+
+The Hyp CLI deployment:
+
+- Builds your app locally
+- Uploads it directly to Hypermode
+- Provides immediate feedback and logs
+- Useful for testing or urgent deployments
+
+Both methods automatically:
+
+1. Build your Modus app via GitHub Actions or locally
+2. Deploy to your Hypermode endpoint
+3. Make your functions available via GraphQL
+
+Deployment output:
+
+```
+🚀 Deployment started for commit abc123d
+📦 Building application...
+✓ Functions compiled successfully
+🌐 Deploying to production...
+✓ Health checks passed
+🎉 Deployment complete!
+
+Endpoint: https://my-modus-app-my-workspace-hurx1.hypermode.app/graphql
+```
+
+## Production Features
+
+Your deployed app includes:
+
+- **Automatic scaling**: Functions scale to zero when not in use
+- **HTTPS endpoints**: Secure GraphQL API
+- **Bearer token auth**: API key authentication
+- **Real-time logs**: Monitor function execution in the Activity tab
+- **Environment variables**: Manage secrets and configuration
+
+### Viewing Function Activity
+
+Monitor your function executions in the Activity tab:
+
+<img
+  src="/images/apps/console-logs.png"
+  alt="Function logs showing execution times and status"
+/>
+
+You can see:
+
+- Function execution history
+- Response times and duration
+- Success/error status
+- Execution timestamps
+
+### Environment Variables
+
+Configure environment variables in the Environment variables tab:
+
+<img
+  src="/images/apps/console-envs.png"
+  alt="Environment variables configuration panel"
+/>
+
+Set production environment variables for:
+
+- API keys and secrets
+- Database connection strings
+- Feature flags
+- External service configurations
+
+## Testing Your Deployment
+
+Test your deployed functions via GraphQL:
+
+```bash
+curl -X POST https://your-app-endpoint.hypermode.app/graphql \
+  -H "Authorization: Bearer YOUR_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{"query": "{ sayHello(name: \"Production\") }"}'
+```
+
+## Next Steps
+
+With your app deployed, your development workflow becomes:
+
+1. Develop and test locally with `modus dev`
+2. Commit and push changes to GitHub
+3. Automatic deployment to production
+4. Monitor via Hypermode console
+
+Your Modus app is now live and ready to handle production traffic with automatic
+scaling, built-in observability, and secure endpoints.