Typescript tutorial to create ASP.Net Core application (with or without Angular 2) suggests that we create a folder Scripts and use gulp task to copy only the .js files to wwwroot
folder, e.g. during the build.
Now that makes sense, but what do we do with all the .html, .css, etc. files that angular 2 can utilize. It seems that there are generally two way of doing it:
Adding them to wwwroot
folder.
Benefits: no need to add gulp task for these static files
Drawbacks: we'll have to duplicate the folder structure and do operations of copy/rename/etc twice
Keeping them in the Scripts
folder outside of wwwroot
(then we'd better rename it to Source
or something like that.
Benefits: no duplication, all in one place
Drawbacks: we'll have to copy them to wwwroot
in gulp task
In case 2 wwwroot
becomes like a bin
folder for ordinary application.
Are there any official guidelines/advices on the topic (I was not able to find any) that I can use as a reference?
Generally people use method 2, though most people (me included) call the folder "app" rather than "source" or "scripts" and copy them via gulp.
One reason for doing so is that we can exclude wwwroot
folder from source control management. Another being that for production you want to bundle your files (both html, css and the resulting *.js files), so your wwwroot
folder will contain different set of data, depending on if you are developing or deploying it.
And since it's content will change often (with each build/bundling) and it may generate fairly large and minified flies, its less suitable for source control anyways (minified/uglified/concated files are hard/difficult/impossible to create diffs for).
For angular in specific you want to keep the *.html, *.ts, *.js and *.css (only the ones related to components) in the same location/subfolder. Visual Studio will automatically group them together (i.e. sample.component.html
, sample.component.ts
,sample.component.css
and sample.component.js
will be grouped together and you can unfold them by pressing the little triangle next to the grouped name) and it works well for bundling as angular2 css/template can be made to use component relative path, if you use a module loader (recommended!).