For enquiries call:

Phone

+1-469-442-0620

Aage ki Socho

HomeBlogWeb DevelopmentInstalling Dev Dependencies with npm: Beginners' Guide

Installing Dev Dependencies with npm: Beginners' Guide

Published
05th Sep, 2023
Views
view count loader
Read it in
8 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 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.  

    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. Both of the above-mentioned methods are effective. Either you can do it from the command line or by editing the package.json file directly. If you have further queries, drop us a comment through the below box. Thanks for reading! 

    For 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.] 

    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