Add "Staging" profile to VS Code SFTP
Setting up a "Staging" environment alongside your "Production" (Live) environment is the best way to test changes before the world sees them. Since we are using the Global Settings method, we will simply add a second profile to your "Keyring."
Here is how to set up the multi-environment workflow:
Step 1: Add the Staging Profile to Global Settings
Open your global settings.json again (Ctrl+Shift+P -> Open User Settings (JSON)) and update the remotefs.remote block to include a second entry.
"remotefs.remote": {
"cpanel-prod": {
"scheme": "ftp",
"host": "YOUR_HOST",
"username": "your_live",
"password": "YOUR_PRODUCTION_PASSWORD",
"port": 21
},
"cpanel-staging": {
"scheme": "ftp",
"host": "YOUR_HOST",
"username": "your_staging",
"password": "YOUR_STAGING_PASSWORD",
"port": 21
}
}
Step 2: Use "Profiles" in your Project sftp.json
Instead of having one single connection, we will now use the profiles feature. This allows you to toggle between them easily. Update your .vscode/sftp.json to this:
{
"name": "Project Name",
"protocol": "ftp",
"port": 21,
"uploadOnSave": true,
"syncMode": "full",
"ignore": [
"**/.vscode/**",
"**/.git/**",
"**/.obsidian/**",
"**/apps/**",
".DS_Store",
"**/*.py",
"**/.env",
"**/sites.json"
],
"profiles": {
"staging": {
"remote": "cpanel-staging",
"remotePath": "staging.site.com/"
},
"production": {
"remote": "cpanel-prod",
"remotePath": "site.com/"
}
},
"defaultProfile": "staging"
}
How to use this new workflow:
- Safety First: By setting
"defaultProfile": "staging", any time you save a file, it will automatically upload to your Staging site first. - Switching to Production:
- Press
Ctrl + Shift + P. - Type "SFTP: Set Profile".
- Select production.
- Now, when you save or sync, it goes to the live site.
- Visual Confirmation: In the bottom status bar of VS Code, you should see the name of the profile you are currently using.
Pro Tip: The "Sync" Move
Once you have tested your changes on Staging and you're ready to go live, you don't even have to switch profiles manually for every file. You can:
- Set profile to staging -> SFTP: Download Project (to make sure your local is 100% perfect).
- Set profile to production -> SFTP: Upload Project.
Would you like me to show you how to add a "Context Menu" shortcut so you can right-click and "Deploy to Production" instantly?