There are quite a few ASP.NET developers that have been adopting NodeJS in their projects for client side package management and development time tooling. A question that I get relatively often is, how can they exclude the
node_modules folder from being published. In this short post, I'll show some options for getting that done.
Setting up a project
I'm starting off with an out of the box, new ASP.NET MVC application. If you're using ASP.NET Web Forms then the process should be pretty much the same.
First, let's initialize a
package.json file and add some npm packages. You will need to have node installed on your machine. You can grab an installer for your OS on their downloads page. Next, open up a command line prompt at the root of your project.
To get to the command prompt quickly in Visual Studio, I recommend installing Mads Kristensen's Open Command Line extension. I use it all the time.
package.json file is created, make sure you include it in your project. As you might already know, Visual Studio does not automatically add files that are placed in the project folder.
$ npm init $ npm install toastr --save
Here I'm just installing
Scripts folder, I'll create a simple script called
app.js that'll create a notification.
toastr.info("this is just a test message");
node_modules folder. Instead of referencing that path, I'll create a simple Gulp script that I can use to copy the toastr files out, and do any other processing I'd need for my site's front-end assets.
First, make sure that
Gulp is installed on the machine and in the project.
$ npm install --global gulp-cli $ npm install --save-dev gulp gulp-concat
Now create the
There are 2 simple
Gulp tasks here. One to copy the CSS files to the
Scripts folder. To keep it simple, only the
toastr files are being copied over but you can add any other dependencies you've installed.
gulp on the command line returns some output that looks like this.
Since these generated files aren't a part of the project, Visual Studio won't show them in the Solution Explorer by default. At the top of the Solution Explorer, click on the
Show All Files icon. You should see
vendor.js greyed out under their respective folders. Right click on each file and choose
Include In Project.
Now you can just reference the files in your Razor template (or MasterPage if you're working with Web Forms).
Excluding node_modules from the project
If you followed through the last section and didn't skip ahead, you might have noticed that we included
vendor.css but not the
node_modules folder. Simply, excluding the
node_modules folder from the project will exclude it from the published web application.
Excluding node_modules via MSBUILD
You might have your own reasons why you want to include the
node_modules folder in the project. In that case, you exclude
node_modules (or any other folder) from being published by using the
First you'll need to unload your project from the solution and edit the project file. Next add an
ExcludeFromPackageFolders element to an ItemGroup element. Using the
Include attribute, you can provide a semicolon-separated list of folders that you want to exclude. For now, we're only interested in the
Note that we also include a
FromTarget element in our setup. This is an optional element and is only really there for descriptive purposes.
Once that's done, we'll save the file and reload the project. Doing a publish should now exclude the
node_modules folder even though it's included in the project.
With our current setup, the published output also includes
gulpfile.js. If you want to exclude these files from your published output, you can use a similar technique to the previous one using a
ExcludeFromPackageFiles element. The
Include property even supports globbing.
Now with all this in place, your NodeJS artifacts will not get included in your published web application.
If you're like me, you prefer to keep your published output at lean as possible. Excluding the
node_modules folder can greatly reduce the size of your deployed web application.
In general, I prefer not to let my project file know about the
node_modules folder at all. I find that projects load faster and I don't have to worry about ridiculously large commit messages in source control.