DEV Community: Rajesh Singh

SlimPDF - A Lightweight and Privacy-Friendly PDF Compressor

Rajesh Singh — Mon, 17 Nov 2025 11:47:07 +0000

If you’ve ever tried emailing a PDF only to see the dreaded “File size too large” popup, welcome to the club.
And if you’ve ever uploaded a suspiciously important PDF to an online “FREE PDF COMPRESSOR 🔥” website, only to worry whether your passport is now the newest NFT on the dark web… welcome to the club’s VIP lounge. 😅

At some point, I got tired of choosing between:

Bloated PDFs, or
Sending sensitive documents to random cloud services

So, like any developer on a mission, I built my own solution.

Meet SlimPDF: a tiny, elegant, local-first PDF compressor app built using Flask and Ghostscript, designed to shrink your PDFs safely and privately, everything stays on your machine.

🔗 GitHub Repo: https://github.com/rajks24/SlimPDF

🎯 Why I Built SlimPDF

Most PDF compression tools are convenient — but they run on someone else’s server.
That’s fine for a holiday brochure… but not so fine for:

Passport scans
Visa documents
Work contracts
Medical files
Bank statements
School forms

Anything that makes your anxiety go up when uploading it online 😬

I needed a tool that:

✔ Works offline
✔ Compresses PDFs instantly
✔ Never uploads anything anywhere
✔ Is simple enough for anyone to use
✔ And customizable enough for any dev to extend

Thus, SlimPDF was born.

⚡ What SlimPDF Does

SlimPDF is a minimalistic web app (built with Flask) where you:

Upload a PDF
Click “Compress”
Instantly download a lighter version of it

It quietly uses Ghostscript under the hood, a battle-tested tool that the industry has trusted for decades for PDF processing.

No ads.
No tracking.
No server logs.
No hidden “your files will be deleted in 24 hours” promises.
Just pure, local PDF slimming.

🚀 Quick Start to run it locally

If you want to try the app yourself:

Clone the repo

git clone https://github.com/rajks24/SlimPDF
cd SlimPDF

Install dependencies

pip install -r requirements.txt

Install Ghostscript

macOS (brew):

brew install ghostscript

Ubuntu/Debian:

sudo apt install ghostscript

Windows:
Download the Ghostscript installer:
https://ghostscript.com/releases/index.html

Run the app

python main.py

Visit:
➡️ http://localhost:5000

Now you can compress PDFs right from your machine.

🎉 Final Thoughts

SlimPDF started as a weekend project… but quickly became something I personally use regularly.
We all deal with PDFs, and we all care about privacy, so building a tool that combines both felt meaningful.

If you:

Have ever been anxious uploading personal PDFs online
Want a lightweight, open-source, local PDF compressor
Or want to learn Flask through a practical example …then SlimPDF might be worth checking out.

🔗 GitHub Repo: https://github.com/rajks24/SlimPDF

⭐ If you like it, consider "like" the repo, it helps others find it too!

Thanks for reading, and may your PDFs stay slim and your stress stay low. 😄

RAG Chunking Strategies That Actually Work (and Why Most Don’t)

Rajesh Singh — Tue, 07 Oct 2025 09:11:35 +0000

So, you’ve decided to build a RAG (Retrieval-Augmented Generation) system. Congrats! 🎉
You’ve just volunteered for one of AI’s most underrated challenges: getting your data to play nice with your LLM.

Let me paint a picture.

You’ve got your fancy LLM humming, the vector DB is ready, and you excitedly upload your first PDF.
Then you ask something innocent like:

“What’s the company policy on remote work?”

…and your LLM replies with:

“The company policy regarding quantum physics states that Schrödinger’s cat may work remotely on Tuesdays.”

Wait, what?!
Welcome to the wild world of RAG data ingestion, where your biggest enemy isn’t the model, but your chunking strategy.

The “Just Chunk It” Fallacy (a.k.a. Fixed-Size Chunking)

Maybe it’s your first day building RAG. You think,How hard can this be?

“I’ll split my text every 500 characters.”

Here’s what happens next:

text = "The Python Global Interpreter Lock (GIL) is a mutex that protects..."
chunks = [text[i:i+50] for i in range(0, len(text), 50)]

Result:

chunks[0] = "The Python Global Interpreter Lock (GIL) is a mu"
chunks[1] = "tex that protects access to Python objects, pre"

Congratulations — you just dissected the word “mutex.”
Your LLM now thinks you’re talking about Egyptian relics or LaTeX syntax.

✅ The Fix: Smart Chunking (Recursive Character Text Splitting)

You wouldn’t interrupt someone mid-word, right?

Do the same for your text. Use recursive splitting that respects natural boundaries:

from langchain.text_splitter import RecursiveCharacterTextSplitter

splitter = RecursiveCharacterTextSplitter(
    chunk_size=500,
    chunk_overlap=50,
    separators=["\n\n", "\n", ". ", " ", ""]
)

This tells your splitter:

“Start with paragraphs. If that fails, try sentences. Still too long? Fine, use spaces. But please, don’t butcher words.”

Different documents deserve different chunking styles:

🧠 Technical docs: 800–1000 chars — context matters. (Semantic chunking)
🧑‍💻 Code: Keep functions intact. (Syntax-aware chunking)
📊 Tables: Don’t split them at all. (Structure-preserving chunking)

Metadata Amnesia - The Context Killer

You’ve ingested 500 documents.
A user asks about “Q2 2024 sales strategy,” and your RAG confidently answers using… Q2 2019 data. 🤦‍♂️

Why? Because you chunked text with no metadata & no context.

✅ The Fix: Metadata-Enriched Chunking

chunk_metadata = {
    "source": "Q2_2024_Sales_Strategy.pdf",
    "document_type": "strategic_plan",
    "date": "2024-04-01",
    "department": "Sales",
    "author": "Jane Smith",
    "page": 5,
    "section": "Market Analysis",
    "quarter": "Q2",
    "year": 2024,
    "tags": ["sales", "strategy", "B2B"]
}

Now your vector DB can do this:

results = vectordb.search(
    query="sales strategy",
    filter={"year": 2024, "quarter": "Q2"}
)

Boom, the context restored.

“PDF Is Just Text” - The Great Delusion

PDFs are not just text. They can be:

Scanned images (OCR required)
Multi-column layouts
Tables of doom
Pages full of header/footer noise

Naïve parsing gives you this:

"Product Q1 Sales Q2 Sales Widget $100K $150K"

Your LLM now believes “Q1 Sales Q2 Sales Widget” is a product line. 💀

✅ The Fix: Format-Specific Parsing

For normal PDFs:

import pdfplumber
with pdfplumber.open("document.pdf") as pdf:
    for page in pdf.pages:
        text = page.extract_text()
        tables = page.extract_tables()

For scanned PDFs:

import pytesseract
from pdf2image import convert_from_path

images = convert_from_path('scanned.pdf')
text = "".join(pytesseract.image_to_string(img) for img in images)

Want to know if OCR is needed?

def is_scanned_pdf(pdf_path):
    with pdfplumber.open(pdf_path) as pdf:
        text = pdf.pages[0].extract_text()
        return len(text.strip()) < 50

“Tables Are Just Text” - No, They’re Not.

Without structure, your tables turn into gibberish.

Original:

| Metric  | Q1    | Q2     | Q3    |
|---------|-------|--------|-------|
| Revenue | $1M   | $1.5M  | $2M   |
| Costs   | $600K | $700K  | $800K |

Parsed (naïve):

"Metric Q1 Q2 Q3 Revenue $1M $1.5M $2M Costs $600K $700K $800K"

✅ The Fix:

Use Structured-to-Unstructured Transformation.

Option 1 - Markdown Table Serialization

def table_to_markdown(table):
    headers = table[0]
    md = "| " + " | ".join(headers) + " |\n"
    md += "| " + " | ".join(["---"] * len(headers)) + " |\n"
    for row in table[1:]:
        md += "| " + " | ".join(str(cell) for cell in row) + " |\n"
    return md

Option 2 - Natural Language Linearization

def table_to_context(table):
    headers = table[0]
    return "\n".join(
        f"{row[0]}: " + ", ".join(f"{headers[i]} is {row[i]}" for i in range(1, len(row)))
        for row in table[1:]
    )

💡 Pro tip: Do both! Store markdown for humans, and natural language for the LLM.

“One Size Fits All” Myth (Chunk Size Disaster)

If you believe “500 characters is the magic chunk size,” brace for chaos.
Every document type is a snowflake.

✅ The Fix: Domain-Adaptive Chunking

CHUNK_CONFIGS = {
    "code": {"size": 300, "overlap": 30},
    "legal": {"size": 1000, "overlap": 200},
    "technical_manual": {"size": 800, "overlap": 100},
    "chat_logs": {"size": 200, "overlap": 20},
    "general": {"size": 500, "overlap": 50}
}

def get_chunker(document_type):
    config = CHUNK_CONFIGS.get(document_type, CHUNK_CONFIGS["general"])
    return RecursiveCharacterTextSplitter(
        chunk_size=config["size"],
        chunk_overlap=config["overlap"]
    )

Pick your chunker wisely.

Duplicate Content Problem

Ingest from multiple sources, and soon your system starts echoing itself — five identical answers, all slightly different.

✅ The Fix: Semantic Deduplication

Approach 1 - Fuzzy Matching

from difflib import SequenceMatcher

def are_chunks_similar(c1, c2, threshold=0.85):
    return SequenceMatcher(None, c1, c2).ratio() >= threshold

Approach 2 - Hash-Based Deduplication

import hashlib

def hash_chunk(text):
    normalized = ' '.join(text.lower().split())
    return hashlib.sha256(normalized.encode()).hexdigest()

Because no one likes that “I’ve heard this before” vibe.

Closing Thoughts

RAG ingestion is hard. Documents are messy. And there’s always that one PDF that breaks everything.

But here’s the truth:
Everyone’s RAG system is held together with duct tape and prayer.
Knowing where to apply the duct tape is the trick.

Start simple, then

Get basic chunking working
Add metadata
Test with real documents
Iterate based on failure

The best RAG system isn’t the one with fancy tech - it’s the one that actually answers user questions correctly.

So go forth, and chunk responsibly.

Got your own RAG horror story? Drop it in the comments😅
If you found this helpful, smash that ❤️ and follow me for more dev adventures!

From Sheets to Quizzes: Automating Google Forms Like a Pro

Rajesh Singh — Mon, 29 Sep 2025 11:01:01 +0000

The Problem: Quizzes are Fun, Making Them is Not

Let’s be real, creating quizzes in Google Forms is fine the first time. But after we’ve clicked that purple “+” button a hundred times, added multiple choice answers manually, and squinted at points for each question, the fun evaporates very soon.

Teachers, trainers, even techies - we all love quizzes. But nobody loves repetitive data entry.

So, why not automate the Google Sheets to do the boring stuff?

The Idea: Sheet In, Quiz Out

The concept is simple:

Write the quiz questions in a Google Sheet.
Click a shiny new menu option called Form Builder.
Watch as a fully published Google Forms Quiz appears - sections, points, correct answers, everything.

So simple, that’s right! ✨

The Stack

This project builds on:

Google Sheets (where the questions live)
Google Apps Script (the automation brains)
Google Forms (the end product: quizzes!)

And of course, it’s all open-source on GitHub: 👉 Google Forms Quiz Builder Repo

The Sheet Format (Where the Magic Begins)

The sheet starts with a few metadata rows:

Key	Value	Notes
`FormTitle`	Math Assignment 1	Quiz title
`FormDescription`	Maths quiz for beginner	Optional
`LimitOneResponse`	FALSE	TRUE/FALSE

Then we add a blank row, followed by the question table:

Section	Question	Type	Points	AnswerA	AnswerB	AnswerC	AnswerD
Easy	Which is larger: 0.3 or 0.25?	MCQ	2	0.3	0.25
Easy	Explain steps to get 25% as a decimal	SA	2
Medium	Mark all that equal 2/3.	MSQ	3	*2/3	*0.6667	0.65	*0.666...

👉 See the full format guide here: Questions.sheet-format.md

👉 The sample quiz sheet data can be found at sample_questions.csv

Oh, and notice the * before some answers? That’s how you mark the correct ones for MSQs. Sneaky but simple.

The Script

At the heart of this project is a neat Apps Script file (Code.gs).

What it does:

Reads the Sheet data.

Creates a Google Form (from the forms template with settings or freshly generated).
Adds sections with total points.
Supports SA, PARA, MCQ, MSQ question types.
Publishes the quiz automatically so students don’t get the dreaded We’re sorry, this document is not published error.

Full code here: src/Code.js

The Output

Run the script and boom 💥 a new Google Form quiz is ready to go:

Sections clearly separated with total points.
Auto-collected emails.
A required “Student Name” field.
MCQs and MSQs shuffled for fairness.
Linked responses back into the same spreadsheet.

The Demo Video

Why read when you can watch?
I recorded a full walkthrough of the project

Setup in 3 Steps

Copy the quiz data into then google Sheet.
Open Extensions → Apps Script, paste the code from the repo.
Reload the sheet, click Form Builder → Create Form (Confirm).

For the detailed step-by-step process follow: SETUP.md

Why This Matters

For teachers: less manual and smart automation.
For devs: a nice Apps Script case study.

🎉 Wrap Up

This was one of those projects where a tiny bit of scripting makes a huge difference.
From “ugh, more manual quiz creation” to “click and done”.

If you liked this, do me a favor:

⭐ Star the repo
📺 Watch the demo
🔗 Share it with someone who still builds Google Forms by hand (and save them some pain!)

[Boost]

Rajesh Singh — Thu, 24 Apr 2025 00:05:53 +0000

Vagrant on Apple Silicon M4: KVM vs QEMU vs Libvirt – What Works Best?

Rajesh Singh — Wed, 23 Apr 2025 09:08:46 +0000

If we’re diving into Vagrant and working on a shiny new M4 Mac (or any other Apple Silicon M series), we’ve probably stumbled across terms like KVM, QEMU, and Libvirt as providers. But which one fits our workflow best - especially when dealing with Apple Silicon?

Here’s a simple, real-world comparison.

Quick Intro: The options

KVM – A Linux-native virtualization technology that’s lightning fast, but strictly tied to Linux kernels.
QEMU – A powerful emulator and virtualizer, supports cross-architecture (e.g., x86 VMs on ARM). It’s highly versatile and works well for testing and development across different architectures.
VMware Fusion – Another commercial option, providing robust virtualization capabilities on macOS, though its support for Apple Silicon is still evolving.
Libvirt – A management layer that works on top of KVM or QEMU to provide better VM orchestration (snapshots, port forwarding, etc.).

The Apple Silicon Challenge

Here’s where things get tricky on the Mac — especially with Apple Silicon:

❌ KVM is a no-go

KVM requires /dev/kvm, a kernel module only available on Linux, and not supported on macOS.
Apple Silicon (M1–M4) doesn’t allow KVM passthrough even via emulation layers. See here.

⚠️ Libvirt adds complexity on macOS

Libvirt doesn’t run natively on macOS. To use it, we would need to spin up a Linux VM (via Colima, Lima, or UTM) just to run QEMU and Libvirt.
While doable, it’s like building a tower to launch a paper airplane - overkill for most development use cases.

QEMU: Your Friendly Option on Apple M4
Thankfully, QEMU works directly on macOS, supports ARM64 (native for M1–M4), and integrates with Vagrant using vagrant-qemu.

It’s:

✅ Native to Apple Silicon
✅ Great for cross-architecture testing
✅ Easy to set up with brew install qemu vagrant + plugin
✅ Ideal for lightweight VMs and multi-purpose dev

We can pair QEMU with ARM-based boxes like generic/ubuntu2204-arm64 or others from Vagrant Cloud.

💡 Want to get started fast? Try:

brew install qemu
vagrant plugin install vagrant-qemu

vagrant init perk/ubuntu-2204-arm64
vagrant up --provider=qemu

Comparing the Providers

Provider	macOS Native	M4 Compatible	Performance	Complexity	Best Use Case
KVM	No	No	High	Simple (on Linux only)	Linux-based dev servers
QEMU	Yes	Yes	Medium	Easy on Mac	Local multi-arch dev
Libvirt	No (indirect)	Only with Linux VM	(via KVM/QEMU)	Complex on macOS	Advanced VM orchestration (on Linux)

So Which One to choose on Apple M4?

For macOS Silicon chip users:

✅ QEMU is your best bet: It runs natively on Apple Silicon, supports ARM64 architecture, and integrates seamlessly with Vagrant using the vagrant-qemu plugin. This makes it an excellent choice for lightweight virtual machines and cross-architecture development.
⚠️ Consider Libvirt only if necessary: While Libvirt offers advanced VM management features, it requires running a Linux VM on macOS, adding unnecessary complexity for most use cases.
❌ Avoid KVM: Since KVM relies on Linux-specific kernel modules, it’s not an option for macOS.

In summary, QEMU provides the most straightforward and efficient solution for virtualization on Apple M4.

Real-World References

🚀 Excited to share my latest blog exploring GitHub Copilot - the game-changing AI pair programmer that's transforming how developers write code! 🖥️💡

Rajesh Singh — Fri, 06 Dec 2024 20:42:05 +0000

GitHub Copilot: Supercharge Your Coding with AI Pair Programmer

Rajesh Singh ・ Nov 30

#githubcopilot #ai #coding #webdev

GitHub Copilot: Supercharge Your Coding with AI Pair Programmer

Rajesh Singh — Sat, 30 Nov 2024 04:24:40 +0000

Recently, a shiny new add-on hit the marketplace: GitHub Copilot. Naturally, I had to dive in and see what all the buzz was about. As a tech enthusiast who dabbles in React for frontend and Python for backend and scripting, I couldn’t resist the allure of this AI-powered coding assistant.

But why use GitHub Copilot ?

GitHub Copilot is like having a supercharged assistant right inside your code editor. It suggests entire lines or blocks of code as we type code.., making coding faster and more efficient. It supports a wide range of languages and frameworks ( 🤔 almost every one ), understands the coding context, and even helps with documenting and writing tests. Imagine having a tool that not only speeds up coding but also helps learn new coding patterns and best practices along the way. Now, that’s amazing !!

For developers, time is precious. GitHub Copilot helps save time by automating repetitive tasks, reducing need to search for code snippets online, and minimizing coding errors.

Whether you’re a seasoned developer or just starting out, Copilot can enhance your productivity and make coding more enjoyable. It’s like having a knowledgeable coding buddy who’s always ready to help, without the need for coffee breaks!

My GitHub Copilot adventure

To start my journey, I signed up for a 30-day trial of GitHub Copilot. The setup process was a breeze—seriously 🙂, it was smoother than a freshly buttered scone. I found the extension for VS Code, clicked "Install," and voilà! Most of the configurations were handled automatically.

After logging into my GitHub account, the happy little robot icon popped up in the status bar, eager to help. It was like having a coding buddy at my fingertips, ready for action.

First Impressions

To spice things up, I decided to build a trivia API project. This API would challenge users with questions, offer multiple-choice answers, and deliver the results.

Eager to test Copilot's capabilities, I prompted it to create a template for a Python-based API app using Flask.

Within seconds, it generated boilerplate files with helpful content. With just one click, my project setup was complete. It felt like witnessing coding magic 💫 unfold before my eyes.

The template included all the necessary project files, complete with relevant code and configurations to jumpstart the project.

I appreciated how it allowed me to review each file's template code before accepting and creating the workspace—a thoughtful touch that gave me control over the setup process.

Coding time

With the boilerplate files in place, I jumped on filling the gaps and putting the logic to build the API services. During all the time, the coding assistant by my side helping me follow best practices, and handing errors and code refactoring.

Copilot helped me

set up the endpoints,
handle user inputs, and
manage the scoring logic.

It was like having a trivia game helper engine at my fingertips

The Debugging Companion

For most of the actions, we can just right click on the editor to get the copilot options to start an inline chat for cursor position or with code selection. For users to be very specific, can use the built-in copilot commands explain , fix , generate docs or generate tests for the file or selected code.

Fixing errors and debugging with GitHub Copilot is a breeze. Simply select the code or error, then choose the explain command from the IDE's right-click context menu in the editor or terminal. Copilot then scans your workspace's source code to provide the most likely explanation for the error and offers code snippets to clarify the issue or fix the problem.

I made a few minor adjustments using the inline chat feature. It was fast, smooth, and incredibly convenient—a real game-changer for quick edits.

To enhance the app's user-friendliness, I decided to add an HTML template with a home page to display the questions and allow users to answer them.

A great feature of GitHub Copilot is that it allows users to review code changes before applying them. It also scans the entire code file to identify the snippet that needs modification, reassuring developers that it won't disrupt the existing code logic.

Finishing the project

Testing is usually my least favorite part of development, so I handed the task over to my AI pair programmer. Copilot suggested performing a test setup for the app.

I chose to go with the pytest framework for my app and then followed Copilot's prompts and suggestions. In no time, I was able to configure and write tests for all my API routes, adhering to testing best practices.

Containerizing the Application

To finish the app build, I decided to containerize my application. I asked GitHub Copilot to create a Dockerfile for my app, preparing it for a Docker build and deployment in cloud-native environments.

Copilot generated a Dockerfile following best practices. I then tested the containerized app locally to ensure everything was working correctly.

Final Thoughts

With both the backend and frontend complete, my full-fledged app was ready for sharing with my team. A big shout-out to Copilot, my AI pair programmer, for making the process swift and enjoyable.

If you're a developer or DevOps engineer looking to supercharge your coding experience, I wholeheartedly recommend giving GitHub Copilot a spin. It's like having a tireless, supercharged assistant at your fingertips.

Now, go forth and code with gusto!

Merging Local and Remote Git Repos: Fixing Unrelated Histories

Rajesh Singh — Mon, 11 Nov 2024 09:59:25 +0000

Let's explore the context of merging files from a remote repository with a local source code branch.

We often encounter a scenario where we have a local Git repository with source code and create a remote Git repository with a README.md and/or .gitignore file. We then want our local repo to seamlessly merge these files in preparation for git push -u origin main. However, we sometimes face those pesky merge notifications locally during the merging process.

Let me give an example.

Usually we perform the git remote add origin https://github.com/rajks24/projectname.git , and perform git pull to merge the remote files to local git branch, before final git push , but we get errors like below.

❯ git pull                                     
hint: You have divergent branches and need to specify how to reconcile them.
hint: You can do so by running one of the following commands sometime before
hint: your next pull:
hint: 
hint:   git config pull.rebase false  # merge
hint:   git config pull.rebase true   # rebase
hint:   git config pull.ff only       # fast-forward only
hint: 
hint: You can replace "git config" with "git config --global" to set a default
hint: preference for all repositories. You can also pass --rebase, --no-rebase,
hint: or --ff-only on the command line to override the configured default per
hint: invocation.
fatal: Need to specify how to reconcile divergent branches.

❯ git pull hint: You have divergent branches and need to specify how to reconcile them. 
hint: You can do so by running one of the following commands sometime before hint: your next pull: hint: hint: git confi g pull.rebase false # merge hint: git confi g pull.rebasetrue # rebase hint: git confi g pull.ff only # fast-forward only hint: hint: You can replace “git confi g” with “gitconfi g --global” to set a default hint: preference for all repositories. You can also pass --rebase, --no-rebase,hint: or --ff-only on the command line to override the confi gured default per hint: invocation. fatal: Need tospecify how to reconcile divergent branches.

To start with the resolution, we need to configure local git to merge by default with git config pull.rebase false .

Even with above settings, for git pull or git merge, we might also get an error as From https://github.com/rajks24/projectname branch main -> FETCH_HEAD fatal: refusing to merge unrelated histories.

So, to get through above error, we can perform following actions.

Pull and Merge with Unrelated Histories

Since the remote repo has some initial files, we will need to pull and merge with the
--allow-unrelated-histories flag:

❯ git pull origin main --allow-unrelated-histories 
From https://github.com/rajks24/projectname
 * branch            main       -> FETCH_HEAD
Merge made by the 'ort' strategy.
 LICENSE | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 LICENSE

Resolve Merge Conflicts (If Any)

If we encounter any merge conflicts, Git will prompt us to resolve them. Open the conflicting files, fix the conflicts, and then stage the changes:

git add <conflicting_file>

Commit the Merge

Once you’ve resolved the conflicts, commit the merge:

git commit -m"Merge remote-tracking branch 'origin/main' into main"

Push the Main Branch

Now, push the main branch to the remote repository with git push -u origin main .

Push All Other Branches (optional)

Push all your other branches to the remote repository with git push --all origin .

Final Thoughts

Merging repositories might seem daunting at first, but it's an essential skill for any developer working in a collaborative environment. By understanding these concepts and techniques, you're not just solving immediate problems – you're building a foundation for smoother, more efficient workflow in all your future projects.

Keep experimenting, keep learning, and most importantly, keep Git-ing it together!

Fixing vite error for reactjs - global is not defined and process is not defined

Rajesh Singh — Wed, 18 Sep 2024 12:52:27 +0000

In a scenario where you are running a vite app with reactjs template for a project and trying to fetch the environment variable from .env file. As the popular way to fetch the environment variables from .env is to use process.env.SOMETHING for the variable as:

SOMETHING=SECRETSAUCE

At this point the vite.config.ts would look like:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

But fetching variable does not work right away in vite, and there are lots of way to solve the issue. I tried most of them and I felt to stick to the simple and straight forward way.

Probably with above definition and default fetching logic with process.env.*, you would have got error Uncaught ReferenceError: global is not defined.

I find lots of references in stackoverflow and I get confused.

The fix for error is to define global in the config as below.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  },
})

Now, this would probably lead to another more common error Uncaught ReferenceError: process is not defined.

Again, there are many solutions on web and some are outdated. I find the most relevant and easy to implement is to import loadEnv from vite library and build the custom logic as below.

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      global: {},
      'process.env': env
    },
    plugins: [react()],
  }
})

And the magic happens right away!!

Also to mention, we need not use the dotenv dependency as environment variable fetching in code with process.env.* works well without it.

Happy coding!

How to Fix Shadcn UI Adding Wrong Folder for Components

Rajesh Singh — Sun, 04 Aug 2024 08:55:14 +0000

I wish to share the observation and simple fix for Shadcn UI components folder issue.

Issue

When I run shadcn-ui@latest to add any other the UI components, then it adds the file to a new directory: @/components/ui/ under /src rather than the existing components/ui directory which I have created and updated in the tsconfig.json along with next app setup.

Below is the config which I have in the tsconfig.json.

    "baseUrl": "src",
    "paths": {
      "@/app/*": ["app/*"],
      "@/components/*": ["components/*"],
      "@/lib/*": ["lib/*"],
      "@/styles/*": ["styles/*"]
      // "@/*": ["./src/*"]
    }

and the auto generated components.json by shadcn-ui@latest is as below.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/styles/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

When we invoke the CLI command to add a Button with npx shadcn-ui@latest add button then it adds a new folder below /src as @ and then components/ui and then putting the button.tsx.
Thus, it's not able to view the existing /src/components folder.

The fix

I noticed that the default components.json looks at the alias in tsconfig.json so the key should match in the components.json.
Hence, we need to change in components.json as below.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/styles/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components/*",
    "utils": "@/lib/utils"
  }
}

We can notice that in aliases, we have added /* for components to match the key in tsconfig.json.
Thats it !!, it was simple!