exclude folder in project.json

Question

in the new asp.net 5 template there's a project.json in which you can exclude certain directories.

"exclude": [
    "wwwroot",
    "node_modules",
    "bower_components",
    "dist",
    ".tmp"
]

As you can see, I added a few folders like 'dist' and '.tmp', but they are still included in the solution explorer. There's not much documentation about this. How to exculde files/folders from your project in vs 2015?

Answer 1

With the latest Visual Studio you just need to right-click the folder/file and chose "Hide from Solution Explorer".

That will change the "xproj" this way:

<ItemGroup>
    <DnxInvisibleFolder Include="wwwroot\" />
</ItemGroup>

Answer 2

As of Asp.Net 5 beta-8 and complementary tooling update to Visual Studio 2015, you are now able to exclude/hide folders from being displayed in solution explorer. More information about this, and other changes are outlined in the announcement post. To hide a file or folder, right-click to bring up a context menu and select Hide from solution explorer. This creates an entry in the .xproj file:

<ItemGroup>
  <DnxInvisibleContent Include="myhiddenfile.txt" />
</ItemGroup>

Note also that there has been a change to where bower packages are installed by default. Previously, the Asp.Net 5 templates in Visual Studio would install bower packages to a folder called bower_components, a practice familiar to web developers who do not use Visual Studio. However, apparently due to developer confusion, this has been changed to wwwroot/lib. This can be changed by editing the bowerrc file. As such, the bower_components folder does not exist in the new beta-8 templates. Please see this post by Scott Hanselman for more information.

Answer 3

Looking at the state of asp.net 5 with visual studio 2015 I can only say that they made it much more difficult and inconvenient to work with task runners like gulp or grunt. Since I'm using Web API 2 to manage my data I switched to Visual Studio Code with bower, gulp and browsersync and this has proven a to be LOT easier and faster with much less clutter.

To make a startup template: https://github.com/Swiip/generator-gulp-angular

Now you can use any editor and you get a clear separation of front end and back end development. Plus you get to know gulp and bower and the (minimal) command line stuff which VS2015 tries to do for you (and fails to do so many times).

Oh yes: you don't have to exclude folders anymore, since the template has a much more sensible folder structure

Answer 4

Rightly or wrongly, here's what I did to get bower_components and .sass-cache out of the way. In my case, node_modules was already excluded from my project somehow, even though it's at the same level with gruntfile.js. I still don't understand why it is treated differently. Anyone know?

First, I set my location like this in the .bowerrc file:

{
  "directory": "../../artifacts/bower_components"
}

Then I adjusted my paths as necessary in my gruntfile.js

Also, To get the sass-cache folder out of the way, since I was using grunt-contrib-compass, I configured my compass task with this option:

  cacheDir: '../../artifacts/.sass-cache',

There are other ways to do this if you are using other sass / compass tools.

RESULT:

• I can now search my entire project for text and not get hits in my libraries.
• bower_components and .sass-cache are out of reach of source control.

Answer 5

It may not be ideal, but I was able to hide a folder from the solution explorer in an Asp.net 5 project by marking the folder as hidden in the windows explorer properties dialog. I had the .idea folder used by WebStorm showing up so it being hidden was not too big a deal. WebStorm doesn't mind.

It seems like the folder will not be hidden if it is already in the solution explorer. Mark it and it's contents hidden and move it temporarily out of the project folder. Make sure it disappears from the solution explorer before moving it back. It should not show back up. A restart of Visual Studio may also work, I didn't test that.

Answer 6

The "exclude" property does not hide the folder from visual studio, it will not make the folder "disappear" from the solution explorer.

The "exclude" property removes the folder from the compilation search path. It is an instruction to the compiler (Roslyn) not the IDE. As a more comprehensive answer "project.json" is intentionally IDE agnostic. That is why there is both a projecname.xspoj and a project.json which both contain project configuration information. This is necessary to allow for more robust cross IDE and cross platform development.

You can verify this behavior yourself with a simple excercise.

1. Add a new class file (buildfail.cs) to your existing project (or create a new project) in the root project folder.
2. Ensure buildfail.cs has the same namespace as the other source files in the project, contains compilation errors, and is in the root directory.
3. You should see build errors in VS. If you don't manually build.
4. Create a new folder (excludeme) off the project root and move buildfail.cs to that folder. You should still have build errors.
5. Add excludeme to the exclude property in project.json. The build errors should be removed because builfail.cs is no longer in the build search path.

You may be wondering what is VS using to know to hide the node_packages folder from the Solution Explorer display. I am unsure and it may not be user configurable but it isn' the exclude property. Comment out node_packages in project.json and you will get build errors (package restore failure) but the folder will still be hidden from Solution Explorer. Since this is IDE specific behavior one would assume that maybe it is defined in projectname.xproj but I found no such property so at this time it would appear to be black box magic by VS.