> ## Documentation Index
> Fetch the complete documentation index at: https://docs.synapsebuilder.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Edit with GitHub Codespaces

> Advanced editing with zero setup - edit your generated extensions in a complete development environment

## 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.

<Info>
  **Perfect for both beginners and developers**\
  Click one button to open VS Code in your browser with everything pre-configured.
</Info>

## 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

```bash theme={null}
"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:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/falsezero/images/edit-in-codespace-button.png" alt="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:

```bash theme={null}
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:

```bash theme={null}
git add .
git commit -m "Updated discount logic"
git push
```

GitHub Actions automatically deploys your changes to Shopify.

<Note>
  Or use the VS Code Source Control panel - no terminal required!
</Note>

## Development Workflow

<Steps>
  <Step title="Generate">
    Use Synapse to generate your extension with AI
  </Step>

  <Step title="Edit">
    Click "Edit in Codespace" to open full dev environment
  </Step>

  <Step title="Preview">
    Run `shopify app dev` and test changes live
  </Step>

  <Step title="Deploy">
    Commit and push - automatic deployment via GitHub Actions
  </Step>
</Steps>

## Working with Rust Functions

For Shopify Functions written in Rust:

### Build Your Function

```bash theme={null}
cd extensions/your-function-name
cargo build --target wasm32-unknown-unknown --release
```

### Watch Mode

Auto-rebuild on file changes:

```bash theme={null}
cargo watch -x 'build --target wasm32-unknown-unknown --release'
```

### Deploy

```bash theme={null}
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:

```json theme={null}
{
  "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:

```bash theme={null}
# 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:**

```bash theme={null}
# 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

<AccordionGroup>
  <Accordion title="Commit Often">
    Changes are only saved when committed to git. Commit frequently to avoid losing work.
  </Accordion>

  <Accordion title="Use .gitignore">
    Don't commit `node_modules/` or build artifacts. The `.gitignore` is pre-configured.
  </Accordion>

  <Accordion title="Stop When Done">
    Manually stop your Codespace to save hours: **Cmd/Ctrl+Shift+P** → "Codespaces: Stop"
  </Accordion>

  <Accordion title="Leverage Extensions">
    Pre-installed VS Code extensions make development faster. Learn the keyboard shortcuts!
  </Accordion>
</AccordionGroup>

## 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

<AccordionGroup>
  <Accordion title="Do I need to install anything?">
    No! Everything runs in the browser. You only need a GitHub account.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="Are my changes saved?">
    Changes are saved in the Codespace but only persist after committing to git. Uncommitted changes remain in the stopped Codespace.
  </Accordion>

  <Accordion title="Can I access my Codespace later?">
    Yes! Go to github.com/codespaces to see all your Codespaces. Click to reopen.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Best Practices" icon="star" href="/advanced/best-practices">
    Learn tips for efficient development
  </Card>

  <Card title="Debugging" icon="bug" href="/advanced/debugging">
    Master debugging in Codespaces
  </Card>

  <Card title="GitHub Integration" icon="github" href="/deployment/github-integration">
    Understand the deployment pipeline
  </Card>

  <Card title="Rust Functions" icon="rust" href="/rust-functions-guide">
    Deep dive into Rust development
  </Card>
</CardGroup>

## Resources

* [GitHub Codespaces Documentation](https://docs.github.com/en/codespaces)
* [DevContainer Specification](https://containers.dev/)
* [Shopify CLI Reference](https://shopify.dev/docs/api/shopify-cli)
* [VS Code Keyboard Shortcuts](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)