HomeBlogWeb DevelopmentInstalling Dev Dependencies with npm: Beginners Guide

Installing Dev Dependencies with npm: Beginners Guide

Published
24th May, 2024
Views
view count loader
Read it in
10 Mins
In this article
    Installing Dev Dependencies with npm: Beginners Guide

    Whenever you're developing and running a project on localhost, you need to specify the packages your project depends on. These packages are known as dependencies and devDependencies. With the package manager installation, dependencies get automatically downloaded and listed in the package.json file of the package manager you're using. You can manually edit this package.json file or use the command line to add mode dependencies and devDependencies as per your project requirements. 

    If you're using Node Package Manager and want to add node-modules as npm devDependencies for your project development, you need to know a few things beforehand. Here we’ve curated a complete guide comprising 101 npm install devDependencies. Whether you are using npm exclusively with Node.js or as a build tool for the front-end, this guide will help you add devDependencies in minutes. 

    So without further ado, let’s take a look at the process below. You can also learn Node.js step-by-step to start your journey as a full-stack developer.  

    What is devDependency?

    In the package.json file of your package manager, i.e., npm, there is an element known as devDependencies. It contains all the packages with specific version numbers that you require in the development phase of your project and not in the production or testing environments. Whenever you add a library or module that is required only in the development of your project, you can find it under devDependencies. 

    For npm users, the below command will help to add devDependencies in the project: [Replace 'dev dependencies' with the module you're installing.

    npm install <dev_dependencies> --save-dev 

    Note: Many developers use the open-source yarn package manager, developed by Facebook, instead of npm while installing devDependencies. It's because yarn comes with a license checker that fetches information regarding all the licenses related to your project and supports the 'why' command that shows why a particular dependency is present in your project. But, npm fails to offer both. You can enter the below command in a terminal for yarn install devDependencies; make sure to replace 'dev_dependencies' with your package name. 

    yarn add dev_dependencies –dev 

    If you want to learn about the other package managers and the process of installing devDependencies with npm on each, get started with the Full Stack Software Developer course

    Difference Between Dependency and devDependency

    For every web application project, the package.json file of the package manager contains the metadata, i.e., dependencies and devDependencies with corresponding version numbers. But both work differently. Dependencies are used for production or in testing environments. Whereas devDependencies are used for project development purposes only. Here we’ve created a comparison table that will help you understand the key differences between dependencies and devDependencies. Have a look. 

    Dependencies 

    devDependencies 

    Dependency is an object that contains the library, which your project requires for production environments and functioning effectively. 

    devDependencies are those packages in the package.json file that you need only for project development purposes. Example- Babel, Webpack, etc. 

    You require these packages to test and run your project on the localhost. 

    These types of dependencies are required during the web application development process but not while testing or executing it.  

    You can add dependencies to the package.json file by running the below command: 

    npm install <dependencies> 

    For adding devDependencies to your project, run the below command: 

    npm install <dev_dependencies> --save-dev 

    Install NPM Modules as devDependency

    There are different npm modules like mocha, grunt-contrib-watch, gulp-jade, jscs, etc. You can add these devDependencies in your project to perform development tasks. Here we’ve provided a complete step-by-step guide for installing npm modules as devDependencies on Windows, macOS, and Linux. Have a look. You can also sign up for the KnowledgeHut to learn Node.js step-by-step course and know more about Node.js environment for installing devDependencies. 

    Note: We have used the Git Bash terminal along with VS Code for installing Mocha library. 

    Method 1

    1. First, open your choice of the terminal within the project folder; Windows users can use Git Bash or Command Prompt, macOS and Linux users can use ZSH terminal. 
    2. Next, type in the below command to install your desired npm-module. (Replace dev dependencies with the package name you want to add.) 
    npm install <dev_dependencies> --save-dev 
    1. Once the installation is finished, the dev dependency will be added to your package.json file. 

    Method 2

    1. Alternatively, you can edit the package.json file directly and add an attribute, 'devDependencies' to it. 
    2. For that, copy the below file to a text editor and save it as devDependencies after replacing the name and version numbers as per semantic version of each dependency. 
    "name": "dev_dependencies", 
    "version": "1.1.0", 
    "dependencies": { 
     "my_dep": "^1.1.0", 
     "another_dep": "~2.1.0" 
    }, 
    "devDependencies" : { 
     "my_test_framework": "^3.2.0". 
     "another_dev_dep": "1.1.0 - 1.3.0" 
    } 

    What to Do If Unable to Install devDependency?

    There can be three different reasons why you're unable to install devDependencies in your package.json file. The reasons are as follows: 

    1. If your NODE_ENV is set to production, entering the 'npm install' command won't add the devDependencies automatically. Since the command will run in a production environment, it will act like 'npm install --production', and all devDependencies will be excluded from the installation process.
    2. In case the --production flag for the npm configuration of your project is set to true, npm modules will only get installed as dependencies and not devDependencies even if you run the npm install dev dependencies command.
    3. If none of the above is a reason, then you're probably dealing with a faulty installation, and it is restricting you from adding npm modules as devDependencies.

    Perform the below troubleshooting methods to resolve this issue. 

    1. Use --only=dev

    When your NODE_ENV is set to production, you need to use the below command to install devDependencies for your project. 

    npm install --only=dev 

    The element 'only' will ensure that only the devDependencies get installed irrespective of the NODE_ENV. 

    2. Set --production Flag to False

    Setting the --production flag for the npm configuration of your project to false means it will start to install the npm libraries as devDependencies. Enter the below-mentioned commands in a terminal window to do that. 

    npm config get production 
    npm config set -g production false 

    3. Set Up a New NPM Package 

    • If there is a faulty installation, you can verify that by creating a new npm package folder in any location but the same filesystem you're presently using. 
    • Then initialize npm by entering the below command: 
    npm init --yes 
    • Next, install any npm module as dependencies and devDependencies by entering the following commands: [Replace 'dependencies' and 'dev_dependencies' with your desired package names.] 
    npm install dependencies --save 
    npm install <dev_dependencies> --save-dev 
    • Now, check whether the dependencies and dev_dependencies files are saved under the corresponding files. 
    • If it is, then there was a problem with your npm package folder. 
    • In this case, you can delete this node-module along with the package-lock.json file and run the below command to reinstall the npm modules. 
    npm install 

    You should be able to add npm modules as devDependencies in your project after performing these steps.  

    Managing Dev Dependencies with NPM Scripts 

    1. We can Automate common dev tasks like testing, building, and linting by defining scripts in our package.json file. 
    2. Example scripts: "test": "npm run jest" to run Jest tests, "lint": "eslint ." for code linting. 
    3. We have the following benefits: Saves time, improve consistency, and simplifies development workflow. 

    Code example: 

    { 
      "scripts": { 
        "test": "npm run jest", 
        "lint": "eslint .", 
        "build": "webpack --mode production", 
        "start": "node server.js" 
      } 
    } 

    Updating and Removing Dev Dependencies

    • We can update dev dependencies with the npm update command, specifying package names or using wildcards (npm update --save-dev *). 
    • We need to remove unused dependencies with npm uninstall followed by package names. 
    • Also, we have to keep dependency versions consistent across our team to avoid compatibility issues. 

    Code example: 

    npm update --save-dev eslint webpack 
    npm uninstall @babel/core 

    Best Practices for Managing Dev Dependencies

    Following are the best practices to follow for managing dev dependencies:  

    1. Minimize dependencies: Only install required dev tools, avoid bloated projects. 
    2. Use dependency groups: Separate dev and production dependencies for clarity. 
    3. Pin versions: Specify exact versions in package.json for stability. 
    4. Use lock files: npm ci installs dependencies based on the defined versions. 
    5. Regularly clean dependencies: Remove unused packages to avoid clutter.

    Alternative Tools for Dev Dependency Management

    In the realm of dev dependency management, several alternative tools offer diverse features to cater to different development needs. Yarn, a prominent package manager, stands out for its swifter installation process and offline support, providing developers with a seamless experience. Nx, on the other hand, goes beyond traditional package management, serving as a build framework that facilitates the creation of applications agnostic to specific frameworks, enabling shared dependencies across projects. 

    Webpack Dev Server emerges as another valuable tool, specifically addressing the need for hot reloading during development. This server ensures that changes in the codebase are immediately reflected in the running application, enhancing the development experience by allowing developers to see real-time updates without manual refreshes. 

    These alternative tools present developers with a range of options for managing dev dependencies, each offering unique advantages. Choosing the right tool depends on the specific requirements of the project and the preferences of the development team, contributing to a more tailored and efficient development workflow

    Looking to enhance your programming skills? Join our Python programming training and unlock endless possibilities. Start your journey today!

    Conclusion 

    That’s all! Now you know how to install devDependencies with npm. Effectively managing development dependencies is paramount to ensure a seamless and efficient development process. DevDependency, a concept often associated with package management tools like npm, plays a crucial role in delineating dependencies used solely for development purposes. By comprehending this distinction and incorporating it into our workflow, developers can streamline their projects. 

    Leveraging NPM scripts further enhances the efficiency of managing dev dependencies. These scripts allow for automated tasks, facilitating actions such as installing dependencies, running tests, and other essential development processes. Integrating these scripts into the workflow not only saves time but also ensures consistency across different environments Following established best practices is essential in maintaining a clean and organized project structure. This includes avoiding the global installation of dev dependencies, which can lead to version conflicts and unexpected behavior. Instead, local installation per project is recommended, enhancing project isolation. Next step, checkout our blog where does NPM install global and local packages? 

    Frequently Asked Questions (FAQs)

    1How Does NPM Install devDependencies?

    NPM installs devDependencies within the package.json file. The ‘npm install’ command should add all the dependencies and devDependencies automatically during installation. If you need to add specific devDependencies to your project, you can use this command- ‘npm install --save-dev’. This will add your desired npm library to the package.json file. 

    2Is TypeScript a devDependency?

    Yes, TypeScript is a devDependency and you can add it to your project using this command- ‘npm install typescript --save-dev’. But before installing this compiler, you need a copy of Node.js as an environment to run the package. Once it’s installed, you’ll find TypeScript within the package.json file as a devDependency. 

    3What Do You Mean by NPM devDependencies?

    Development dependencies (devDependencies) are meant to support the development process of your web application. When installed through the node dependency manager, npm, the devDependencies will get stored in the package.json file. However, devDependencies won’t work in the production or functioning of your project.

    4How Can I Install Dependencies?

    Dependencies get installed in your project whenever you install the package manager for the first time. For example, the ‘npm install’ command adds all the dependencies to the default package.json file, which was created during the first initialization (npm init --yes) of your package manager, npm. However, if you want to add any dependency to the package.json file for your project-specific requirements, use this command- ‘npm install [--save-prod]’ [Replace 'dependencies' with your package name.] 

    5Can I install dev dependencies globally?

    When using package managers like npm, dev dependencies can be installed globally using the -g flag. However, it is generally recommended to install them locally per project to avoid potential conflicts between projects. 

    6Where do dev dependencies get installed?

    When using npm, dev dependencies are installed in the "node_modules" folder within your project directory. This ensures that each project has its own set of isolated dependencies making it easier to manage and avoid conflicts. 

    7Should I commit dev dependencies to version control?

    When using npm, dev dependencies are installed in the "node_modules" folder within your project directory. This ensures that each project has its own set of isolated dependencies making it easier to manage and avoid conflicts. 

    Profile

    Bala Krishna Ragala

    Blog Author

    Bala Krishna Ragala, Head of Engineering at upGrad, is a seasoned writer and captivating storyteller. With a background in EdTech, E-commerce, and LXP, he excels in building B2C and B2B products at scale. With over 15 years of experience in the industry, Bala has held key roles as CTO/Co-Founder at O2Labs and Head of Business (Web Technologies) at Zeolearn LLC. His passion for learning, sharing, and teaching is evident through his extensive training and mentoring endeavors, where he has delivered over 80 online and 50+ onsite trainings. Bala's strengths as a trainer lie in his extensive knowledge of software applications, excellent communication skills, and engaging presentation style.

    Share This Article
    Ready to Master the Skills that Drive Your Career?

    Avail your free 1:1 mentorship session.

    Select
    Your Message (Optional)

    Upcoming Web Development Batches & Dates

    NameDateFeeKnow more
    Course advisor icon
    Course Advisor
    Whatsapp/Chat icon