DEV Community: Victor Maina

How I Fixed WSL2's "100% Packet Loss" Networking Bug in Under 10 Minutes

Victor Maina — Mon, 06 Jul 2026 23:53:18 +0000

If you've ever launched Ubuntu in WSL2 only to discover there's no internet connection—ping fails, DNS doesn't resolve, and apt update hangs forever—you're not alone.

I recently ran into this issue while my Windows host had a perfectly working internet connection, yet my WSL2 instance behaved as if it were completely offline.

After trying nearly every solution recommended online, the fix turned out to be surprisingly simple.

This post explains what didn't work, what actually fixed it, and why.

The Problem

Inside my WSL2 Ubuntu 24.04 instance:

ping 8.8.8.8

returned:

100% packet loss

Trying DNS wasn't any better:

ping google.com

produced:

Temporary failure in name resolution

Even basic package management failed:

sudo apt update

It simply timed out because the Linux environment had no network connectivity.

Meanwhile...

✅ Windows could browse the web normally.
✅ Wi-Fi was connected.
✅ Other Windows applications had internet access.

The problem existed only inside WSL2.

What Didn't Work

Like many developers, I followed the usual troubleshooting advice first.

Unfortunately, none of these solved the issue:

Editing /etc/resolv.conf
Making resolv.conf immutable using chattr
Running:

netsh winsock reset

Running:

netsh int ip reset

Restarting WSL
Restarting Windows
Manually configuring DNS servers

These are common fixes for DNS problems, but in my case the issue was much deeper.

The real culprit wasn't DNS.

It was the virtual networking layer that WSL2 uses.

The Fix: Enable Mirrored Networking

The solution was adding a .wslconfig file in my Windows user profile.

Open PowerShell as Administrator and run:

notepad "$env:USERPROFILE\.wslconfig"

Add the following configuration:

[wsl2]
networkingMode=mirrored
dnsTunneling=true
firewall=false

Save the file.

Then completely shut down WSL:

wsl --shutdown

Finally, start WSL again:

wsl

That's it.

Immediately afterwards:

ping 8.8.8.8

returned:

3 packets transmitted, 3 received, 0% packet loss

Network connectivity was restored.

Why This Works

By default, WSL2 uses a NAT-based virtual network adapter.

Think of it as a virtual switch sitting between Windows and Linux.

Normally this works well, but it can become corrupted or misconfigured after:

Windows updates
Sleep and wake cycles
VPN usage
Firewall changes
Hyper-V networking issues

When that virtual switch breaks, your Linux instance loses its route to the outside world—even though Windows itself still has internet access.

Setting:

networkingMode=mirrored

changes how WSL2 connects to the network.

Instead of relying on a separate virtual NAT adapter, WSL2 mirrors the Windows host's network interface directly.

Adding:

dnsTunneling=true

allows DNS queries to flow through the Windows networking stack, avoiding many name-resolution issues.

In my case, disabling the WSL firewall with:

firewall=false

also eliminated the remaining networking restrictions.

The result was a stable connection that survived restarts and behaved much more reliably than the default NAT configuration.

Verify the Fix

After restarting WSL, test a few commands:

ping 8.8.8.8

ping google.com

curl https://example.com

sudo apt update

If all four work, your networking stack has been restored successfully.

Key Takeaway

If:

Windows has internet,
WSL2 does not,
ping 8.8.8.8 fails,
and every DNS tutorial you've tried hasn't helped,

there's a good chance the problem isn't DNS at all.

It's the virtual networking layer.

Enabling mirrored networking through .wslconfig solved the issue instantly for me, and it's now one of the first things I'll check whenever WSL2 suddenly loses connectivity.

Hopefully, it saves you the same hours of troubleshooting it saved me.

Have you run into other WSL2 networking issues?

I'm curious to hear what caused them and how you fixed them. Share your experience in the comments—your solution might help the next developer searching for "WSL2 no internet."

How to Find a Lost AI-Generated Project on Windows: A Developer's Forensics Guide

Victor Maina — Tue, 30 Jun 2026 10:21:05 +0000

"Lost track of which AI tool built your project? Use this Windows command to find any Vite/React project by date no folder name needed."

A few days ago I had a small panic moment that I think a lot of developers juggling multiple AI coding tools will recognize.

I'm building a membership and matchday platform for Mugutha FC, a community football club in Ruiru, Kenya playing in the Mt. Kenya Regional League. Somewhere in the blur of late-night builds across different AI assistants, I lost track of where one specific version of the dashboard actually lived on my machine.

I had a screenshot. I had a vague memory of a localhost URL. That's it.

Here's how I found it — and the small forensic trick that cracked it open.

The clue I had

The only solid evidence was a screenshot of the dashboard running in my browser:

URL bar: 127.0.0.1:5173
A timestamp visible in the Windows taskbar clock: 6/25/2026, 12:09 AM
Sidebar items: Dashboard, Members, Fixtures, Broadcasts, Templates, Analytics, Settings
A "Welcome, Wakili Eric" greeting and KPI cards for Active Members, Messages Sent, Fixtures This Month, and Expiring Soon

Port 5173 was the first real clue. That's Vite's default dev server port — so whatever this was, it was a React or Vue project scaffolded with Vite, running locally, not deployed anywhere.

But which folder? I have a habit of spinning up project folders across different AI coding assistants while comparing approaches, and frankly I'd lost track of which tool had generated which version.

Turning a screenshot into a search query

The breakthrough was realizing the timestamp in the screenshot wasn't just a "nice to have" — it was a search filter.

Windows has a built-in command called forfiles that can filter files by modification date. Combined with a recursive search and a keyword filter, I could ask Windows: "show me every project file touched on or after this exact date."

First attempt — search by filename:

forfiles /P "C:\Users\%USERNAME%" /S /M *mugutha* /D +0 /C "cmd /c echo @path @fdate @ftime" 2>nul

This searches for any file with "mugutha" in the name. It's a reasonable first guess, but it has an obvious flaw — it only works if the folder itself was named with "mugutha" in it. If an AI tool had scaffolded the project into something generic like dashboard-app or a sandboxed temp folder, this search would find nothing.

So I pivoted to searching by what a Vite project actually contains, rather than what it's named:

forfiles /P "C:\Users" /S /D +06/24/2026 /C "cmd /c echo @path @fdate @ftime" 2>nul | findstr /I "package.json vite.config"

Breaking that down:

/P "C:\Users" — start the search at the Users directory
/S — search recursively, including all subfolders
/D +06/24/2026 — only files modified on or after this date
/C "cmd /c echo @path @fdate @ftime" — for every match, print its full path, date, and time
findstr /I "package.json vite.config" — pipe the results through a filter that only keeps lines mentioning package.json or vite.config, the two files that exist in basically every Vite project root

This is the key idea: instead of guessing a project name, I searched for the fingerprint of the technology — files that are guaranteed to exist if a Vite project exists, regardless of what anyone called the folder.

What came back

The output was immediately interesting:

"C:\Users\CodexSandboxOffline\.codex\.sandbox\cwd\c01195b0e0a02dfa\package.json" 6/24/2026 8:22:03 PM
"C:\Users\CodexSandboxOffline\.codex\.sandbox\cwd\c01195b0e0a02dfa\node_modules\.vite\deps\package.json" ...
"C:\Users\CodexSandboxOffline\.codex\.sandbox\cwd\c01195b0e0a02dfa\node_modules\@vitejs\plugin-react\package.json" ...

And there it was. Not in any of my normal project folders. Not in Desktop\projects\Mugutha_MembersClub. It was sitting inside a completely separate Windows user profile: CodexSandboxOffline.

That folder name told me everything. This particular version of the dashboard hadn't been hand-built by me in a normal project directory — it had been generated and run inside an isolated sandbox environment created by OpenAI Codex, complete with its own user account, its own node_modules, and a dependency tree showing @vitejs/plugin-react, lightningcss, rolldown, and lucide-react — a modern, fast Vite + React toolchain.

Mystery solved. The dashboard in my screenshot wasn't from a different session of the same tool I'd been using elsewhere — it was a different AI assistant entirely, sandboxed in its own corner of the filesystem the whole time.

The actual lesson here

The interesting part of this story isn't really about Codex or sandboxes specifically. It's a pattern worth remembering if you work across multiple AI coding tools:

A screenshot timestamp is a search filter, not just a memory aid. Once I treated the clock in the corner of my screenshot as a literal date filter for forfiles, the search went from "guess the folder name" to "show me everything touched in this exact window" — which is a much more reliable way to search.

Search by what a project contains, not what it's called. I didn't know the folder name. I did know it had to contain package.json and likely vite.config. Searching for the signature of the toolchain found it in seconds, in a location I never would have guessed to look — a separate sandboxed Windows user profile I didn't even know existed on my own machine.

Different AI coding assistants can leave very different fingerprints on disk. Some generate plain project folders in your normal workspace. Others, like Codex's sandbox mode, isolate themselves into entirely separate environments — different user accounts, different node_modules, different everything. If you're switching between tools, it's worth knowing where each one actually puts its files.

The command, if you need it

If you're in the same situation — you know roughly when something was built but not where — here's the general-purpose version:

forfiles /P "C:\Users" /S /D +MM/DD/YYYY /C "cmd /c echo @path @fdate @ftime" 2>nul | findstr /I "package.json vite.config"

Swap package.json and vite.config for whatever filename fingerprint matches your stack — requirements.txt for Python, Cargo.toml for Rust, composer.json for PHP. The principle is the same: search for the file that's guaranteed to exist, not the folder name you might have forgotten.

Once you find a candidate, confirm it before getting too excited:

cd path\to\folder
type package.json

That one command tells you the project name, dependencies, and scripts — enough to know immediately whether you've found the right thing.

Small investigation, but a satisfying one. Sometimes debugging isn't about the code at all — it's about reconstructing your own past actions from whatever digital breadcrumbs you left behind.

"What AI tool do you use? Share your tips below!"

How to Automate Image CAPTCHA Solving Using 2Captcha API with Python & Selenium

Victor Maina — Wed, 23 Jul 2025 21:33:50 +0000

CAPTCHAs are a common security measure to prevent bots from accessing websites. While they serve a legitimate purpose, they can be a hurdle for automation tasks. In this guide, we'll explore how to automate solving image-based CAPTCHAs using the 2Captcha API with Python and Selenium.

Prerequisites
Before we begin, ensure you have:

Python installed (3.6+ recommended)

A 2Captcha API key (Sign up here)

Basic knowledge of Selenium WebDriver

Required Python packages:

bash
pip install selenium requests pillow python-dotenv twocaptcha-python
Step 1: Setting Up the Environment
1.1 Install Required Libraries
bash
pip install selenium requests pillow python-dotenv twocaptcha
1.2 Store API Key in .env
Create a .env file:

env
APIKEY=your_2captcha_api_key_here
1.3 Initialize Selenium WebDriver
python

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager

def create_browser(headless=False):
    options = Options()
    options.add_argument("--disable-blink-features=AutomationControlled")
    options.add_argument("--no-sandbox")
    options.add_argument("--disable-dev-shm-usage")

    if headless:
        options.add_argument("--headless=new")

    driver = webdriver.Chrome(
        service=Service(ChromeDriverManager().install()),
        options=options
    )
    return driver

Step 2: Extracting the CAPTCHA Image
We need to locate the CAPTCHA image and download it for processing.

python

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import base64
import requests

def get_captcha_image(driver):
    try:
        captcha_img = WebDriverWait(driver, 10).until(
            EC.presence_of_element_located((By.XPATH, 
                "//img[contains(@src, 'captcha') or contains(@src, 'code')]"))
        )

        img_src = captcha_img.get_attribute('src')
        if img_src.startswith('data:image'):
            img_data = base64.b64decode(img_src.split(',')[1])
        else:
            img_data = requests.get(img_src).content

        with open('captcha.jpg', 'wb') as f:
            f.write(img_data)

        return 'captcha.jpg'
    except Exception as e:
        print(f"❌ Failed to get CAPTCHA: {str(e)}")
        return None

Step 3: Solving CAPTCHA Using 2Captcha API
Now, we'll send the CAPTCHA image to 2Captcha and retrieve the solution.

python

from twocaptcha import TwoCaptcha
from dotenv import load_dotenv
import os

load_dotenv()
API_KEY = os.getenv("APIKEY")
solver = TwoCaptcha(API_KEY)

def solve_captcha(image_path):
    try:
        result = solver.normal(image_path, numeric=0, minLen=4, maxLen=6)
        return result['code']
    except Exception as e:
        print(f"❌ CAPTCHA solving failed: {str(e)}")
        return None

Step 4: Submitting the Solved CAPTCHA
Once we have the solution, we fill the input field and submit the form.

python

def submit_captcha_solution(driver, solution):
    try:
        input_field = WebDriverWait(driver, 10).until(
            EC.presence_of_element_located((By.XPATH, 
                "//input[contains(@name, 'captcha') or contains(@id, 'captcha')]"))
        )
        input_field.clear()
        input_field.send_keys(solution)

        submit_button = WebDriverWait(driver, 10).until(
            EC.element_to_be_clickable((By.XPATH, "//button[@type='submit']"))
        )
        submit_button.click()
        return True
    except Exception as e:
        print(f"❌ Failed to submit CAPTCHA: {str(e)}")
        return False

Step 5: Putting It All Together
Now, let's combine all steps into a single workflow.

python

def automate_captcha_solving(driver, url):
    driver.get(url)

    # Step 1: Get CAPTCHA image
    captcha_image = get_captcha_image(driver)
    if not captcha_image:
        return False

    # Step 2: Solve CAPTCHA
    solution = solve_captcha(captcha_image)
    if not solution:
        return False

    # Step 3: Submit solution
    return submit_captcha_solution(driver, solution)

# Example Usage
if __name__ == "__main__":
    driver = create_browser(headless=False)
    success = automate_captcha_solving(driver, "https://example.com/captcha-page")
    print("✅ CAPTCHA solved successfully!" if success else "❌ Failed to solve CAPTCHA")
    driver.quit()

Common Issues & Fixes

CAPTCHA Not Detected Fix: Adjust the XPath to match the website’s CAPTCHA element.

Example:

python
"//img[contains(@class, 'captcha-img')]"

2Captcha API Fails Fix: Check your API key balance and ensure the image is clear.

Enhance image quality before sending:

python

from PIL import Image, ImageFilter, ImageEnhance

def enhance_image(image_path):
    img = Image.open(image_path)
    img = img.convert('L')  # Grayscale
    enhancer = ImageEnhance.Contrast(img)
    img = enhancer.enhance(2.0)  # Increase contrast
    img.save('enhanced_captcha.jpg')
    return 'enhanced_captcha.jpg'

Submit Button Not Clickable Fix: Use JavaScript click as a fallback:

python
driver.execute_script("arguments[0].click();", submit_button)
Conclusion
By using 2Captcha API with Selenium, we can automate CAPTCHA solving efficiently. This method is useful for:

Web scraping (where CAPTCHAs block data extraction)

Automated testing (bypassing CAPTCHAs in test environments)

Bot automation (for repetitive tasks requiring login)

Final Thoughts
While automation is powerful, always respect website policies and use this method ethically. Some websites may block automated CAPTCHA-solving attempts, so use it responsibly.

How to Create and Publish a VS Code Extension

Victor Maina — Sat, 19 Jul 2025 23:47:50 +0000

📦 Step 1: Install Required Tools
We started by installing the Yeoman generator for VS Code:

npm install -g yo generator-code
Then we used the generator to scaffold a new extension:

yo code
💡 This gives you multiple options like creating a TypeScript/JavaScript extension, web extension, or even a theme/snippet pack. We selected the basic TypeScript extension for this demo.

⚙️ Step 2: Install the VSCE Publisher Tool
VSCE (Visual Studio Code Extension) is the CLI tool used to package and publish your extension to the marketplace.

We installed it using:

npm install -g @vscode/vsce

⚠️ If you see a warning like EBADENGINE, it means your Node.js version is slightly outdated. VSCE is asking for Node >=20.18.1, while you have v20.17.0. Consider updating Node.js if issues persist.

🔐 Step 3: Get a Personal Access Token (PAT)
To publish to the VS Code Marketplace, you need a Personal Access Token (PAT) from your Microsoft account via Azure DevOps. Here's how:

Go to: https://dev.azure.com

In the top-right corner, click on your profile picture → "Personal access tokens".

Click New Token:

Organization: All accessible organizations

Scopes: Select only "Marketplace" → "Manage"

Expiry: You can choose 90 days or custom

Save the token (copy it somewhere safe — it's shown once).

👤 Step 4: Create a Publisher
Before publishing, you need to create a publisher (your dev alias or brand name):

vsce create-publisher your-publisher-name
You'll be asked for:

Your Personal Access Token

Publisher display name

This will register your publisher to the VS Code Marketplace.

📦 Step 5: Package Your Extension
Now, navigate into your extension folder and run:

vsce package

This will generate a .vsix file (e.g., my-extension-0.0.1.vsix) that contains your whole extension, ready for publishing or manual installation.

🚀 Step 6: Publish to Marketplace
Once packaged, you can publish directly:

vsce publish

Or specify a version bump manually:

vsce publish minor vsce publish major vsce publish patch
🔑 You'll be prompted for your PAT again unless it's cached.

🎯 Optional: Install Locally for Testing
Before publishing, you can test your .vsix locally by running:

code --install-extension my-extension-0.0.1.vsix

💰 Do People Earn from Publishing Extensions?
Publishing alone doesn’t pay. However, you can monetize in several ways:

Offer pro features via APIs or subscriptions

Integrate SaaS tools (e.g., integrations with GPT, Firebase, etc.)

Offer paid versions outside the marketplace

Accept donations via GitHub Sponsors or Buy Me a Coffee

Build a portfolio/brand that leads to freelance or dev job offers

✅ Final Thoughts
Now that your extension is published:

Track downloads & installs via Visual Studio Marketplace

Update frequently with new features and fixes

Share it on GitHub, Reddit, Twitter, and developer forums

What is a Slug and Why Your Website Needs It for Better SEO

Victor Maina — Thu, 10 Jul 2025 23:07:13 +0000

When building modern websites especially e-commerce stores or blogs — you'll often hear developers say, "Let's create a slug for this page." But what exactly is a slug, and why should you care?

A slug is the part of a URL that comes after the domain name and identifies a specific page in a readable way.

For example:

/hoodies

/blog/why-seo-matters

/product/254-streetwear-shirt

Why Not Use an ID Instead?
You could build URLs like this:

/product?id=12345
But slugs are better because:

✅ They're readable
✅ They're memorable
✅ They look cleaner
✅ And... Google loves them!

Why Slugs Help SEO
Here’s why slugs are powerful for SEO (Search Engine Optimization):

Keywords in Slugs Improve Ranking
When someone searches “254 streetwear shirt”, Google checks if those words appear in your slug.

Users Are More Likely to Click Clean URLs
Which would you click?

/product?id=12345

/products/254-streetwear-shirt

Slugs Help Build Trust
Clean, human-readable URLs feel more legit and professional.

🔧 How We Use Slugs in Code (Next.js Example)
In our e-commerce project, we use Next.js with a dynamic route:

/app/[slug]/page.tsx
This tells Next.js:

"Any product or blog post that has a unique slug like /hoodies or /254-threads-cap will load this page."

Then in code, we access that slug using:

async function Page({ params }: { params: { slug: string } }) {
  const slug = params.slug;
  // Now you can query your database for the product with that slug
}

🛍 Real World Example
If you’re selling a hoodie named "254 Threads Hoodie", your product URL would look like:

/products/254-threads-hoodie
Instead of:

/products?id=76383

That last part — like "254-streetwear-shirt" — is the slug.

Slugs are more than just fancy URLs. They’re:

A big part of your user experience
A simple but powerful SEO strategy
And a best practice for modern websites and apps

📣 So next time you're naming a blog post or product page, think about your slug — your future self (and Google) will thank you!

Why Your Favicon Isn't Updating Across All Browsers (And How to Fix It)

Victor Maina — Tue, 01 Jul 2025 11:51:29 +0000

Have you ever updated your favicon in a Next.js project, only to see the new icon show up in one browser (like Edge) but not in others like Brave or Chrome?

You're not alone—and there's a good reason for this.

Modern browsers—especially Chromium-based ones like Brave, Chrome, and Opera—aggressively cache favicons. This means even if you've updated the favicon.ico file and restarted your dev server, the browser might still display the old one from cache.

This caching behavior improves performance, but it causes confusion during development.

✅ How I Fixed It (in Brave)
Here’s what finally worked:

🔁 1. Hard Refresh the Tab
Force Brave to reload without using cache:

Windows/Linux: Ctrl + Shift + R

macOS: Cmd + Shift + R

If that fails…

🧼 2. Clear the Favicon Cache
Brave (and Chrome) provide a hidden tool for this:

Open chrome://favicon-internals in Brave

Click on Clear Favicon Cache

Reload your site

Still not working? Try one more thing…

📝 3. Rename the Favicon File
Browsers cache based on the URL. Renaming the file tricks the browser into thinking it’s a new one.

Rename your file to something like favicon-v2.ico

Update your Next.js metadata:

tsx
Copy
Edit
export const metadata = {
title: "254THREADS",
icons: {
icon: "/favicon-v2.ico",
},
};
Now restart your dev server and refresh the page.

💥 That One Time globals.css Crashed My Next.js Build

Victor Maina — Mon, 30 Jun 2025 21:33:24 +0000

You ever update some colors in your tailwind.config.ts and suddenly your entire Next.js app refuses to compile? Yeah. That happened to me.

Error I saw:

SyntaxError: Unexpected token, expected "(" (18:19)
Import trace for requested module:
./src/app/globals.css
And I was like... huh? That file only has three Tailwind directives. What gives?

🔍 The Culprit? My PostCSS Config
Turns out, the issue wasn’t in the CSS at all — it was my postcss.mjs file. I had:

js
plugins: {
tailwindcss: {},
}
What I didn't have was this essential plugin:

js
autoprefixer: {}, // <- 👀 this bad boy is mandatory
Without autoprefixer, Next.js quietly panics when it tries to compile CSS — and throws an error totally unrelated to the root cause. Classic.

🛠️ The Fix
Install Autoprefixer

bash
npm install -D autoprefixer
Update postcss.mjs

js
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

export default config;
Clear the cache & restart

bash
rm -rf .next
npm run dev
Boom 💣 No more phantom syntax errors.

💡 Final Tip
If your Next.js build suddenly explodes and you didn’t even touch JavaScript, suspect your CSS pipeline. It’s always the quiet files 😅

Don’t Click, Just grep: The Smart Way to Find Files Fast

Victor Maina — Mon, 16 Jun 2025 19:12:24 +0000

How to Use grep to Find Files by Extension Like a Command-Line Ninja
Ever found yourself swimming in a sea of downloads trying to fish out all the .jpg images? If you love clean terminals and fast results, grep has your back.

Here’s how to use grep like a pro to filter files by extension straight from your terminal.

📁 List .jpg Files in Downloads
bash

ls ~/Downloads | grep '\.jpg$'

📁 Case-Insensitive Search (JPG, jpg, JpG...)
bash

ls ~/Downloads | grep -i '\.jpg$'

🔁 Search Recursively Through Subfolders
bash

find ~/Downloads -type f | grep '\.jpg$'

💡 Bonus: Windows Equivalent
CMD:
cmd

dir %USERPROFILE%\Downloads\*.jpg

PowerShell:
powershell

Get-ChildItem "$env:USERPROFILE\Downloads" -Filter *.jpg

Getting set with Athena in simple steps

Victor Maina — Thu, 17 Apr 2025 12:53:40 +0000

Getting Started with Amazon Athena:

Query Your S3 Data with SQL
Amazon Athena makes it incredibly easy to explore and analyze data stored in Amazon S3 using standard SQL queries. Whether you're working with log files, application data, or structured datasets, Athena allows you to treat your S3 files as a database—no ETL or server setup required.

🧠 What Is Amazon Athena?
Amazon Athena is a serverless, interactive query service that lets you analyze data in Amazon S3 using standard SQL. There's no infrastructure to manage, and you only pay for the queries you run.

Athena supports various file formats including:

CSV

JSON

ORC (Optimized Row Columnar)

Apache Avro

Parquet

It’s also optimized for performance through parallelism, making it fast and efficient for large datasets.

💸 How Much Does Athena Cost?
Athena charges you based on the amount of data scanned per query. As of writing, the cost is $5 per TB scanned, so it’s important to optimize your data (e.g., by compressing it or using columnar formats like Parquet or ORC).

📦 Step 1: Prepare Your S3 Bucket

If this is your first time using Athena, you’ll need to set up an S3 bucket to store your data. Here’s how:

Go to the S3 console and create a new bucket.

Make sure you note the AWS region—Athena and the S3 bucket must be in the same region.

Upload your dataset. For this tutorial, we’re using a sample Order data CSV file.

We’ll also create a second S3 bucket to store the results of our Athena queries (this is required by Athena).

🧰 Step 2: Set Up AWS Glue for Schema Discovery
Athena needs a schema to understand your data. Instead of defining it manually, we’ll use AWS Glue to automatically crawl and catalog our dataset.

Go to the AWS Glue Console.

Create a new database (e.g., order_data_db).

Create a crawler:

Set the source as your S3 data bucket.

Choose the database you just created.

Run the crawler to populate the schema.

🔍 Step 3: Query Your Data in Athena

Now that the table is ready, it’s time to query your data:

Open the Athena Query Editor.

Make sure the correct database is selected.

Run a sample SQL query like:

SELECT * FROM orders LIMIT 10;
You’ll see the results right in your browser. Athena also saves them as CSV files in your specified results bucket.

📊 Bonus: Visualize Your Data with Amazon QuickSight
Want to turn your raw queries into dashboards? You can connect Athena to Amazon QuickSight to create dynamic visualizations of your data. This is great for exploring patterns or trends in logs, sales data, and more.

🧹 Step 4: Clean Up Your Resources
Once you're done, be sure to delete any AWS resources to avoid ongoing charges:

Delete the S3 buckets you created (both the data and the results buckets).

Delete the AWS Glue crawler and database.

Remove any saved Athena queries or saved workgroups, if applicable.

Remember, Athena’s billing is based on the volume of data scanned cleanups and query optimization are key to keeping costs low.

✅ Wrapping Up
Amazon Athena is a powerful tool that simplifies querying large datasets stored in S3 using familiar SQL syntax. It’s perfect for analysts, engineers, and data enthusiasts who want fast insights without the overhead of managing infrastructure.

In this tutorial, we walked through setting up S3, using AWS Glue to create a schema, querying with Athena, and finally cleaning up your resources. Now you’re ready to start analyzing your own data!

Would you like me to help turn this into a blog post or Markdown file, or add code blocks/screenshots for each step?

Reason

Resolving CORS Issues

Victor Maina — Mon, 10 Mar 2025 19:59:16 +0000

CORS (Cross-Origin Resource Sharing) errors occur when the frontend and backend are hosted on different domains or ports. To fix this:

Install CORS Middleware:
In your backend, install the cors package:

bash
Copy
npm install cors
Enable CORS:
Update your backend code to allow requests from the frontend:

javascript
Copy
const cors = require('cors');
const express = require('express');
const app = express();

app.use(cors({
origin: 'http://102.37.21.212:3000', // Frontend URL
credentials: true
}));

app.post('/auth/login', (req, res) => {
// Handle login
});

app.listen(4000, () => {
console.log('Backend running on port 4000');
});
Restart the Backend:
Restart the backend to apply the changes:

bash
Copy
pm2 restart uvotake-backend
This ensures the backend accepts requests from the frontend.

Opening Ports in Azure To allow external access to your app, open the necessary ports in Azure:

Go to your VM in the Azure Portal.

Under Networking, add inbound port rules:

Frontend: Open port 3000 for HTTP access.

Backend: Open port 4000 for API access.

Save the rules and test connectivity:

bash
Copy
curl http://:3000
curl http://:4000/auth/login
This ensures your app is accessible to users.

Using PM2 for Process Management To keep your app running after disconnecting from the VM, use PM2:

Install PM2:

bash
Copy
sudo npm install -g pm2
Start the App:
Use PM2 to serve the frontend:

bash
Copy
pm2 serve build 3000 --name "uvotake-frontend"
Save the Process:
Ensure the app starts automatically after a reboot:

bash
Copy
pm2 save
pm2 startup
PM2 ensures your app runs continuously.

Fixing "Reached Heap Limit" Errors

Victor Maina — Mon, 10 Mar 2025 19:58:38 +0000

When building your React app, you might encounter FATAL ERROR: Reached heap limit. This happens because the VM has limited memory (e.g., 1 GiB). Here’s how to fix it:

Increase Memory for Node.js:
Update the build script in package.json:

json
Copy
"build": "node --max-old-space-size=2048 $(which react-scripts) build"
This allocates 2 GB of memory for the build process.

Add Swap Space:
Create a swap file to provide additional virtual memory:

bash
Copy
sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
Rebuild the App:
Run the build again:

bash
Copy
npm run build
This resolves memory issues during the build process.

Creating a Virtual Machine (VM) on Azure

Victor Maina — Mon, 10 Mar 2025 19:56:53 +0000

Hosting your app starts with creating a VM on Azure. Here’s how to do it:

Go to the Azure Portal and click Create a Resource.

Select Virtual Machine and choose a configuration (e.g., Ubuntu 24.04, Standard B1s).

Configure networking, storage, and SSH keys for secure access.

Once the VM is created, note its public IP address (e.g., 102.37.21.212).

Use SSH to connect to the VM:

bash
Copy
ssh -i azureuser@
This VM will serve as the hosting environment for your app.

Uploading Files to the VM Without Docker To deploy your app without Docker:

Transfer Files:
Use scp to copy your frontend and backend files to the VM:

bash
Copy
scp -r -i azureuser@:
Example:

bash
Copy
scp -r -i ~/keys/uvotakeV_key.pem ~/Desktop/frontend azureuser@102.37.21.212:/home/azureuser/frontend
Install Dependencies:
SSH into the VM and install dependencies:

bash
Copy
cd ~/frontend
npm install
Build and Serve:
Create a production build and serve it:

bash
Copy
npm run build
serve -s build -l 3000
This approach avoids Docker and directly deploys your app to the VM.