Vibecode Your SaaS - Ep #2 - File Browser interface & GitHub Integration
In this tutorial (Episode 2 of our "Vibecode Your SaaS" series), we'll show you exactly how to set up Git version control and GitHub integration for a real web application. We're continuing to build our Health Tracker SaaS application, and today we're adding the professional foundation every production application needs: proper version control and code management.
January 23, 2026
If you're building web applications, version control isn't optional—it's essential. Without proper version control, you're one mistake away from losing hours of work, unable to track changes, and incapable of collaborating effectively with other developers.
Part 1: Understanding Your Server File System
Navigating the NonBioS File Browser
Before we can set up version control, you need to understand where your code lives on the server.
Accessing the File Browser:
Navigate to your "Default Sandbox" Settings
Click on the "File Browser" tab
Note your access URL (typically on port 8080)
Log in with your sandbox credentials
The file browser provides a clean, intuitive interface for navigating your entire Linux file system without needing SSH or FTP clients.
Key Directory Structures Explained
Understanding Linux directory structure is crucial for web development:
/home/nonbios/ - Your development workspace
This is where your code lives during development
Contains your project folders and working files
The health-tracker folder contains all our application files
/var/www/html/ - Apache web server document root
This is where Apache serves files from
When you deploy on NonBioS, code is copied from /home/nonbios/ to /var/www/html/
This is the production location for your live application
/etc/apache2/ - Web server configuration
Contains Apache virtual host configurations
The sites-enabled folder has your domain configurations
Includes SSL certificate configurations from Let's Encrypt
Downloading Your Code for Local Backup
The file browser makes it easy to create local backups:
Navigate to your project folder (/home/nonbios/health-tracker)
Select the folder
Click the download button
Choose your preferred compression format (ZIP, TAR, etc.)
This gives you a manual backup, but it's not a sustainable solution for ongoing development. That's where Git comes in.
Part 2: Setting Up Git Version Control
Why Git Over Manual Backups?
Manual file downloads have serious limitations:
No version history or change tracking
No ability to roll back to previous versions
No collaboration capabilities
Easy to forget or skip backups
No merge conflict resolution
Git solves all these problems by providing:
Complete version history with commit messages
Easy rollback to any previous state
Branch-based development workflow
Collaboration tools for team development
Industry-standard version control
The beauty of using NonBioS AI is that you don't need to remember complex Git commands or workflows. You simply tell NonBioS to "check in the health tracker application to GitHub," and it automates the entire setup process for you.
However, it's helpful to understand what NonBioS is doing behind the scenes—especially when you need to debug issues or want to perform Git operations manually in the future.
Here's what NonBioS automates when you ask it to set up Git:
Step 1: Initialize the repository
NonBioS navigates to your project directory and runs:
cd /home/nonbios/health-tracker git init
This creates a hidden .git folder that tracks all your version history.
Step 2: Create a .gitignore file
NonBioS automatically generates a .gitignore file to exclude unnecessary files from version control—things like system files, logs, temporary files, and sensitive configuration data that shouldn't be in your repository.
NonBioS can even generate a professional README file with your project description, features list, and file structure documentation.
At this point, you have local version control fully configured, but your code isn't backed up remotely yet. That's where GitHub comes in.
The key advantage here is that NonBioS handles all these steps automatically. You don't need to remember the exact commands or syntax. But knowing what's happening under the hood means you can troubleshoot if something goes wrong, or perform these operations manually when needed.
Understanding GitHub Personal Access Tokens
GitHub no longer accepts passwords for Git operations. Instead, you need to create a Personal Access Token (PAT) for authentication.