DEV Community

rabindratamang
rabindratamang

Posted on

The Essential npm Commands and Concepts for Building Production-Ready Apps

#npm #node #javascript #productivity

If you're a JavaScript developer, npm (Node Package Manager) is your best friend when it comes to managing dependencies, automating tasks, and optimizing your workflow. But to build production-ready applications, you need more than just npm install and npm start.

In this article, we’ll deep dive into essential npm commands and concepts that will help you build robust and efficient applications.

1. Initializing a Project the Right Way

When starting a new project, always initialize it with:

npm init
Enter fullscreen mode Exit fullscreen mode

This command prompts you to set up a package.json file with details about your project. If you want to skip the prompts and use default values:

npm init -y
Enter fullscreen mode Exit fullscreen mode

Why does this matter?

  • package.json acts as the blueprint of your project.
  • It tracks dependencies, scripts, and metadata.
  • It helps ensure consistent behavior across different environments.

2. Installing Dependencies Correctly

Installing a Package for Production

For packages needed in production:

npm install express --save
Enter fullscreen mode Exit fullscreen mode

Or simply:

npm i express
Enter fullscreen mode Exit fullscreen mode

This adds express to the dependencies section in package.json.

Installing a Package for Development

For tools like testing libraries, linters, or compilers:

npm install nodemon --save-dev
Enter fullscreen mode Exit fullscreen mode

or

npm i nodemon -D
Enter fullscreen mode Exit fullscreen mode

This keeps it in devDependencies, ensuring it won’t be installed in production environments.

Global vs. Local Installation

If you want a package to be available globally across projects:

npm install -g typescript
Enter fullscreen mode Exit fullscreen mode

Use global installations sparingly—most projects should have their dependencies local to avoid version conflicts.

3. Running Scripts Like a Pro

Scripts in package.json automate common tasks.

Example: 

"scripts": {
  "start": "node index.js",
  "dev": "nodemon index.js",
  "build": "webpack --mode production",
  "test": "jest"
}
Enter fullscreen mode Exit fullscreen mode

Run them using:

npm run dev
Enter fullscreen mode Exit fullscreen mode

For start, you can simply run:

npm start
Enter fullscreen mode Exit fullscreen mode

This is useful for consistency in team projects.

4. Keeping Dependencies in Check

Checking Installed Versions

To see all installed dependencies:

npm list
Enter fullscreen mode Exit fullscreen mode

For globally installed ones:

npm list -g --depth=0
Enter fullscreen mode Exit fullscreen mode

Updating Dependencies

To update a specific package:

npm update axios
Enter fullscreen mode Exit fullscreen mode

For all outdated packages:

npm outdated
Enter fullscreen mode Exit fullscreen mode

Fixing Vulnerabilities

Security is crucial in production. Run:

npm audit
npm audit fix
Enter fullscreen mode Exit fullscreen mode

Use npm audit fix --force cautiously, as it may introduce breaking changes.

5. Locking Dependencies with package-lock.json

The package-lock.json file ensures consistency across different environments by locking dependency versions. Always commit it to your repository.

To ensure you install exactly what's in package-lock.json:

npm ci
Enter fullscreen mode Exit fullscreen mode

This is faster and ensures a reproducible build.

6. Managing Environment Variables

For handling environment-specific configurations, use the dotenv package:

npm install dotenv
Enter fullscreen mode Exit fullscreen mode

Then create a .env file:

PORT=5000
API_KEY=123456
Enter fullscreen mode Exit fullscreen mode

Load it in your app:

require('dotenv').config();
console.log(process.env.PORT);
Enter fullscreen mode Exit fullscreen mode

Never commit .env files! Add them to .gitignore.

7. Publishing Your Own npm Package

If you ever build a reusable library, publish it to npm.

Steps:

  1. Login to npm: 
   npm login
Enter fullscreen mode Exit fullscreen mode
  1. Prepare package.json with a unique name and version.
  2. Publish: 
   npm publish
Enter fullscreen mode Exit fullscreen mode

Your package is now available for others to install!

8. Handling Production Builds Efficiently

Removing Unused Dependencies

Run:

npm prune
Enter fullscreen mode Exit fullscreen mode

It removes any dependencies not listed in package.json, keeping the project lean.

Checking for Large Dependencies

Use:

npm ls --depth=0
Enter fullscreen mode Exit fullscreen mode

or a tool like webpack-bundle-analyzer to analyze bundled file sizes.

9. Speeding Up the Install Process

Installation times can slow down development. Optimize it with:

  • Using npm ci: Faster, consistent installs.
  • Using --prefer-offline: 
  npm install --prefer-offline
Enter fullscreen mode Exit fullscreen mode

This uses cached packages whenever possible.

  • Using a package cache manager: Tools like verdaccio can cache dependencies locally.

10. Performance Optimizations

For better app performance:

  • Use smaller, optimized dependencies: Avoid bloated libraries.
  • Tree shaking: Remove unused code during bundling.
  • Optimize node_modules size: Run npm dedupe to remove duplicate packages.
  • Leverage CDN for static assets: Reduce server load.

Conclusion

Mastering npm goes beyond just installing packages. By understanding the nuances of dependency management, scripts, security, and production optimizations, you can build scalable, efficient, and secure applications.

Do you have any favorite npm tricks? Drop them in the comments below! 🚀

Top comments (0)