Why my web app started showing ???? symbols on pushing file through Powershell
When I first started building apps using AI tools like Claude Code and OpenAI Codex, I honestly did not know much about deployments, Linux servers, SSH, encoding, or production workflows.
Most of my learning was happening while building real apps.
Sometimes Claude Code suggested commands. Sometimes Codex explained errors. Many times, I was just carefully copying commands into PowerShell and hoping I would not break my VPS.
And surprisingly… many things actually worked.
Until one strange issue started appearing everywhere.
???
At first, I thought:
- my VPS was corrupted
- React build was failing
- SSH transfer was broken
- or maybe AI generated wrong commands
But later I discovered something unexpected.
The problem was encoding.
My Early Deployment Workflow
At that stage, I was not using proper Git-based deployment yet.
For quick frontend fixes, I was directly pushing files from my Windows laptop to the VPS using PowerShell.
Something like this:
Get-Content "D:\projects\myapp\frontend\src\App.js" -Raw -Encoding UTF8 | ssh root@123.123.123.123 "cat > /opt/myapp/frontend/src/App.js"
For a beginner like me, this honestly felt magical.
I could:
- edit a file locally
- push it directly to VPS
- refresh browser
- instantly see changes live
No Git pull.
No CI/CD setup.
No rebuilding entire projects.
And for small apps, this method actually worked surprisingly well.
I even wrote a separate article explaining this quick workflow:
How I Push Single Files to My VPS Using PowerShell
Where The Real Problem Started
The strange issue started when I began working on larger React/Vite projects with separate frontend and backend setups.
Initially, my small apps worked fine with this PowerShell pushing method.
But once projects became larger, something unusual started happening:
- special symbols broke
- some text became corrupted
- frontend behaved strangely
- formatting disappeared
-
random
????symbols appeared
Sometimes the app still built successfully.
Which made debugging even more confusing.
At first, I wasted time checking:
- React code
- PM2
- Nginx
- frontend build
- SSH connection
- VPS storage
But the actual problem was much simpler.
PowerShell encoding.
The Weird ???? Problem
This is what I started seeing in some files:
???
At first, it looked harmless.
But later I realized:
- some characters were not transferring correctly
- UTF-8 text was breaking
- certain frontend files became partially corrupted
And because React/Vite projects depend heavily on many connected frontend files, even small corruption created weird production behavior.
For a tiny project, this was manageable.
For a bigger frontend/backend app, it started becoming risky.
The Small Fix That Helped
After debugging with AI tools and reading different suggestions online, I started running this before pushing files:
$OutputEncoding = [System.Text.UTF8Encoding]::new($false)
[Console]::OutputEncoding = [System.Text.UTF8Encoding]::new($false)
This forces PowerShell to properly use UTF-8 encoding while sending content through SSH.
And surprisingly, the strange ???? issue mostly stopped.
Why I Still Liked This Method Initially
Even after these issues, I still liked this workflow during my early learning phase because:
- it was fast
- easy to understand
- beginner-friendly
- no complex deployment setup
- useful for quick frontend edits
As someone learning through experimentation and AI guidance, it helped me move quickly without overcomplicating things.
And honestly, for small apps, it worked.
But Later I Learned The Bigger Problem
The encoding issue was only the beginning.
Later, when my apps became larger, I started facing:
- incomplete uploads
- partially transferred files
- broken package.json
- corrupted frontend bundles
- blank white production screens
That was the moment I finally understood:
why developers use Git-based deployments instead of manually pushing files through SSH.
→ Next Article:
“How a 0.69 KB File Broke My Production App”
Comments
Post a Comment