How can I check `bin/` directories under `node_modules/` into TFS? - node.js

I have a Team Foundation Build server behind a firewall, and I would like to check in a node_modules/ directory (powering both a Browserify client app and Node server app) associated with a project so that all of the files and dependencies needed to deploy a build are available without fetching anything.
Checking node_modules/ in to TFS seemed to work at first, except that the bin/ directories appearing in around 20 of my NPM dependencies were not checked in. bin/ does not appear in my .tfignore (or anywhere else I know of that could be preventing the check in).
These bin/ directories don't appear in the included/excluded changes in Team Explorer, at all. It's possible to locate one of these folders in Windows Explorer and add it with the TFS context menu, but doing that for all of the dependencies would be horrifically tedious and error prone.
How can I persuade TFS to detect changes in these folders? Is there some other configuration affecting included/excluded changes that I'm not aware of?

It is not recommended to upload "bin" folder or "node_modules" folder into Version Control. But if you do want to do this, following the steps below:
Go to "C:\Users\youraccount\AppData\Local\Microsoft\Team Foundation\x.0\Configuration\VersionControl" folder and open "LocalItemExclusions.config" file. (There may several folders named like 1.0, 2.0, 3.0, you need to make sure open the folder your VS current use.)
Delete the lines like following and save the file:
<Exclusion>bin</Exclusion>
<Exclusion>*.dll</Exclusion>
Close Visual Studio.
Delete "node_modules" folder.
Restart Visual Studio.
Run "npm install" command to reinstall the node modules.
Check "Pending Changes", files in "bin" folder should be listed in "Excluded Changes" section.

To check if the files and bin folders will get ignored by TFS. You could try to manually add them (such as drag to source control explorer). If you couldn't, then must related to some .tfignore settings , you may double check this such as if there is a .tfignore file in the root of the project folder level.
If you could, there maybe something wrong with your workspace or source control mapping of the bin folder. Try to remove the source control bindings and rebinding to TFS. Also give a try with delete the old workspace and use a new workspace.

You shouldn't check in node_modules - ever.
Rather use browserify or WebPack (I'd recommend WebPack) to package up your bundle.js.
Add the bundle.js to your source/scripts folder. Reference your bundle.js from your html instead of any <../node_modules/../scripts>.
Remove the npm install from your build script. you won't need it now due to referencing your bundle.js
WebPack is a dev-step, but it secures the version of packages you used during development and also saves you the npm install headache during deployment.

Related

How to properly install dependencies in large projects?

I am a dev on a team inside a very large project. This is the first time I have worked on a project where the node_modules/package-lock files are not in the root of the project. I am used to personal projects with a few folders, files, and the node_modules/package-lock in the root so I can always easily "npm install..." in the root.
I am running into an issue when I try to run npm install (package), it completely breaks my local project. I have to rollback the changes, rebuild, and it works fine again.
Things I have tried:
Navigate to the same directory that node modules is in.
Example: C:\Users\USERID\source\repos\companyName\companyName2\Web\Administration.
Node_modules and package-lock are located here along with ~20 other various folders.
Navigate to the root (even though node_modules isn't located here, figured I'd try).
Navigate to one folder above. I tried this because this is the directory where the Visual Studio .sln file is located.
Example: C:\Users\USERID\source\repos\companyName\companyName2\Web\companyName.Web.Administration.sln
For more context, the specific file I need to add a package to is: C:\Users\USERID\source\repos\companyName\companyName2\Web\Administration\ClientApp\app\letter\letter-create-main.component.ts
I am hoping I can get some clarity on how to properly run npm install in large projects so I can add packages that I need to this monster of a project, and hopefully help others that have this question at the same time!

packages on a build machine without permanent access to internet

I am in the process of migrating a machine from an older Linux version to a newer one. We have some node projects that seem to be more difficult to transplant to the newly desired setup.
On the old machine the build script from package.json could be run without problems because node_modules is tracked by the source control.
We don't want to use that method anymore since it is not very scalable as we want to make sure we can easily upgrade all the packages for all the users at once without the hassle of putting hundreds of subfolders (from node_modules) together with various resources.
Did you encounter such issues and, if so, how did you manage it?
Can we use a global node_modules somehow to avoid multiple node_modules for each project?
Thank you!
Can we use a global node_modules somehow to avoid multiple node_modules for each project?
There are (at least) three possibilities. Here they are in the order that I would recommend using them:
If Node.js does not find a package in the application's/module's own node_modules directory, it will check in the parent directory (../node_modules) and then that directory's parent directory (../../node_modules) etc. So if all your projects have a shared parent directory, you can put the dependencies in a node_modules directory. See "Loading from node_modules folders" in the Node.js documentation.
A second option is to set the NODE_PATH environment variable to the directory where you would like your projects to search for modules not found elsewhere. See "Loading from the global folders" in the Node.js documentation.
Lastly, it's legacy behavior, but Node.js will also search in three other locations before giving up, so you can use one of those as well: $HOME/.node_modules, $HOME/.node_libraries, and $PREFIX/lib/node. See (again) "Loading from the global folders" for more information.
All that said, please note that the docs also correctly say "It is strongly encouraged to place dependencies in the local node_modules folder. These will be loaded faster, and more reliably."
If you must do this, I would use the first option above and place the node_modules folder as far down in the directory hierarchy as you can.

Why does VS 2017 set node_modules folder to read only in .Net Core App?

I'm building a .Net Core application using Angular for my client-side code. For the most part, I'm using the default template that is included in VS 2017. For whatever reason, VS is making my node_modules folder read only. Before I was able to install packages via command line in the directory that holds my client side code as well as my package.json file and my node_modules folder. Before I was able to do this, but now it is defaulting the folder to read only which is invaliding all of my npm commands. I've verified that this is the case because I can remove the read only attribute via windows explorer and then run any of my commands like npm install.
Has anyone else encountered this before? If so, what did you do to resolve this?
Thanks!
Okay, I found the answer. VS puts a lock on the node_modules folder while it is running.
So, I guess for now if you need to add packages just close VS first.

which files/folders to exclude from source control

Im setting up a unit test project and using SVN for source control. There are two nuget packages used. Im not sure if I need to exclude the files being generated or not.
MSTest.TestAdapter.1.2.0 and MSTest.TestFramework.1.2.0
When I go to commit the files within my branch, I see a lot of what look like new files being added in this folder MSTest.TestAdapter.1.2.0/build. eg.
MSTest.TestAdapter.1.2.0/build
MSTest.TestAdapter.1.2.0/build/_common/Microsoft.VisualStudio.TestPlatform.MSTest.TestAdapter.dll
Can I exclude everything from build/* ?
As a rule of thumb, you shouldn't keep Nuget packages in svn. In Visual Studio 2017 they are not event located in your project folder structure, but in %HOME%\.nuget\packages. Reference: Should we include Nuget PACKAGE folder in version control?
I would add whole packages folder to ignored if I were you.

How to use npm packages with ASP.NET CORE 2 in Visual Studio 2017?

I added some npm packages to my ASP.NET Core 2 project in Visual Studio 2017. Now I want to use css and js files from these packages, but VS doesn't see them because node_modules folder is outside wwwroot. What is the common practice here, how to make Visual Studio working with node_modules?
As soon as you add the desired npm packages to your project, either through:
npm install command
or
typing the package name and its version in the npm configuration file
or
searching the package in the Library Dialog, indicated in the following image for instance,
they will be downloaded and restored in the node_modules folder. But to use them in your views, you need to add them to a client-side folder, such as lib under wwwroot folder.
You can copy them to wwwroot folder manually through the file system, or use the Library dialog:
right click on the lib directory inside wwwroot
Click Add, and choose Client-Side Library
From the provider, choose fileSystem (if desired files already exist in node_modules folder)
Choose all or specific files needed
Click install
However, you can manage this file copying operation manually.
Now, from the folders under wwwroot, you can drag and drop the file into your views. Be careful to omit ~ if your view is a Layout.
Hope this helped....
More details here: https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/libman-vs?view=aspnetcore-3.0
The common practice is to bundle your web assets, and put only the compiled bundle into your wwwroot folder.
Since Visual Studio 2015 we have multiple Taskrunners from the NPM World:
Gulp
Grunt
With them you could write a script, which automatically bundles your web assets. This script has full access to the NPM infrastructure.
There are some tools out there which make this super easy:
gulp-uglify
gulp-cssmin
More Information:
https://learn.microsoft.com/en-us/aspnet/core/client-side/using-gulp
That said, it is also possible to include your npm folder:
public void Configure(IApplicationBuilder app)
{
app.UseStaticFiles(); // For the wwwroot folder
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "node_modules")),
RequestPath = "/node_modules"
});
}
But this would be the wrong way.

Resources