npm force vs legacy-peer-deps: when to use them

𝗣𝗮𝗰𝗸𝗮𝗴𝗲 𝗠𝗮𝗻𝗮𝗴𝗲𝗿𝘀: 𝗽𝗻𝗽𝗺 𝘃𝘀 𝗻𝗽𝗺 𝘃𝘀 𝗬𝗮𝗿𝗻 You use package managers every day as a JavaScript developer. In 2026, things have changed. You can not always say "just use npm" anymore. I have used all three in real projects. Here is what I learned: - npm ships with Node.js and is universally supported - Yarn is a complete rewrite and is still used by large organizations - pnpm has content-addressable storage and is growing fast pnpm is now the default choice for many new projects. Here is how they work: - npm and Yarn give each project its own copy of every dependency - pnpm stores all packages once in a global store and uses hard links If you install react in 10 projects, you have 1 copy on disk. pnpm uses 50-70% less disk space. Here is a comparison: - npm: baseline speed - Yarn Berry: 20% faster, 40% faster with cache - pnpm: 30% faster, 60% faster with cache pnpm workspaces are fast and recommended for monorepos. If you start a new React or Next.js project, use pnpm. If you work on an existing npm team project, use npm. If you work on a large monorepo, use pnpm. I switched to pnpm and saved 8GB of disk space on my dev machine. You can switch to pnpm too. Source: https://lnkd.in/gXw_aBrD

🚀 npm vs npx — Do you know the difference? Most developers type these commands every day without thinking twice. Let's break it down 👇 ━━━━━━━━━━━━━━━━━━ 📦 npm (Node Package Manager) npm is used to install packages — either into your project or globally on your machine. # Install a package locally (saved in node_modules) npm install lodash # Install globally (available system-wide) npm install -g nodemon Think of npm as your package shelf — it puts tools there for you to use later. ━━━━━━━━━━━━━━━━━━ ⚡ npx (Node Package Execute) npx runs a package — without permanently installing it. It downloads, runs, then discards. # Run create-react-app without installing it globally npx create-react-app my-app # Always uses the latest version Think of npx as ordering food for one meal — you get what you need, no leftovers. ━━━━━━━━━━━━━━━━━━ 🔑 Quick Summary: ✅ Use npm install when you need a package repeatedly in your project ✅ Use npx when you just want to run a one-time tool or CLI command ━━━━━━━━━━━━━━━━━━ This simple distinction saves disk space, avoids version conflicts, and keeps your global environment clean. 🧹 Found this helpful? Share it with a dev friend! 🙌 #JavaScript #NodeJS #npm #WebDevelopment #Programming #DevTips #100DaysOfCode #ReactNative

As a Developer you should know these: • 🔐 .env → Secret keys & env variables. NEVER push to GitHub • 🙈 .gitignore → Files Git should ignore • 🔒 package-lock.json → Locks dependency versions across all machines • 🟢 .nvmrc → Pins the Node.js version for your whole team • 📐 .editorconfig → Consistent formatting across all editors • 🔴 .eslintrc → Linting rules to keep JS/TS clean • ✨ .prettierrc → Auto code formatting • 🎨 tailwind.config.js → Custom colors, spacing & themes • 🔵 tsconfig.json → Controls TypeScript compilation • 🔄 .babelrc → Babel config for backward JS compatibility • 🐶 .huskyrc → Git hooks to catch bugs before pushing • 🐳 .dockerignore → Keeps Docker builds clean & lean • ⚡ vite.config.js → Vite dev server & build config • ▲ next.config.js → SSR, redirects & Next.js behavior • 🚫 .prettierignore → Files Prettier should skip

Sometimes, the best way to solidify your engineering foundations is to go back to the basics. I recently built and deployed my personal portfolio: https://am03.tech. Instead of reaching for a modern framework, I intentionally built it using plain HTML, CSS, and vanilla JavaScript. My primary goal for this practice exercise wasn't just to build a UI but to get hands-on with the deployment side. A few practical takeaways from the build: 🔹 Git Workflows: Navigated merging independent remote/local histories, utilized empty commits to trigger pipelines, and solidified my understanding of fetch vs. pull for remote syncing. 🔹 Static Hosting: Configured and deployed the site using GitHub Pages. 🔹 DNS & Networking: Handled the routing manually by configuring A-Records, resolving CNAME conflicts, and enforcing HTTPS on my custom domain. 🔹 Custom CI/CD Pipelines: Replaced default hosting scripts by writing my own GitHub Actions workflow (deploy.yml). Configured an Ubuntu runner to automatically checkout, package, and deploy my code on every push to the main branch. It’s a straightforward static site, but working through the deployment pipeline manually was a highly effective way to practice the backend and DNS concepts I'm currently focusing on. #WebDev #DNS #GitHubActions #CICD #Git

𝐖𝐚𝐧𝐭 𝐭𝐨 𝐥𝐞𝐚𝐫𝐧 𝐁𝐚𝐜𝐤𝐞𝐧𝐝 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐦𝐞𝐧𝐭 𝐛𝐮𝐭 𝐝𝐨𝐧'𝐭 𝐤𝐧𝐨𝐰 𝐰𝐡𝐞𝐫𝐞 𝐭𝐨 𝐬𝐭𝐚𝐫𝐭? Save this post. 🔖 I've put together free, beginner-friendly notes on Node.js, JS Runtimes & npm — the foundation every backend developer needs before touching Express, APIs, or databases. 𝐂𝐡𝐚𝐩𝐭𝐞𝐫 𝟏 covers everything you need to actually understand what's happening under the hood 👇 1️⃣ How JavaScript went from browser-only to running servers and CLI tools 2️⃣ What a JS Runtime really is (and why it matters) 3️⃣ The V8 Engine — how your code becomes machine instructions 4️⃣ npm: the App Store for developers with 1.3M+ free packages 5️⃣ Semantic Versioning — what ^, ~, and exact versions actually mean 6️⃣ Why package-lock.json exists and why you should never ignore it 7️⃣ Core built-in modules: fs, path, http and when to use them → 2 practical CLI projects to solidify your understanding No fluff. Just clean, structured notes with real analogies and code examples. 📎 𝐅𝐮𝐥𝐥 𝐏𝐃𝐅 𝐚𝐭𝐭𝐚𝐜𝐡𝐞𝐝 — 𝐟𝐫𝐞𝐞 𝐟𝐨𝐫 𝐞𝐯𝐞𝐫𝐲𝐨𝐧𝐞. If this helps you or someone you know, share it forward ♻️ Chapter 2 dropping soon → HTTP Module, Building Servers & the Event Loop ⚡ #NodeJS #BackendDevelopment #JavaScript #LearningInPublic #WebDevelopment #100DaysOfCode #Programming #npm #OpenSource #SoftwareEngineering

Here are the 15 essential files every developer should master. 🔐 .env - Your secret keys and environment variables. NEVER commit this to GitHub. 🙈 . gitignore - keep node modules, .env, and build artifacts out of your repo. 🔒 package-lock.json - Locks your dependency versions so everyone on the team runs the exact same code. 🟢 .nvmrc - Pins the exact Nodejs version for the entire team. No more "it works on my machine". 📐 .editorconfig - Consistency indentation and formatting across VS code, webStorm, etc 🔴 .eslintrc - Enforces clean, big Free JavaScript/Typescript rules. ✨ .prettierrc - Ends the tabs vs spaces war forever. 🥘 tailwind.config.js - Custom colors, spacing, and design system in one place. 🔵 tsconfig.json - Controls how Typescript compiles and catches error early. 🌀 .babelrc - Makes modern JS work in older environments. 🐶 .huskyrc - Git hooks that prevent you from pushing broken code. 🦈 .dockerignore - Keeps your Docker images lean and fast. 🌟 .vite.config.js - supercharges your dev server and build process. 🔼 next.config.js - Handles SSR, redirects, images, and all Next.js magic. 🚫 . prettierignore - Tells Prettier which files to leave alone start shipping professional software which one of these did you ignore the longest when you started if I miss any config file drop in the comments save the post for your next project setup #WebDevelopment #Javascript #Typescript #Next #DeveloperTips #CodingBestPtactices #Frontend #SoftwareEngineering

I spent hours debugging React today The error? react-scripts is not recognized. I checked everything: • Node version • Dependencies • package.json • StackOverflow threads Still nothing worked. Then I realized something embarrassing 😅 I was running the command in the wrong folder. But during this debugging process, I discovered another interesting issue while working with React Router. 🔧 Hash links (#) don’t behave the way you expect. For example: <Link to="/#about"> The URL changes to: /#about But the page doesn’t scroll to the section. 🤔 Why does this happen? React Router is designed for Single Page Applications (SPA). It only handles the path, like: /projects /contact The hash part (#about) is ignored by React Router. So it treats: /#about → / Which means the scroll never happens. ✅ The solution that worked for me Instead of relying on hash links, I used JavaScript scrolling. Navigate to the page first, then scroll to the section using: scrollIntoView(). This ensures the page loads first and then smoothly scrolls to the element. Debugging is rarely about writing new code. Most of the time it's about understanding how things actually work. And sometimes… It's about realizing you're in the wrong folder 😅 Have you ever lost hours debugging something simple? What was the bug? 👀 #ReactJS #ReactRouter #WebDevelopment #Debugging #JavaScript #FrontendDevelopment

HTTP Status Codes Every Developer Should Know If you work with APIs, websites, or backend systems, these status codes are part of your daily life. Understanding them can save hours of debugging and help you build better applications. ✅ 2xx – Success → Request completed successfully 🔄 3xx – Redirection → Resource moved or cached version used ⚠️ 4xx – Client Errors → Something wrong in the request 🔥 5xx – Server Errors → Problem on the server side Knowing what each code means helps developers troubleshoot faster, improve user experience, and create reliable systems. Save this cheat sheet for future reference. Which HTTP status code do you see the most in your projects? 👇 #WebDevelopment #HTTP #StatusCodes #BackendDevelopment #FrontendDevelopment #API #Coding #Programming #Developers #SoftwareEngineering #NodeJS #JavaScript #FullStackDeveloper #TechTips #LearnToCode

WHAT IS NPM 1) Definition (exact) NPM is a tool used to install, manage, and share JavaScript packages. It comes with Node.js. 2) What is a "package"? A package = reusable code written by someone else. Examples: Libraries (like React) Tools (like Webpack) Utilities (like Lodash) You don't write everything from scratch. 3) What NPM actually does Install packages Manage dependencies Update/remove packages Run scripts 4) Basic usage Install a package npm install express Install globally npm install -g nodemon Remove package npm uninstall express 5) package.json (core file) ... { } "name": "my-app", "dependencies": { "express": "^4.18.2" } This file: Tracks all installed packages Stores project configuration 6) How it works (simple flow) 🧑🦱Developer 1➡️ 🧾Dependencies➡️ 🎁Package.json➡️ 🔒Package-lock.json➡️ 🧕Developer 2 7) Important commands npm init → create project npm install → install dependencies npm run run scripts npm update → update packages

🚀 I just published my first npm package — create-sudarshan-stack! Let me tell you the real problem I was solving. Every time I started learning a new React concept or built a new project, I had to go through the same painful setup: → Create project with Vite → Delete the default boilerplate they give you → Manually create src/components, src/data, src/style folders → Setup Tailwind from scratch → Setup Shadcn — easily 5-10 minutes just for this → Setup TanStack Router in React environment — another 10 minutes → Then finally… start actual coding I was spending more time on setup than on learning or building. So I fixed it once and for all. npm create sudarshan-stack@latest my-app Pick your template, run npm install, and you are writing actual code in under a minute. No boilerplate to delete. No folder structure to create. No config to copy paste from docs. 4 templates available: ⚡ react — React + Vite + Tailwind ⚡ react-ts — adds TypeScript ⚡ react-shadcn — adds Shadcn UI, fully configured ⚡ react-full — full setup with TanStack Query + TanStack Router ready to go How is it different from regular Vite? Vite gives you a blank minimal starter. My package gives you a production-ready folder structure with everything configured the way I actually work. It's not a replacement for Vite — it's built on top of it, just with all the painful setup already done. What I learned building this: → How npm create works under the hood — it just looks for a package named create-{name} and runs it → How to build a production-level interactive CLI with prompts just like Vite → Edge cases like scaffolding into current folder using ".", handling existing folders, safe cleanup on errors → npm publish, 2FA token setup, .npmignore, versioning → Why you should NEVER commit your .npmrc to GitHub 😅 If you're tired of spending the first 20 minutes of every project just on setup — try it: npm create sudarshan-stack@latest my-app NPM: https://lnkd.in/ghAZnrDZ #npm #react #opensource #javascript #webdevelopment #frontenddevelopment #vite #tailwind #shadcn #tanstack