Sohail Khan’s Post

🚀 From npm to pnpm — A Game-Changing Switch ⚙️ Recently, I decided to switch from npm to pnpm for a React micro-frontend project — and wow, the difference was massive! 💡 ⚡ What Changed After Switching to pnpm : ✅ 🚀 Super-fast installs pnpm install completes in seconds using global caching — no more long coffee breaks during dependency installs 😄 ✅ 💾 70–80% disk space saved pnpm stores dependencies once globally and links them to each project instead of duplicating them inside every node_modules folder. ✅ 🧩 Perfect for Micro-Frontends pnpm workspaces make it so easy to share dependencies between multiple apps. ✅ 🔒 Strict dependency isolation No more "phantom dependencies" magically working because another package pulled them in. If it's not declared in package.json, it simply doesn't exist — which is great for long-term stability. ✅ 🧱 Deterministic builds Every environment gets identical installs thanks to pnpm-lock.yaml. CI/CD consistency improved a lot. ⚠️ Small Trade-offs 🔹 A little learning curve while adjusting to pnpm commands. 🔹 A few tools needed tweaks for strict dependency resolution. 🎯 Takeaway If you're working on micro-frontends or large React monorepos, 👉 pnpm is absolutely worth trying. It gives you speed, consistency, and serious storage savings. 💬 Have you tried switching from npm or yarn to pnpm yet? What's your experience been like? 🔄 Share the post if you find it helpful for others! #ReactJS #JavaScript #TypeScript #WebDevelopment #MicroFrontends #Frontend #Performance #pnpm #npm #DevExperience #CodingTips #DeveloperTools #SoftwareEngineering #WebDevCommunity

Every developer should know these core project files! 🔥 Whether you’re working on a small side project or a full-scale production app, these configuration files are the backbone of your setup. 🗝️ .env — Stores sensitive keys and environment variables. Never push it to GitHub! 🚫 .gitignore — Tells Git which files or folders to skip. Keeps your repo clean. 📦 package-lock.json — Locks package versions to ensure consistent builds. 🔢 .nvmrc — Keeps your Node version consistent across the team. 🧩 .editorconfig — Makes sure your code looks the same in every editor. 🧹 .eslintrc — Enforces clean, consistent coding standards. 🎨 tailwind.config.js — Customizes TailwindCSS for your unique design system. ⚙️ tsconfig.json — Controls how TypeScript compiles your code. 🚀 .babelrc — Configures Babel to make your code compatible across browsers. ⚡ vite.config.ts — Manages your Vite build setup for blazing-fast dev experience. 💬 Understanding these files doesn’t just make you a better developer — it makes you a smarter problem solver. Master them, and your workflow will become faster, cleaner, and more professional. 💻✨ #FullStackDevelopment #WebDevelopment #JavaScript #TypeScript #Vite #TailwindCSS #CodingTips #DeveloperCommunity

🚀 Understanding npm, package.json, dependencies & scripts If you’ve ever worked with Node.js or React, you’ve definitely used npm — but here’s a quick breakdown of what’s really happening behind the scenes 👇 🧩 npm (Node Package Manager) It’s the default package manager for Node.js. You use it to install, manage, and share open-source packages that help you build faster without reinventing the wheel. Example: npm install express 📦 package.json Every Node.js project has a package.json file — it’s like the project’s manifest. It stores important details like: project name, version, author dependencies (the packages your app needs) scripts (custom commands you can run) 📚 Dependencies These are the external libraries or modules your app relies on. There are two main types: "dependencies" → needed for your app to run "devDependencies" → only needed during development (e.g., testing, linting) Example: "dependencies": { "express": "^4.18.2" }, "devDependencies": { "nodemon": "^3.0.2" } ⚙️ Scripts Scripts let you automate common tasks. You define them in package.json and run them with npm run <script>. Example: "scripts": { "start": "node server.js", "dev": "nodemon server.js" } Then run: npm run dev 💡 In short: npm helps you manage your project’s tools, package.json describes them, dependencies are what your project needs, and scripts automate how you run it. #npm #nodejs #javascript #webdevelopment #frontend #backend #reactjs #developers #programming #softwaredevelopment #coding #tech #learning #webdev

📅 Day 74 #FrontendChallenge ⚛️ Mastering NPM, NPX, npm init, npm init -y, package.json, package-lock.json, node_modules, gitignore, README, dependencies and devDependencies in React 🔹 npm (Node Package Manager) Used to install & manage React libraries. 👉 Example: npm install react-router-dom 🔹 npx (Node Package eXecute) Runs packages without installing them globally. 👉 Example: npx create-react-app myApp 🔹 npm init Initializes a new project by creating a package.json file (asks setup questions). 🔹 npm init -y Creates package.json instantly with default values — no prompts. 🔹 package.json 📦 Stores project info, dependencies, and npm scripts (like npm start or npm build). 🔹 package-lock.json Locks exact package versions for consistency across all systems. 🔹 node_modules Contains all installed packages & their dependencies. (Usually ignored in Git 😅) 🔹 gitignore 🚫 A file that tells Git which files or folders to ignore. Usually includes: node_modules/ .env build/ This keeps your repo clean and lightweight. 🔹 README.md Your project guide — explains setup, usage, and purpose. 🔹 dependencies Libraries your React app needs to run (e.g., React, Axios, React Router). 🔹 devDependencies Tools used only during development (e.g., ESLint, Jest, Babel). 💡 Pro Tip: Never delete your package-lock.json. It ensures your React app behaves the same on every machine. #ReactJS #NPM #WebDevelopment #Frontend #JavaScript #DeveloperTips

Ever felt like you're spending endless hours setting up project dependencies, downloading libraries one by one, and wrangling configuration files? 😩 If you're in the JavaScript/Node.js world, you know the struggle is real! That's why package managers like npm are absolute game-changers. Imagine running a single command and having everything you need installed and ready to go. It's not just a dream – it's the reality npm creates for developers every day! From effortlessly installing thousands of reusable packages to managing project dependencies with a simple `package.json` file, npm streamlines your workflow and saves you countless hours. Plus, those handy `scripts` in `package.json`? Total lifesaver for automating common tasks. It's all about leveraging the power of community-created tools so we can focus on building amazing things, rather than reinventing the wheel. A huge shoutout to the open-source community for making our lives so much easier! What's your favorite npm trick or package that you can't live without? Share in the comments! 👇 If you found this insight helpful, hit that like button and follow for more tech tips and industry reflections! #npm #JavaScript #Nodejs #WebDevelopment #DeveloperLife #TechTips #Productivity #OpenSource Read more: https://lnkd.in/gwSFkcQZ

🚀 Mastering npm install Flags Like a Pro If you use npm install every day but only know -D, this one’s for you 👇 Understanding npm flags isn’t just “nice to know” — it’s what separates copy-paste coding from confident package management. Here’s a breakdown of the most commonly used ones and when to use them: ⚙️ Dependency Flags 🔹 -S / --save → Save as a regular dependency (default). 🔹 -D / --save-dev → Save as a development dependency (build tools, linters, etc). 🔹 -O / --save-optional → Save as optional — your app won’t break if it’s missing. 🔹 --no-save → Install without updating package.json (great for testing). 🌍 Global Installation 🔹 -g / --global → Installs the package system-wide (for CLI tools like Vite or Nodemon). 📦 Version Control 🔹 --save-exact → Locks the version exactly (no ^ or ~). 🔹 --legacy-peer-deps → Skips peer dependency conflicts (handy for older projects). 🔹 --force → Forces reinstallation even if cached. 🚀 Installation Behavior 🔹 --production or --omit=dev → Install only runtime dependencies. 🔹 --dry-run → Simulate installation (no files changed). 🔹 --prefer-offline → Use cached packages for faster installs. 🔹 --audit=false → Skip the security audit for speed. 🧹 Maintenance 🔹 npm ci → Clean install using the lockfile — perfect for CI/CD. 🔹 --reinstall → Reinstall everything fresh (npm v10+). 💡 Pro Tip: Use -D for build tools like Vite or TypeScript, and --save-exact for production stability. These small flags can prevent big headaches later. 👩💻 By Ayanda Sontlaba Software Developer | React • Node.js • IoT Enthusiast #WebDevelopment #JavaScript #NPM #React #NodeJS #CodingTips #Vite #Frontend

Duplicating components across projects constitutes the quintessential developer predicament. We have all experienced this tedious cycle of copy-pasting our carefully crafted React components between repositories. Recently, we decided to transform our calendar component into a publishable NPM package. Here lies the technical roadmap we followed: Step 1: package.json Configuration Critical fields differ substantially from application setup. We configured: name (ensuring uniqueness), version (following SemVer), main (CommonJS entry), module (ESM entry), files (whitelisting only dist folder), and peerDependencies (React must remain peer dependency, not direct dependency). Step 2: Build Process Source JSX cannot be published directly. We employed Babel for transpilation and Rollup.js for bundling. Rollup excels at library bundling through superior tree-shaking and dual ESM/CJS output capabilities. Step 3: CSS Strategy 📦 We extracted CSS to separate dist/index.css file, requiring manual user import. This approach provides flexibility whilst avoiding CSS-in-JS constraints. Step 4: Local Testing npm link command enables real-world testing before publication. Step 5: Publication Final commands: npm login followed by npm publish --access=public. The result: Gelios-calendar now exists on NPM registry 👊 We invite your feedback, contributions, and questions from our developer community. Here lies our comprehensive implementation: https://lnkd.in/eJVHhzYM #React #NPM #OpenSource #JavaScript #Frontend #Tutorial #Rollup #Babel #TypeScript

💡 𝐖𝐡𝐲 𝐈’𝐦 𝐂𝐫𝐞𝐚𝐭𝐢𝐧𝐠 𝐌𝐲 𝐎𝐰𝐧 𝐍𝐏𝐌 𝐏𝐚𝐜𝐤𝐚𝐠𝐞⁣ ⁣ As developers, we often repeat the same code in multiple projects.⁣ Validation functions, date formatters, helpers — the same logic, written again and again.⁣ ⁣ It works... but it’s not efficient.⁣ ⁣ So, I decided to create my own NPM package —⁣ a reusable library that keeps all my custom functions in one place.⁣ ⁣ 𝐍𝐨𝐰, 𝐰𝐡𝐞𝐧𝐞𝐯𝐞𝐫 𝐈 𝐬𝐭𝐚𝐫𝐭 𝐚 𝐧𝐞𝐰 𝐩𝐫𝐨𝐣𝐞𝐜𝐭,⁣ ⁣ I simply run 👇⁣ ⁣ 𝘯𝘱𝘮 𝘪𝘯𝘴𝘵𝘢𝘭𝘭 𝘮𝘺-𝘶𝘵𝘪𝘭𝘴⁣ ⁣ ⁣ and everything I need is ready to go.⁣ ⁣ No more hunting old code.⁣ No more copy-paste chaos.⁣ Just clean, consistent, and reusable code. ⚡⁣ ⁣ 🚀 𝐖𝐡𝐚𝐭 𝐈’𝐯𝐞 𝐥𝐞𝐚𝐫𝐧𝐞𝐝⁣ Repetition slows you down⁣ Reusability scales you up⁣ Small optimizations lead to big productivity⁣ ⁣ And this doesn’t just apply to code —⁣ it’s how smart systems and businesses grow too.⁣ Automate what repeats.⁣ Optimize what slows you down.⁣ ⁣ 👨💻 Have you ever built your own package or wanted to?⁣ What would you include in it?⁣ ⁣ #WebDevelopment #JavaScript #NPM #SoftwareEngineering #CodingTips #TechSimplified #Productivity #AliHaider #Angular #RxJS #JavaScript #WebDevelopment #Frontend #AsyncProgramming #Angular #WebDevelopment #Frontend #JavaScript #Coding #SoftwareEngineering #Learning #TechCommunity

🚀 npm start vs npm run — What’s the Difference? If you’ve worked with Node.js or React, you’ve definitely used these commands. But do you really know how they differ? 🤔 🟢 npm start It’s a shortcut command that automatically runs the “start” script defined in your package.json file. You don’t need to type the word run — it’s built in as a special shortcut. 🟣 npm run This command is used to execute any custom script you define in your project. You can use it for tasks like build, test, deploy, or dev. In simple terms — npm run is used for everything other than the default start script. ⚙️ Quick Recap ✅ npm start → Shortcut for running the “start” script ✅ npm run → Used to run other custom scripts 💡 In short: npm start is for the default script, while npm run gives you flexibility to run any custom command. ✨ Small details like this make you a smarter developer every day! Keep learning, keep building 🚀 #NodeJS #JavaScript #WebDevelopment #ReactJS #CodingTips #npm #DeveloperCommunity #CodeNewbie #100DaysOfCode #FrontendDevelopment #TechLearning