How I Refactored My VS Code Extension to be 100% Serverless & Offline 🚀 (CodeTune v0.0.7)

The Problem: "It works on my machine" 😅

I've been building CodeTune, an Islamic companion extension for VS Code that helps developers maintain their spiritual focus (Prayer times, Quran player, Azkar) without leaving their editor.

In early versions, I made a classic architectural mistake: I spun up a local Express server (localhost:3000) inside the extension to handle API requests for prayer times and Hijri dates.

The result?

❌ Port Conflicts: If port 3000 was busy, the extension crashed.

❌ Network Dependency: If the internet flickered, the prayer times disappeared.

❌ Complexity: Managing a Node process alongside the VS Code Webview was a headache.

The Solution: Going "Local-First" 🛠️

For the new v0.0.7 update, I decided to tear down the backend and rebuild it entirely within the VS Code Extension Host.

Here is how I transformed the architecture:

1. Mathematical Calculation vs. API Calls
   Instead of fetching prayer times from an external API (which requires internet), I integrated the adhan JavaScript library directly into the extension source.

Now, the extension calculates astronomical prayer times locally on your CPU in milliseconds.

TypeScript

// The new logic (No more fetch calls!)

import { Coordinates, CalculationMethod, PrayerTimes } from 'adhan';

function calculatePrayerTimes(lat, lon) {

const coordinates = new Coordinates(lat, lon);

const params = CalculationMethod.Egyptian();

const prayerTimes = new PrayerTimes(coordinates, new Date(), params);

return prayerTimes; // Instant results!

}

1. Solving the "Where am I?" Problem
   VS Code Webviews have strict restrictions on the Geolocation API. To solve this without annoying the user with manual inputs, I implemented IP-based Geolocation in the Extension Host.

It detects the city automatically on the first run (using a simple call to ip-api), saves the coordinates locally, and then never needs the internet again for calculations.

What's New in v0.0.7? ✨

After this refactor, the extension is faster, lighter, and more reliable.

🌍 Zero-Config Setup: Install it, and it instantly knows your location (e.g., Asyut, Cairo, London).

✈️ 100% Offline Support: Coding on a plane? Your prayer times and Quran player still work.

🎨 New Visual Identity: A fresh icon representing the fusion of Code < > and Spirituality ●.

🛡️ Privacy: No GPS permissions required.

Screenshots 📸

Here is the result of the new UI with the "Dot" branding and automatic location detection:

Try it out! 👇

If you are a Muslim developer looking to balance your workflow with your spiritual habits, give it a try. It's open-source and free.

VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=FreeRave.codetune

GitHub Repository:

https://github.com/kareem2099/codetune

I'd love to hear your feedback in the comments! Have you ever had to refactor a VS Code extension?