Skip to main content

​
Overview

The Generations Dashboard provides a centralized location to view, manage, and edit all your Shopify extensions and functions. It offers features similar to the Shopify Partner Dashboard with additional development tools.

​
Accessing the Dashboard

1

Navigate to Generations

Click Generations in the main navigation menu or visit /dashboard/generations
2

View Your Apps

See all your generated extensions and functions in one place

​
Features

​
📊 Overview Statistics

The dashboard displays key metrics at a glance:
  • Total Generations: All extensions and functions you’ve created
  • Extensions: UI extensions (checkout, post-purchase, etc.)
  • Functions: Backend functions (discounts, shipping, etc.)
  • Deployed: Successfully deployed generations

​
🔍 Filtering & Search

Filter generations by:
  • Type: All, Extensions, or Functions
  • Status: All, Deployed, or Failed

​
📦 Generation Cards

Each generation shows:
  • Name and description
  • Type badge (Extension or Function)
  • Deployment status with color coding
  • Creation timestamp
  • GitHub branch information
  • Validation attempt count

​
🛠️ Management Actions

​
Merchant App Management

At the top, manage your entire merchant app:
  • View Live: Open deployed application
  • GitHub: View repository
  • Edit in Codespace: Open full app in VS Code browser editor

​
Individual Generation Actions

For each generation:
  • View Live: Open deployment URL
  • Edit in Codespace: Edit specific generation
  • View Details: See full generation information

​
Detail View

Click any generation to view comprehensive details:

​
Status Section

  • Real-time deployment status
  • Current deployment step
  • Visual status indicators

​
Code Section

  • View generated source code
  • See file structure
  • Review configuration

​
Deployment Logs

  • Timestamped log entries
  • Log level indicators (info, warn, error)
  • Detailed error messages

​
Codespaces Management

Active Codespaces for the repository:
  • Current State: Available, Starting, Shutdown
  • Machine Type: CPU and memory allocation
  • Last Used: Activity timestamp
  • Actions:
    • Open Codespace in browser
    • Stop running Codespace
    • Delete Codespace (with confirmation)

​
Version History

If a generation has been edited:
  • View parent generation
  • See all versions in the edit chain
  • Navigate between versions

​
Metadata Sidebar

  • Creation date and time
  • Repository information
  • Branch name
  • Validation attempt count

​
Codespaces Integration

Codespaces provide a full VS Code environment in your browser with pre-installed tools.

​
Creating a Codespace

From the dashboard, click Edit in Codespace:
  1. System checks for existing Codespaces
  2. Creates new Codespace if needed (or reuses existing)
  3. Opens VS Code in a new browser tab

​
Pre-installed Tools

All Codespaces include:
  • Node.js 20 with pnpm
  • Shopify CLI
  • Rust toolchain (for functions)
  • VS Code extensions:
    • Shopify Liquid
    • Rust Analyzer
    • GraphQL
    • Prettier, ESLint
    • Tailwind CSS IntelliSense

​
Managing Codespaces

Each generation’s detail page shows all active Codespaces for that repository.States:
  • 🟢 Available: Ready to use
  • 🔵 Starting/Stopping: In transition
  • ⚫ Shutdown: Not running
Click the stop icon to shut down a running Codespace. This frees up resources while preserving your work.Codespaces auto-shutdown after 30 minutes of inactivity.
Click the delete icon and confirm to permanently remove a Codespace.
Deleting a Codespace removes the container but not your repository code. Any uncommitted changes will be lost.

​
Workflow Examples

​
Editing an Extension

1

Find Your Extension

Go to Generations dashboard and locate your extension
2

Open in Codespace

Click “Edit in Codespace” to launch VS Code
3

Make Changes

Edit code in the browser with full IDE features
4

Test & Deploy

Use the integrated terminal to run shopify app dev or shopify app deploy

​
Debugging a Failed Deployment

1

Open Detail View

Click the failed generation card
2

Review Logs

Check deployment logs for error messages
3

Check Code

View the generated code for issues
4

Edit & Redeploy

Open in Codespace to fix issues and redeploy

​
Managing Resources

1

View All Codespaces

Open any generation detail page
2

Stop Unused Codespaces

Stop Codespaces you’re not actively using
3

Clean Up

Delete old Codespaces to free up quota

​
API Access

All dashboard features are available via API: 
# List generations
GET /api/generate/list

# Get generation details
GET /api/generate/{id}/status

# List Codespaces for a repo
GET /api/codespaces/list?repoFullName=owner/repo

# Stop a Codespace
POST /api/codespaces/manage
{
  "codespaceName": "special-space-xyz",
  "action": "stop"
}

# Delete a Codespace
POST /api/codespaces/manage
{
  "codespaceName": "special-space-xyz",
  "action": "delete"
}

​
Best Practices

Regular Cleanup

Delete unused Codespaces to stay within GitHub free tier limits

Use Filters

Filter by status to quickly find failed deployments

Version Tracking

Use version history to track changes across edits

Monitor Logs

Check deployment logs for warnings before they become errors

​
Troubleshooting

Possible causes:
  • GitHub API rate limit reached
  • Repository is private (requires GitHub Pro)
  • Invalid GitHub token permissions
Solutions:
  • Wait for rate limit to reset
  • Make repository public or upgrade to GitHub Pro
  • Regenerate GitHub token with codespace scope
Logs are only available after deployment completes. Check back once the status shows “deployed” or “failed”.
Troubleshooting steps:
  1. Check filters - you may have “Deployed” or “Functions” filter active
  2. Refresh the page
  3. Check your Projects page to ensure you’re viewing the correct project
Currently, generations can only be viewed, not deleted from the dashboard. Contact support if you need to remove a generation.

​
What’s Next?

Edit in Codespaces

Learn more about using GitHub Codespaces for development

Deployment Pipeline

Understand the automated deployment process

API Reference

Integrate generations management into your workflows

Best Practices

Advanced tips for managing large numbers of extensions