When building my Progressive Web App (PWA), I wanted a clean section showing my channel's latest YouTube uploads.
It sounded simple at first, but I quickly hit a classic web development wall: the dreaded CORS error.
Every time the app tried to read YouTube's feed directly inside the browser, security rules blocked it, resulting in a frustrating error message: "Couldn't load latest videos."
Instead of setting up a paid backend server or messing with complex API keys, I found a zero-cost trick using GitHub Actions as a background helper.
Here is how I solved it using logic instead of extra infrastructure.
💡 The Lightbulb Moment
Why force the user's phone to do the heavy lifting every single time they open the app?
Instead of asking the app to fetch data from YouTube directly:
- A background script runs automatically every 3 hours inside GitHub.
- It fetches the YouTube feed behind the scenes and saves a simple videos.json file inside my project.
- My app simply reads that ready-made videos.json file locally—instantly, smoothly, and with zero security errors.
🛠️ How It Works in 3 Simple Steps
The Scheduled Helper: I set up a simple GitHub Action workflow. Think of it like setting an alarm clock on your phone—every 3 hours, GitHub wakes up, grabs the latest 5 videos from YouTube, and formats them into a neat text list (videos.json).
The Auto-Publisher: Once the file is updated, GitHub Pages automatically deploys the updated app files to the web.
The App Fetch: Inside my app, reading the list takes just a single line of standard JavaScript. No security blocks, no API limits, and no delay for the user!
⚠️ 3 Lessons I Learned Along the Way
If you try a similar setup for your own app, here are three quick gotchas to watch out for:
Watch out for "invisible" build blocks: GitHub Pages uses a tool called Jekyll by default, which can sometimes ignore .json files. Creating a blank file named .nojekyll in your root folder fixes this instantly.
Beware of aggressive caching: PWAs love saving old files so they work offline. Adding a tiny timestamp rule when reading your JSON ensures users always see the freshest videos instead of an old saved copy.
Check the green checkmark: If your app still shows an error, check the Actions tab in GitHub. A single red ❌ on the deploy step means GitHub hasn't published your new file to the live site yet—a simple "Re-run" usually fixes it!
🚀 The Result
100% Free & Automatic: Updates every 3 hours without me lifting a finger.
Lightning Fast: The app loads instant static text instead of waiting for external websites.
No Server Maintenance: No monthly hosting bills, no databases, and no servers to manage.
Have you ever used clever static tricks or background tools to bypass backend headaches? I'd love to hear how you solved it in the comments!
Top comments (0)