Or maybe you're on the train, forty minutes from home, watching the landscape blur past. That side project you've been thinking about? You just figured out how to solve that tricky problem. But by the time you get home, make dinner, deal with life, the ideas will be gone.
This is the reality of modern development. Our best ideas rarely arrive when we're sitting at our desk. They come in the gaps, in the quiet moments, in the places where we can't traditionally code.
The dream isn't just mobile coding. It's vibe coding. It's having a real development environment, complete with AI pair programming, accessible from your phone. It's being able to turn inspiration into implementation, regardless of where you are.
Here's how to build that dream for $10 a month.
The Philosophy: This Isn't Production
Before we dive into the technical setup, let's be clear about what we're building. This is a sandbox VPS, a playground where you can experiment, break things, and learn without consequences.
This isn't about hotfixing production at 2am from your phone (though technically you could). It's about capturing ideas when they arrive. Code here, push to Git, and deploy to production through your proper CI/CD pipeline later. That separation is liberating. You can try wild ideas without worrying about taking down your live site.
Think of it as your portable sketchpad, but for code.
The Stack: What $10 Actually Gets You
For the price of a streaming subscription, here's your setup:
- Ubuntu VPS with 2GB RAM, 55GB storage
- Your own .dev domain (or use whatever domain you have laying around)
- Multiple project environments running simultaneously
- Full VS Code in your browser
- Claude Code for AI pair programming
- Secure, password-protected preview URLs
- Everything accessible from your phone
The flow is beautifully simple: VPS → Domain → Nginx → SSL → Git → tmux → Mobile. Each piece serves a purpose, and together they create something greater than the sum of their parts.
Foundation: Your Server in the Cloud
Start with a VPS. I chose Vultr at $10/month, but DigitalOcean, Hetzner, or Linode work just as well. The key specs you need:
- 2GB RAM (1GB works, but 2GB gives you breathing room)
- 25-50GB storage
- Ubuntu 22.04 LTS (stick with LTS for stability)
First moves after spinning up your server:
# Update everything
apt update && apt upgrade -y
# Create a non-root user
adduser dev
usermod -aG sudo dev
# Set up swap file for memory management
fallocate -l 2G /swapfile
chmod 600 /swapfile
mkswap /swapfile
swapon /swapfile
Never work as root. Your dev user has sudo powers when needed but operates safely by default.
For SSH access, set up key authentication. First, check if you already have an SSH key on your local machine:
# On your local machine
ls ~/.ssh/id_rsa.pub
If the file doesn't exist, generate a new SSH key:
# Still on your local machine
ssh-keygen -t rsa -b 4096
# Just press Enter for all prompts to use defaults
Now copy your public key to the server:
# From your local machine
ssh-copy-id dev@your-server-ip
# Enter the dev user's password one last time
This copies your public key to the server's ~/.ssh/authorized_keys file. From now on, you can SSH without a password.
Then create a config entry on your local machine (~/.ssh/config):
Host mydev
HostName your-server-ip
User dev
Port 22
Now you can connect with just ssh mydev. Clean, simple, secure.
Web Infrastructure: Making It Accessible
Nginx is your traffic director. It takes incoming requests and routes them to the right service. Install it along with SSL tools:
sudo apt install -y nginx certbot python3-certbot-nginx
Your domain needs proper DNS records. If you bought domain.dev, set up:
- A record: code.domain.dev → your-server-ip
- A record: *.preview.domain.dev → your-server-ip
That wildcard subdomain is magic. It means anything.preview.domain.dev automatically points to your server. Each project gets its own preview URL without additional DNS configuration.
SSL is non-negotiable in 2025, and .dev domains require it anyway. Certbot makes this trivial:
sudo certbot --nginx -d code.domain.dev
For wildcard certificates (covering all preview subdomains), you'll need DNS validation:
sudo certbot certonly --manual --preferred-challenges dns -d "*.preview.domain.dev"
Password protection keeps your experiments private. Create an htpasswd file:
sudo htpasswd -c /etc/nginx/.htpasswd dev
Now every preview URL requires authentication. Your code is visible only to you.
Development Tools: The Core Setup
Let's install the essentials for web development:
# PHP and friends
sudo apt install -y php-cli php-mysql php-mbstring php-xml php-curl php-zip composer
# Node.js for modern JavaScript
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
# MySQL for databases
sudo apt install -y mysql-server
But here's where it gets interesting. Code-server brings VS Code to your browser:
curl -fsSL https://code-server.dev/install.sh | sh
sudo systemctl enable --now code-server@dev
Configure Nginx to proxy Code-server:
server {
listen 443 ssl;
server_name code.domain.dev;
location / {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
Now VS Code runs at https://code.domain.dev/. Full IDE, in your browser, accessible from anywhere.
The real magic comes with Claude Code though:
npm install -g @anthropic-ai/claude-code
This gives you an AI pair programmer right in your terminal. The catch? Running as non-root triggers permission prompts. The fix (for dev servers only, don't do this on a prod server):
echo 'alias claude="claude --dangerously-skip-permissions"' >> ~/.bashrc
source ~/.bashrc
Now you can type claude "help me refactor this function" and get instant AI assistance. Remember: this skip-permissions flag is only for your personal dev server. Never use it in production environments. Or do it, but don't blame me if something goes wrong 😉
Tailwind CSS: Rapid Styling Without the Bulk
Tailwind CSS deserves its own section because it's perfect for this workflow. The standalone CLI runs anywhere, no Node.js build process required. Here's how to set it up:
# Download the standalone CLI
cd ~
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
chmod +x tailwindcss-linux-x64
sudo mv tailwindcss-linux-x64 /usr/local/bin/tailwindcss
# Verify it works
tailwindcss --help
For each project that needs Tailwind, create a simple build setup:
cd ~/projects/mysite
# Initialize Tailwind
tailwindcss init
# Create your input CSS file
cat > input.css << EOF
@tailwind base;
@tailwind components;
@tailwind utilities;
EOF
# Create a build script
cat > build-css.sh << EOF
#!/bin/bash
tailwindcss -i ./input.css -o ./public/style.css --watch
EOF
chmod +x build-css.sh
Now you can run ./build-css.sh in a tmux pane and Tailwind watches for changes, rebuilding automatically. The beauty of this approach:
tmux new -s mysite
# Split the window: Ctrl+B then %
# Left pane: php -S localhost:3000
# Right pane: ./build-css.sh
Your PHP server runs on the left, Tailwind watches on the right. Both keep running when you disconnect.
For production builds, add the minification flag:
tailwindcss -i ./input.css -o ./public/style.css --minify
This setup is particularly powerful with Claude Code. You can ask Claude to generate Tailwind components and see them instantly reflected in your preview URL. No complex build pipeline, no webpack configuration, just CSS that updates as you code.
If you prefer using Node.js and npm (maybe you're already using it for other build processes), you can install Tailwind the traditional way:
cd ~/projects/mysite
npm init -y
npm install -D tailwindcss
# Add to package.json scripts:
"scripts": {
"buildCSS": "npx tailwindcss -i input.css -o assets/css/style.css --minify",
"watchCSS": "npx tailwindcss -i input.css -o assets/css/style.css --watch"
}
Then run npm run watchCSS in your tmux pane. This approach makes sense if you're already managing other npm packages, but for pure simplicity, the standalone CLI is hard to beat.
The standalone CLI approach means one less dependency to manage, faster builds, and perfect compatibility with our simple PHP server setup. It's the ideal CSS solution for vibe coding.
Git Workflow: Syncing Your Worlds
Git is your bridge between local and server development. But GitHub killed password authentication, so you need personal access tokens:
- GitHub → Settings → Developer settings → Personal access tokens
- Generate token with 'repo' scope
- Use token as password when Git asks
Store credentials so you don't retype them:
git config --global credential.helper store
git config --global user.name "Your Name"
git config --global user.email "you@email.com"
Then the workflow simply becomes:
- Local development when at your computer
- Push changes to GitHub
- Pull on server when on mobile
- Edit, test, commit, push from server
- Pull on local when back at computer
Or even simpler: skip local development entirely and work exclusively on the VPS. With code-server and Claude Code, your server can become your primary development machine. No syncing needed, just push to Git when ready for production.
Your code follows you seamlessly. You might have concerns about latency and lag, but I have not experienced significant lag in my testing. YMMV.
tmux: Persistent Sessions
The PHP development server dies when you disconnect. tmux keeps it alive:
tmux new -s projectname
cd ~/projects/myproject
php -S localhost:3000
# Ctrl+B, then D to detach
Your server keeps running. Come back hours later:
tmux attach -t projectname
Everything's exactly as you left it. Multiple projects? Multiple tmux sessions:
- tmux new -s frontend for your React app
- tmux new -s backend for your API
- tmux ls to see all sessions
This persistence is crucial for mobile development. You can't keep SSH connections alive on a phone, but tmux doesn't care.
Project Setup: Real Examples
Here's a simple PHP project structure:
mkdir ~/projects/mysite
cd ~/projects/mysite
git init
echo ".DS_Store" > .gitignore
Configure Nginx to route your preview subdomain:
server {
listen 443 ssl;
server_name ~^(?<project>.+)\.preview\.domain\.dev$;
location / {
if ($project = "mysite") {
proxy_pass http://localhost:3000;
}
if ($project = "api") {
proxy_pass http://localhost:3001;
}
}
}
Start your project in tmux:
tmux new -s mysite
php -S localhost:3000
Access it at https://mysite.preview.domain.dev/. Password protected, SSL secured, professionally presented.
The Mobile Experience: Where Magic Happens
Termius changes everything. It's a native iOS/Android SSH client that actually works. No web terminal lag, proper-ish copy/paste, real keyboard support.
Setup is straightforward:
- Add your server (IP, port 22, username)
- Generate SSH key in Termius
- Add public key to server's ~/.ssh/authorized_keys
- Connect without passwords
The workflow on mobile becomes:
- Open Termius
- Connect to your server
- Attach to tmux session (or just jump straight to work if you keep sessions running)
- Pull latest code from Git
- Edit with nano or vim (not ideal I know, so just use Claude Code)
- Test in browser
- Commit and push
Code-server works on mobile browsers, but it's clunky. Small buttons, weird keyboard behaviour, constant zooming. Termius + Claude Code is surprisingly better. You're not typing massive amounts of code on your phone anyway. You're making surgical changes, experimenting with ideas, using AI to generate boilerplate.
Real-World Usage: How It Actually Feels
Last Tuesday, 11pm. I'm about to go to bed, when I realize how to fix that CSS animation on my site that's been bugging me. Instead of getting up and firing up the laptop, I grab my phone and open Termius.
cd ~/projects/site
git pull
claude "fix the hero section animation timing"
git commit -m "Fixed animation timing"
git push
Five minutes. Problem solved. No laptop required. No need to attach to tmux since I keep my sessions running permanently.
Or imagine being on a train or a plane. A long commute could be productive time:
- git pull and review yesterday's code
- Try that new approach you've been considering
- Test it live on your preview URL
- Refactor with Claude's help
- Push to Git before you land
The psychological shift is profound. Code isn't locked to your desk anymore. Ideas can be explored when they arrive, not when you finally get to your computer.
Gotchas and Solutions
Database Synchronization: Databases need a source of truth. The cleanest approach? Production is the source. When you need fresh data on your dev server:
# Export from production (via your prod backup system)
# Then on dev server:
scp prod-backup.sql mydev:~/
mysql database < prod-backup.sql
This way you're always working with real data, but never risking production. Create content on production, code on dev. When you need to test with latest content, pull a fresh database dump. Never push database changes upstream, only code through Git.
Environment Variables: Keep separate .env files. Never commit them. Each environment has its own settings:
- Local: SITE_URL=http://localhost:3000
- Server: SITE_URL=https://project.preview.domain.dev
Performance: The PHP built-in server isn't production-grade, but for development? It's perfect. Lightweight, simple, sufficient.
Limited Mobile Editing: You're not writing novels on your phone. You're making targeted changes, testing ideas, leveraging AI for heavy lifting. Adjust expectations accordingly.
The Setup Script
Want to automate this? Here's a setup script for new projects:
#!/bin/bash
PROJECT=$1
PORT=$2
# Create project
mkdir -p ~/projects/$PROJECT
cd ~/projects/$PROJECT
git init
# Add to Nginx config
sudo bash -c "cat >> /etc/nginx/sites-available/preview" << EOF
if (\$project = "$PROJECT") {
proxy_pass http://localhost:$PORT;
}
EOF
# Reload Nginx
sudo nginx -t && sudo systemctl reload nginx
# Create tmux session
tmux new -s $PROJECT -d "cd ~/projects/$PROJECT && php -S localhost:$PORT"
echo "Project $PROJECT running at https://$PROJECT.preview.domain.dev"
Save it, make it executable, and spinning up new projects becomes:
./new-project.sh coolapp 3002
Cost Breakdown
Alright, let's talk money:
- VPS: $10/month (Vultr/DigitalOcean/Hetzner)
- Domain: $12/year (roughly $1/month)
- Everything else: Free (you can get the pro version of Termius but it's not required.)
Total: $11/month for unlimited projects, accessible from anywhere, with AI assistance built in.
The Vibe: What This Really Enables
This setup isn't about emergency fixes or working on vacation. It's about something more fundamental: removing friction between idea and implementation.
That moment of inspiration on the couch? Captured. The solution that comes during your commute? Implemented. The "what if I tried..." thought at midnight? Tested. Claude Code is the real differentiator here too. It's just so good, and I enjoy working with the CLI.
You're not carrying a laptop everywhere. You're not remote-desktoping into your home machine. You have a real development environment, with real tools, accessible from the device already in your pocket.
Conclusion: Your Ideas Don't Wait
Building this takes what? 2 hours, if that. Less time than binge-watching a TV series. The result? Complete freedom to code whenever, wherever inspiration strikes.
This isn't about being always-on or working more. It's about working when you feel it. When the vibe is right, and when the idea is fresh.
The future of coding isn't bigger monitors or faster laptops. It's the freedom to create from anywhere, with AI as your pair programmer, using the device you already carry.
Welcome to vibe coding. This is the future.