Edit with GitHub Codespaces

Overview

After generating a Shopify extension with Synapse, you can edit the code in a complete development environment directly in your browser - no local setup required.

Perfect for both beginners and developers
Click one button to open VS Code in your browser with everything pre-configured.

What You Get

Instant Development Environment

VS Code in Browser: Full-featured editor with familiar interface
Pre-installed Tools: Node.js, Shopify CLI, Rust toolchain (for Functions)
Live Previews: Port forwarding with instant HTTPS URLs
Auto-deployment: Commit changes → GitHub Actions deploys automatically

Pre-configured Extensions

Shopify Ruby LSP
GraphQL support
Rust Analyzer (for Functions)
Prettier & ESLint
Tailwind CSS IntelliSense
GitHub Pull Requests

How to Use

1. Generate Your Extension

"Create a discount function that gives 10% off orders over $100"

Wait for deployment to complete.

2. Open Codespace

After successful deployment, click the “Edit in Codespace” button:

This will:

Create a new Codespace (or reuse existing)
Open VS Code in your browser
Install all dependencies automatically
Set up your development environment (~60 seconds first time)

3. Make Changes

For Beginners:

Edit files using the visual editor
Use the Source Control panel to commit (no command line needed)
Push changes with the sync button

For Developers:

Use the integrated terminal for any command
Run shopify app dev for local preview
Debug with breakpoints
Build Rust functions: cargo build --target wasm32-unknown-unknown

4. Preview Changes

Start the development server:

shopify app dev

Codespaces automatically forwards port 3000 and provides an HTTPS URL. Click the notification to preview your app.

5. Deploy Changes

Commit and push your changes:

git add .
git commit -m "Updated discount logic"
git push

GitHub Actions automatically deploys your changes to Shopify.

Or use the VS Code Source Control panel - no terminal required!

Development Workflow

Generate

Use Synapse to generate your extension with AI

Edit

Click “Edit in Codespace” to open full dev environment

Preview

Run shopify app dev and test changes live

Deploy

Commit and push - automatic deployment via GitHub Actions

Working with Rust Functions

For Shopify Functions written in Rust:

Build Your Function

cd extensions/your-function-name
cargo build --target wasm32-unknown-unknown --release

Watch Mode

Auto-rebuild on file changes:

cargo watch -x 'build --target wasm32-unknown-unknown --release'

Deploy

shopify app deploy

The Rust toolchain and wasm32-unknown-unknown target are pre-installed.

Port Forwarding

Codespaces automatically forwards these ports:

Port	Service	Access
3000	Shopify App Dev Server	Click notification for HTTPS URL
9292	ngrok/Cloudflare Tunnel	Auto-forwarded

Machine Types

Codespaces automatically selects the right machine based on your project:

Project Type	Machine	Specs
TypeScript Extensions	Basic	4 cores, 8GB RAM
Rust Functions	Standard	4 cores, 16GB RAM
Complex Projects	Standard	4 cores, 16GB RAM

Cost & Limits

Free Tier

60 hours/month of usage (Free GitHub account)
120 hours/month (GitHub Pro)
15GB storage

Auto-Shutdown

Codespaces automatically shut down after 30 minutes of inactivity to save your hours.

Reusing Codespaces

Click “Edit in Codespace” again to reopen your existing environment - much faster than creating a new one!

Advanced Usage

Custom Configuration

Edit .devcontainer/devcontainer.json to customize your environment:

{
  "name": "My Custom Environment",
  "postCreateCommand": "npm install -g my-tool",
  "forwardPorts": [3000, 8080],
  "customizations": {
    "vscode": {
      "extensions": ["my-extension-id"]
    }
  }
}

Rebuild container: Cmd/Ctrl+Shift+P → “Rebuild Container”

Debugging

TypeScript/JavaScript:

Set breakpoints in editor
Use VS Code’s debug panel
Attach to running processes

Rust:

Use vadimcn.vscode-lldb extension (pre-installed)
Set breakpoints in Rust code
Debug WASM builds

Terminal Commands

All standard commands work:

# Check environment
node --version
rustc --version
shopify version

# Install packages
pnpm install
cargo add tokio

# Run tests
pnpm test
cargo test

# View logs
shopify app logs

Troubleshooting

Codespace Won’t Start

Issue: “Failed to create codespace” Solution:

Check if you’ve exceeded free tier hours
Wait for next billing cycle or upgrade to Pro

Port Forwarding Not Working

Issue: Can’t access forwarded ports Solution:

Check notification tray for forwarded port URLs
Some corporate networks block port forwarding
Use GitHub’s built-in proxy (automatically configured)

Build Errors

Issue: Rust build fails Solution:

# Verify target is installed
rustup target list --installed

# Should show: wasm32-unknown-unknown

# If missing, install:
rustup target add wasm32-unknown-unknown

Slow Performance

Issue: Editor feels sluggish Solution:

Close unused tabs
Restart Codespace: Cmd/Ctrl+Shift+P → “Codespaces: Restart”
Consider upgrading machine type (in advanced settings)

Best Practices

Commit Often

Changes are only saved when committed to git. Commit frequently to avoid losing work.

Use .gitignore

Don’t commit node_modules/ or build artifacts. The .gitignore is pre-configured.

Stop When Done

Manually stop your Codespace to save hours: Cmd/Ctrl+Shift+P → “Codespaces: Stop”

Leverage Extensions

Pre-installed VS Code extensions make development faster. Learn the keyboard shortcuts!

Comparison: Local vs Codespaces

Feature	Local Development	GitHub Codespaces
Setup Time	30+ minutes	~60 seconds
Requirements	Install Node, Rust, Shopify CLI	None - just a browser
Cost	Free (but setup complexity)	60-120 hours/month free
Consistency	Varies by machine	Identical for everyone
Collaboration	Difficult	Easy to share
Portability	Tied to one machine	Access from anywhere

FAQ

Do I need to install anything?

No! Everything runs in the browser. You only need a GitHub account.

Can I use my local VS Code?

Yes! Click the dropdown next to “Open in…” and select “Open in VS Code Desktop”. Requires VS Code installed locally.

What if I exceed free tier hours?

Your Codespace will stop working. Either wait for next month or upgrade to GitHub Pro for more hours.

Are my changes saved?

Changes are saved in the Codespace but only persist after committing to git. Uncommitted changes remain in the stopped Codespace.

Can I access my Codespace later?

Yes! Go to github.com/codespaces to see all your Codespaces. Click to reopen.

Next Steps

Best Practices

Learn tips for efficient development

Debugging

Master debugging in Codespaces

GitHub Integration

Understand the deployment pipeline

Rust Functions

Deep dive into Rust development

Get Started

Core Concepts

Building Extensions

Building Functions

Development

Deployment

Advanced

​Overview

​What You Get

​Instant Development Environment

​Pre-configured Extensions

​How to Use

​1. Generate Your Extension

​2. Open Codespace

​3. Make Changes

​4. Preview Changes

​5. Deploy Changes

​Development Workflow

​Working with Rust Functions

​Build Your Function

​Watch Mode

​Deploy

​Port Forwarding

​Machine Types

​Cost & Limits

​Free Tier

​Auto-Shutdown

​Reusing Codespaces

​Advanced Usage

​Custom Configuration

​Debugging

​Terminal Commands

​Troubleshooting

​Codespace Won’t Start

​Port Forwarding Not Working

​Build Errors

​Slow Performance

​Best Practices

​Comparison: Local vs Codespaces

​FAQ

​Next Steps

Best Practices

Debugging

GitHub Integration

Rust Functions

​Resources

Overview

What You Get

Instant Development Environment

Pre-configured Extensions

How to Use

1. Generate Your Extension

2. Open Codespace

3. Make Changes

4. Preview Changes

5. Deploy Changes

Development Workflow

Working with Rust Functions

Build Your Function

Watch Mode

Deploy

Port Forwarding

Machine Types

Cost & Limits

Free Tier

Auto-Shutdown

Reusing Codespaces

Advanced Usage

Custom Configuration

Debugging

Terminal Commands

Troubleshooting

Codespace Won’t Start

Port Forwarding Not Working

Build Errors

Slow Performance

Best Practices

Comparison: Local vs Codespaces

FAQ

Next Steps

Resources