Sunday, May 1, 2016

Some thoughts on putting JavaScript, CSS, Images inside wwwroot folder

Last week, our team spent time in converting JavaScript to TypeScript and CSS to LESS and re-structuring our client side developer workflow.  In this post, I just want to focus on the wwwroot folder.  We do our web development using ASP.NET MVC and there is still lot of code in Web Forms too. We wanted to bring sanity to our growing CSS and JavaScript code as we are doing more and more client side code.  So we took some cues from ASP.NET core on how it is organizing code. And we followed basically the same approach.  Put everything inside wwwroot folder like below.

>wwwroot
>>>css
>>>js
>>>lib

We had discussion amongst us and here are our reasons for sticking with it. I know ASP.NET Core team must have had their reasons for doing it and our reasons may well be what they must have been thinking.

1. Everything client side is inside one folder.

Imaging currently if you are working inside ASP.NET MVC web app then you have something CSS inside Content folder, then JavaScript inside Scripts folder, then images in images folder. And these folders are separated apart. If you have lot of resources you may be spending time scrolling looking for a particular file. [Tip: If you use VSCode then Ctrl+P you can help you open a file very quickly]

2. wwwroot starts with w.

Alphabetically wwwroot it is at the end in folder list and you don’t have to go looking for stuff.  You know it is at the bottom and everything is in there. We thought of names like web, public but we stuck with wwwroot folder for now.

If you find any great discussion on this topic please share with me in the comments below.