Change the location of the node_modules folder

Question

I'm currently trying to migrate an old ASP.NET WebSite project to Visual Studio 2015. I'd like to use NPM/Gulp to automatically compile LESS files to CSS (this task was done by WebEssentials in VS 2013).

I added a package.json file to the project to load the required components. This creates a node_modules folder in the root of the WebSite project, and this is where my problem starts:

Since WebSite projects don't have a project file, all files (and sub-directories) found in the project root folder, are automatically part of the project. Due to the deeply nested directory structure inside node_modules, this leads to errors because of too long path names.

An easy workaround is to set the hidden attribute on the node_modules folder (but this has to be done manually by each developer).

Is there a way to tell NPM to put the node modules into another directory e.g. one level above the project (..\node_modules) where the solution file is?

Or is it possible to set the hidden attribute on a folder from a gulp-task (which runs when the project is loaded)?

Raquelraquela

You can approach the problem the other way around. Create your website root in a different location, and use gulp to compile sources and write them to your website folder (i.e. public) then run npm/gulp from your solution directory, and let your entry point of your website point to the public folder. – Disjunctive

@Rik: I'm not sure that's possible with an ASP.NET WebSite project, but I will think about it. Also, if possible, I'd rather not make too many changes to that old project. – Raquelraquela

But you are adding the npm files somewhere. pick any location that is not in your website folder and use gulp.src().pipe(dostuff).gulp.dest(path/to/website/dir) from there. With gulp.dest() you can copy the files to any location. Doesn't need any structural changes. – Disjunctive

Thanks @Rik, that worked. NPM/Gulp can also be added at the solution-level (not only at project-level). – Raquelraquela

Answer 1

Based on @Rik's answer, I was able to solve the problem:

Instead of adding the package.json and gulpfile.js into the WebSite project, I added them at the solution level (as solution items). This means, that the node_modules folder is now in the solution directory at the same level as the WebSite project(s).

The only other change was to modify the paths in gulpfile.js accordingly.

Raquelraquela

Answer 2

You might want to check out npm 3.0+. It installs the modules in a maximally flat structure. It should reduce the paths lengths in the module directory.

From the release notes

Flat, flat, flat!

Your dependencies will now be installed maximally flat. Insofar as is possible, all of your dependencies, and their dependencies, and THEIR dependencies will be installed in your project's node_modules folder with no nesting. You'll only see modules nested underneath one another when two (or more) modules have conflicting dependencies.

• #3697 This will hopefully eliminate most cases where windows users ended up with paths that were too long for Explorer and other
  standard tools to deal with.
• #6912 (#4761 #4037) This also means that your installs will be deduped from the start.
• #5827 This deduping even extends to git deps.
• #6936 (#5698) Various commands are dedupe aware now.

This has some implications for the behavior of other commands:

• npm uninstall removes any dependencies of the module that you specified that aren't required by any other module. Previously, it
  would only remove those that happened to be installed under it,
  resulting in left over cruft if you'd ever deduped.
• npm ls now shows you your dependency tree organized around what requires what, rather than where those modules are on disk.
• #6937 npm dedupe now flattens the tree in addition to deduping.

https://github.com/npm/npm/releases/tag/v3.0.0

For upgrading the windows installation check out this package npm-windows-upgrade

Cinerator

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Tungstate

Added more detail to the answer – Cinerator