Node.js http Module: Creating a Basic Web Server

A simple proxy configuration in the vite.config.js file that avoids CORS error. As you might know, you can run both frontend and backend applications on the same domain and port using proxy configuration. Using a proxy in the development environment solves the CORS Error. If your frontend application (running on http:// localhost:5173) makes API requests to a backend server (running on http:// localhost:3030), the browser enforces CORS policies. Without proper CORS headers, the browser will block such requests. By using a proxy, the frontend makes requests to its own server (http:// localhost:5173), which then forwards them to the backend. This avoids CORS issues because the frontend and the proxy server share the same origin. And as frontend and backend are running on the same domain and port with this configuration, You can easily access cookies sent from the backend on the frontend. 𝗣𝗦: The proxy configuration is only active during development. It does not affect production builds. 𝗘𝘅𝘁𝗿𝗮 𝗧𝗶𝗽: It's always a good practice to start your backend API routes with /api like /api/users, /api/profile, etc. So if you deploy your application on the same server, you can easily differentiate between frontend and backend routes and will not face any issues with configuration. 𝗙𝗼𝗿 𝗺𝗼𝗿𝗲 𝘀𝘂𝗰𝗵 𝘂𝘀𝗲𝗳𝘂𝗹 𝗰𝗼𝗻𝘁𝗲𝗻𝘁, 𝗱𝗼𝗻'𝘁 𝗳𝗼𝗿𝗴𝗲𝘁 𝘁𝗼 𝗳𝗼𝗹𝗹𝗼𝘄 𝗺𝗲. #javascript #reactjs #nodejs #webdevelopment

💡 Common Mistake: Using "window" in Node.js Ever run Node.js code and hit: 👉 ReferenceError: window is not defined ? Here’s why 👇 --- 🌍 Browser ✅ "window" exists ✅ "self" exists ✅ "frames" exists They are part of the Window API --- 🟢 Node.js ❌ No "window" ❌ No "self" ❌ No "frames" Because Node.js = server-side runtime, not a browser. --- ✅ What to Use Instead ✔ "global" ✔ "globalThis" (recommended) console.log(globalThis); --- ✅ Safe Check for Browser Code if (typeof window !== "undefined") { // Browser-only logic } --- 🚀 Takeaway: Know your environment. Browser → Window APIs Node.js → Global APIs --- #NodeJS #JavaScript #Backend #WebDevelopment #globalThis

React is evolving to be more like... HTMX? 🤔 The latest piece from our team goes deep on the latest state of web dev for 2026. React is still king for high-fidelity applications, but HTMX is stealing hearts for those who are sick of "Hook Hell" and massive JavaScript bundles. The Highlights: HTMX: A 14 KB payload, zero hydration, "Database as State." Great for admin interfaces and CRUD applications. React: The go-to for collaborative applications, offline support (PWA), and complex real-time data applications. Even React Server Components are starting to realize that shipping massive JavaScript bundles for static content was a bad idea to begin with. Read the full comparison here: https://lnkd.in/eXsaAhau #WebDevelopment #ReactJS #HTMX #SoftwareArchitecture #CodingTrends

⚛️ React 19 lets you delete your entire handleSubmit function 👇 . The new useActionState hook replaces 3 different useState variables. For a decade, React developers have written the same boilerplate: 1. event.preventDefault() 2. const formData = new FormData(event.target) 3. try / catch blocks for errors. 4. useState for loading indicators. React 19 introduces useActionState. ❌ The Old Way: You manually bridge the gap between the HTML form and your JavaScript logic. It forces you to manage loading states (isLoading) and error states (error) separately. ✅ The Modern Way: Pass your server action (or async function) directly to the hook. React returns: • state: The return value of your last action (perfect for validation errors). • formAction: The function to pass to <form action={...}>. • isPending: A boolean that is true while the action is running. The Shift: Forms are no longer "events to be handled"—they are "actions to be dispatched." #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #ReactJSTips #Tips #FrontendDeveloper #ReactJSDeveloper #Hooks #SoftwareEngineering

⚛️ React 19 lets you delete your entire handleSubmit function 👇 . The new useActionState hook replaces 3 different useState variables. For a decade, React developers have written the same boilerplate: 1. event.preventDefault() 2. const formData = new FormData(event.target) 3. try / catch blocks for errors. 4. useState for loading indicators. React 19 introduces useActionState. ❌ The Old Way: You manually bridge the gap between the HTML form and your JavaScript logic. It forces you to manage loading states (isLoading) and error states (error) separately. ✅ The Modern Way: Pass your server action (or async function) directly to the hook. React returns: • state: The return value of your last action (perfect for validation errors). • formAction: The function to pass to <form action={...}>. • isPending: A boolean that is true while the action is running. The Shift: Forms are no longer "events to be handled"—they are "actions to be dispatched." #ReactJS #React19 #WebDevelopment #Frontend #JavaScript #CleanCode #SoftwareEngineering #TechTips #ReactJSTips #Tips #FrontendDeveloper #ReactJSDeveloper #Hooks #SoftwareEngineering

Day 17 – Express.js Route Parameters & Query Parameters Today I explored how to pass data through URLs in Express.js. Using route parameters, we can capture values directly from the URL path. Using query parameters, we can send optional data in the URL. These techniques are commonly used in REST APIs. Next: Understanding Middleware in Express.js. #NodeJS #ExpressJS #BackendDevelopment #JavaScript #SoftwareEngineering

▲ Next.js introduces Native Server Actions. Stop writing API routes just to handle a form submission 👇 For years, submitting a form in React meant creating a separate API endpoint, writing a fetch call on the client, and manually managing loading and error states. A lot of boilerplate for something so simple. ❌ The Old Way: You treated form submission as a client-side problem. It required a dedicated /api/submit route, a fetch() call, and manual state management just to save data. ✅ The Modern Way: Treat server logic as UI. Define an async function with "use server" and pass it directly to your form’s action prop. • Zero API route needed: The function runs on the server automatically. • Secure by default: Sensitive logic never reaches the client bundle. • Works with useFormState: Get progressive enhancement for free! The Shift: Form handling is no longer a “client problem” — it’s a first-class citizen of your component tree. #NextJS #ServerActions #WebDevelopment #React #Frontend #JavaScript #AppRouter #FullStack #CleanCode #NextJSTips #FrontendDeveloper

I’ve been deep in the trenches building my latest project, and the synergy between React (TypeScript) and a custom PHP MVC architecture has been a game-changer. The Stack Breakdown: 1. Frontend: React + TypeScript. Using TS has virtually eliminated runtime errors and made state management across components like Certificate.tsx incredibly predictable. 2. Backend: A robust PHP MVC. Instead of "spaghetti code," the Model-View-Controller pattern keeps the business logic (like my EmailService.php) clean, reusable, and easy to test. Key Insights from this Build: 1. Type Safety is Peace of Mind: Defining interfaces for API responses means if the backend changes, the frontend tells me immediately. No more guessing what $data contains. 2. The Power of Separation: By treating PHP as a pure API provider, I’ve gained the freedom to iterate on the UI without touching the core server logic. 3. PDF & Email Automation: Integrating html2canvas and jsPDF on the client side while handling SMTP mailers on the server showed me exactly how to balance the load between the user's browser and the server. Building this has been a journey of refining my "Full-Stack" mindset. It’s not just about making things work; it’s about making them maintainable. #FullStack #WebDevelopment #ReactJS #TypeScript #PHP #MVC #SoftwareEngineering #CodingJourney

🧠Difference Between `console.log()` in JavaScript (Browser) vs Node.js At first glance, `console.log()` looks the same everywhere. But the environment makes a big difference. 🌐 1️⃣ Javascript `console.log()` Runs inside the browser (Chrome, Firefox, etc.) ✔ Output appears in DevTools console ✔ Can access DOM ✔ Has `window`, `document`, `localStorage` ✔ Used mainly for frontend debugging Example: console.log(document.title); 👉 Works in browser ❌ Will fail in Node.js (no DOM available) 🖥 2️⃣ Node.js `console.log()` Runs inside Node.js runtime (server-side) ✔ Output appears in terminal ✔ No DOM access ✔ Has access to filesystem, OS, environment variables ✔ Used for backend debugging & logging Example: console.log(process.env.PORT); 👉 Works in Node ❌ `document` is undefined here ⚡ Key Technical Difference Browser → Web API Environment Node.js → Server Runtime Environment Even though both use JavaScript, they run in completely different execution environments. Full Stack Development = Knowing where your code runs. Small concept, big clarity. #JavaScript #NodeJS #FullStackDeveloper #WebDevelopment #BackendDevelopment