1

I upgraded a legacy website project developed using Visual Studio 2010 to a Web Application project in Visual Studio 2013. Now I want to add some MVC components to this application including Bundling and Minification. But the App_Start folder is missing. Is there any NuGet package I need to install that would create the App_Start folder and add the 'Bundling and Minification' feature?

For instance, this project was also missing the 'Content' folder, but when I installed the jQuery UI 1.10.4 package via NuGet package Manager, it created the Content folder and add jQuery UI css files to it.

mrjimoy_05
  • 3,452
  • 9
  • 58
  • 95
nam
  • 21,967
  • 37
  • 158
  • 332
  • You can create an App_Start folder yourself and add it to the project if that's all you need. I suspect that bundling/minification is more involved, though. This is one thing I don't like about big, heavy IDEs; they discourage you from knowing what's going on under the hood. – jpmc26 Feb 08 '14 at 06:34
  • I would like to know a standard procedure that would automatically create App_Start folder and install and configure at least the initial features of bundling/minification from where I can add/remove the css/js files to the bundles if needed. I am assuming VS2013 would have some functionality to achieve this but have not found any yet. – nam Feb 08 '14 at 20:19
  • @nam also, in addition to my answer, I'll add the caveat: there is nothing special about the App_Start folder. I think they just introduced it in MVC projects for organizational purposes. If you look at the "special" [Web Project Folders](http://msdn.microsoft.com/en-us/library/ex526337.aspx) it doesn't include App_Start. – MikeSmithDev Feb 11 '14 at 16:15

1 Answers1

2

Step 1: Install Bundling and Minification (via the GUI). Tools > Library Package Manager > Manage NuGet Packages For Solution. Search Online for "bundling" and the first result should be Microsoft ASP.NET Web Optimization Framework. Install that.

Step 2: Right-click your Web Project and Add New Folder and call it App_Start.

Step 3: Add a new class in App_Start called BundleConfig.cs. It could look like this:

using System.Web.Optimization;

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
    }
}

Step 4: Load on ApplicationStart in global.asax:

void Application_Start(object sender, EventArgs e)
{
     BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Step 5: Add to footer of MasterPage. I usually do like this:

        <%: System.Web.Optimization.Scripts.Render("~/bundles/jquery") %>
        <asp:ContentPlaceHolder ID="MyScripts" runat="server"></asp:ContentPlaceHolder>
    </body>
</html>

That way, jQuery loads near the </body> tag and you can put all inline scripts in a ContentPlaceHolder that renders after your main script references.

MikeSmithDev
  • 15,731
  • 4
  • 58
  • 89
  • You don't have to load in footer... but its better to do it like that. If this is a legacy project with a bunch of inline jQuery that would break if jQuery ref is in the footer, you can still do this and just move all that stuff into the new `ContentPlaceHolder`. Takes time yes, but in long run it's better. If you have problems with scripts in user controls, I show how to move them as well in [this SO post](http://stackoverflow.com/a/19256630/1810243). – MikeSmithDev Feb 09 '14 at 00:10