Level Up Your Imports: Using Path Aliases for Cleaner React + TypeScript Projects 🚀

Hello Hive Community Members! 👋

Hope you're all doing fantastic! I'm back with Day 5 of my ReactJS learning series 🚀
This journey has been quite the rollercoaster, and today we're diving into something every dev struggles with — those ugly relative imports 😩

But before that, if you missed my earlier episodes, here's your cheat sheet 👇

---

📚 Catch Up on My React Adventures

• 📚 Day One: Fresh React app + AIOHA integration!
• 🧭 Day Two: Routing drama & rebellious NavBar 😤
• 🛠️ Day Three: Fixed Layouts, Routing & AIOHA 💥
• 🧠 Day Four: useState, useEffect, and .env headaches 😅
• 🔥 Today is Day Five: Let’s clean up those imports with path aliases!

---

🚀 Why Path Aliases?

Let’s face it —

import Button from "../../../../components/ui/Button"

is just plain ugly and hard to maintain 😵‍💫

While pairing up with another dev (shoutout to AI-generated code ✨), I noticed a cleaner import style — so I had to figure it out myself! Here’s how you can too 👇

---

🪄 Step-by-Step: Setting Up Path Aliases

🧠 Step 1: Update tsconfig.app.json

Add these compiler options to set your base path and alias:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
    // ...other stuff
  }
}

⚙️ Step 2: Tweak vite.config.ts

Use path module to create an alias for @ pointing to your src folder.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import path from "path";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    tailwindcss()
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});

🎉 Boom! You’re 90% done.

---

🔁 Step 3: Restart Everything!

• Stop your npm run dev server.
• Restart TypeScript in VS Code (click on the TS version and hit "Restart TS Server").
• Before starting again... do not skip step 4 🤣

---

✂️ Step 4: Update Your Imports!

Time to ditch the dot-dot-dot 🔪

Use beautiful imports like:

import Button from "@/components/ui/Button"

Isn’t that satisfying? 😍

---

📚 Sources That Helped (But Also Confused Me 😂)

• LogRocket Guide
• DEV Community Setup
• Max Martinez's Blog

Honestly... I followed these and ended up with TypeScript errors. So, the method described in this post is what actually worked for me! 🙌

---

Thanks for following along!
See you in the next post where I’ll probably break something else and then fix it (again) 😅

Stay curious & keep coding 💻💪

---

---

📝 Final Note

• I asked ChatGPT/AI to help optimize this post to make it more readable and viewer-friendly.
• Here is the link where you can find both original content & improvements made by AI
• https://chatgpt.com/share/68897d05-0eb0-8000-8f07-77280f4f2375

---

🚀 My Contributions to ♦️ Hive Ecosystem

Contribution	To	Hive	Ecosystem
Hive Witness Node	Hive API Node (in progress)	3Speak Video Encoder Node Operator (highest number of nodes)	3Speak Mobile App Developer
3Speak Podcast App Developer	3Speak Shorts App Developer	3Speak Support & Maintenance Team	Distriator Developer
CheckinWithXYZ	Hive Inbox	HiFind	Hive Donate App
Contributed to HiveAuth Mobile App	Ecency ↔ 3Speak Integration	Ecency ↔ InLeo Integration	Ecency ↔ Actifit Integration
Hive Stats App	Vote for Witness App	HiveFlutterKit	New 3Speak App

---

🙌 Support Back

❤️ Appreciate my work? Consider supporting @threespeak & @sagarkothari88! ❤️

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak

---