Register to get access to 15+ free programming courses with interactive exercises

Dependencies in development JS: Setting up environment

Any project has at least two ways it can be used. They are commonly referred to as environments. For example, when a developer works on a project on their computer, they run it in a development environment. When the project gets to the place where it is used, then the environment is called production.

On the one hand, developers are constantly trying to make these environments similar to avoid mistakes associated with the peculiarities of a particular environment, on the other hand, they still have different requirements. For example, development often needs additional packages that help the development process itself, such as packages for automated code testing. These packages are useless in a production environment, but they take up time and disk space. And this is a hindrance because it's important for the production environment not to pull unnecessary things. This greatly affects the speed of the delivery of code to production.

To solve this problem, projects in JavaScript have added the ability to explicitly specify dependencies that are only needed during development. This is done by using a special flag during installation:

# jest is a test framework
# which is used to write automated code tests
npm install --save-dev jest

The installation procedure here is almost the same as for normal packages. The only difference is that the description of the dependency is not in dependencies, but rather in devDependencies.

"devDependencies": {
  "jest": "^26.4.1"

From a usage point of view, these packages are no different from packages installed in dependencies. The only difference is where they are imported. As a rule, a separate directory is created for code testing, inside which is the test code, which is run only in the development environment. Therefore, imports of this code do not overlap with imports of the code of the project itself.

You can see all this with your own eyes in a special package created by Hexlet as an example of a standard design.

--production flag

Development dependencies are always installed when npm install is started. Here, the developers assumed that this command is most often called during development, so the shortest option was left for the development environment. You need to add a special flag for production:

# Now the dependencies from devDependencies will not be installed
npm install --production

# Production mode can also be set using an environment variable
NODE_ENV=production npm install

When the project is built to be deployed to a server (e.g., through GitHub Actions), the flag must be applied with npm ci:

npm ci --production

Although you'll get acquainted with production a little later, you should know about devDependencies right away because they're found in the source files of the vast majority of projects and it should not be a surprise.

Do it yourself

  1. Clone the project nodejs-package
  2. Install its dependencies
  3. Run the code to execute bin/nodejs-package.js 10. You should see a number as a result
  4. Run npm test. Tests should work correctly
  5. Look at what dependencies are in the project, and how they are imported in the src and __tests__ directories
  6. Examine the size and contents of node_modules, then remove it, install dependencies with the --production flag, and check the new size and contents

Аватары экспертов Хекслета

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
hours of theory

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending the form, you agree to Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing:">Bookmate</span>
<span class="translation_missing" title="translation missing:">Healthsamurai</span>
<span class="translation_missing" title="translation missing:">Dualboot</span>
<span class="translation_missing" title="translation missing:">Abbyy</span>
Suggested learning programs

From zero to a developer. Refunds in case you won't get a job

Frontend Developer icon
Development of front-end components for web applications
start anytime 10 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending the form, you agree to Personal Policy and Service Conditions

Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.