Vibe Code on Opalstack with SSH-FS + Copilot

Posted On November 11, 2025

Edit files live on your server from VS Code. No sync. No “deploy”. Just type → save → see it.

TL;DR

  1. Mount your Opalstack home directory in VS Code using the SSH FS extension.
  2. Open your app’s index.html (or template) directly from the server.
  3. Let GitHub Copilot (or ChatGPT) generate code into those live files.
  4. Save → refresh site → iterate.
  5. When ready, commit and lock it in.

This post mirrors the steps from the video—use it as your quick checklist.

Why this workflow

  • Real environment, zero drift. You’re editing the same files your app serves.
  • No build pipeline drama when you just need changes now.
  • Copilot does the boilerplate while you point it at real files and paths.
  • Works with Opalstack’s stack (WordPress, Django, Rails, Node, static sites, CUS/port-proxied apps, etc.).

Yes, keys are best practice. For quick “vibe” sessions, username/password also works. Use what fits your moment; switch to keys when you settle in.

Prereqs

  • An Opalstack account and one of:
    • A static site (e.g. apps/yourapp/index.html)
    • or any app that exposes web files under your home dir.
  • VS Code
  • GitHub Copilot (or your AI of choice)
  • SSH FS extension for VS Code (publisher: Kelaberetiv).
    Alternative: the “SFTP” extension by liximomo also works; below I show SSH FS.

If you’re on macOS and want a full OS mount, install macFUSE—but you don’t need it for the VS Code SSH FS plugin. The plugin mounts inside VS Code’s explorer.

Step 1 — Install the VS Code extensions

  1. In VS Code: Extensions → search SSH FS → Install.
  2. Install GitHub Copilot (if you haven’t).

Step 2 — Create the SSH FS connection

Open Command Palette → “SSH FS: Create a new configuration”.
Or drop this into Settings (JSON). Replace with your details:

// settings.json (User or Workspace)
"sshfs.configs": [
  {
    "name": "opal1",                      // shows in the SSH FS panel
    "host": "opal1.opalstack.com",        // or just "opal1" if you mapped it
    "port": 22,
    "username": "your_opal_username",
    "password": "your_password",          // for quick start; prefer keys later
    "root": "/home/your_opal_username/",  // your home dir
    "privateKeyPath": "",                 // leave empty when using password
    "interactiveAuth": false,
    "agent": false,
    "followSymlinks": true,
    "uploadOnSave": false,                // not needed—edits are live
    "readOnly": false,
    "reconnect": true,
    "debug": false
  }
]

Prefer keys? Set "privateKeyPath": "~/.ssh/id_ed25519" and remove "password".

Connect: Open the SSH FS side panel → click opal1 → Mount.
You’ll see a new tree in the Explorer with your live server files.

Step 3 — Navigate to your app files

Common locations on Opalstack:

  • Static / PHP site: apps/<appname>/
  • WordPress: apps/<wpapp>/
  • Django/Rails/Node (CUS/port apps):
    • Code: apps/<appname>/
    • Static assets (if any): often public/ or static/
    • Proc/launch: ~/apps/<appname>/run scripts or your start/finish_install patterns

Open your page entry point. For the demo:
/home/your_user/apps/index.html

Step 4 — Start vibe coding with Copilot

  1. Open index.html (or a template).
  2. Prompt Copilot inline (type a comment or start a tag; Copilot completes).
  3. Accept suggestions → Save.
  4. Refresh your site URL → see it live.

Example Copilot prompts

  • “Add a responsive nav bar with a sticky header and a ‘Get Started’ button. Tailwind classes only.”
  • “Insert a hero section with gradient background, H1, subcopy, and two CTAs side-by-side on desktop, stacked on mobile.”
  • “Create a minimally invasive <script> that toggles dark mode and remembers user choice in localStorage.”

Quick HTML snippet to bootstrap a hero

Paste, then refine with Copilot:

<section class="min-h-[70vh] grid place-items-center bg-slate-950 text-white px-6">
  <div class="max-w-3xl text-center space-y-5">
    <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight">
      Build faster on Opalstack
    </h1>
    <p class="text-slate-300 text-lg sm:text-xl">
      Real Linux hosting, flat pricing, AI-assisted workflows. No surprise bills.
    </p>
    <div class="flex flex-col sm:flex-row gap-3 justify-center">
      <a class="btn btn-primary" href="/signup/">Start Free</a>
      <a class="btn btn-outline" href="/docs/">Read Docs</a>
    </div>
  </div>
</section>

Ask Copilot to “animate the buttons on hover with subtle scale and glow” or “add an ambient radial gradient glow behind the hero”.

Step 5 — App-specific commands (when not static)

If your app is not plain static HTML, you may need a restart or build step:

  • Django (gunicorn/uvicorn): restart your process or touch the WSGI/ASGI target.
  • Node: restart your PM2/forever/systemd --user service.
  • Rails (Puma/Passenger): restart service or touch tmp/restart.txt.
  • Static: just save. No restart.

Tip: wrap restarts in a tiny script so you can call it from the VS Code terminal:

# ~/bin/restart_my_app.sh
#!/usr/bin/env bash
set -euo pipefail
systemctl --user restart myapp.service
echo "Restarted myapp.service ✅"

Make executable: chmod +x ~/bin/restart_my_app.sh

Security notes (straight talk)

  • Passwords are fine for quick sessions; use SSH keys for ongoing work.
  • Don’t store production secrets in random files in apps.
  • Keep permissions sane: your user should own your app files; avoid chmod 777 like the plague.
  • If you’re editing production, be prepared to revert fast (see Git below).

Git it under control

Even if you vibe directly on the server, commit early and often, Use Gitea to set up a Git repo on Opalstack.

Troubleshooting

I can’t save files / read-only?
Check your SSH FS config "readOnly": false. Ensure file ownership: ls -l and chown -R your_user:your_user.

Latency / slow saves?
Stick to editing within your app’s folder, not your entire home. Disable heavy VS Code extensions on remote mounts.

Permissions weird after deploy script?
Reset ownership: chown -R your_user:your_user ~/apps/yourapp. Avoid sudo in web paths.

Edits not showing in browser?

  • Static: hard refresh (Cmd+Shift+R).
  • App: restart the process or clear your app cache.
  • CDN in front? Purge cache.

Copilot keeps hallucinating paths
Point it: “Use the existing /apps/styles.css path.” Then tab-complete the relative import.

Optional: Use Opalstack’s MCP server (AI-assisted ops)

If you’ve wired our MCP endpoint into your AI toolchain, you can:

  • create apps/databases from chat,
  • deploy a template,
  • restart a user service,
  • tail logs.

That pairs well with SSH FS: AI handles ops, you live-edit the code.

Example: From “blank page” to shipped hero (2 minutes)

  1. Mount via SSH FS → open public_html/index.html.
  2. Paste the hero skeleton from above.
  3. Prompt Copilot: “Make the hero responsive; add animated gradient glow, keep it tasteful.”
  4. Save → refresh → tweak copy → save again.

Done.

When not to vibe directly on prod

  • Complex build steps (Next.js, Rails asset pipeline) where a local dev server is faster
  • Risky migrations or mass refactors—use a staging app (Opalstack makes it cheap)
  • Large teams without branch discipline

In those cases, SSH FS still works—just point it at staging.

Wrap-up

That’s the whole loop: mount → open → prompt → save → refresh.
With Opalstack + SSH FS + Copilot, you get instant feedback in the real environment, minus the yak-shaving. Keep it tight, keep it versioned, and ship.