CODEWITHSUNDEEP
javascriptdependenciesasp.net-core-mvcvisual-studio-mac
Léster
Léster

Reputation: 1279

How to enable Bower in VS 2017 for Mac?

I'm learning to use Visual Studio 2017 for Mac to develop ASP.NET Core MVC apps with it. So far so good, but my problem is that I don't know how to handle/manage JavaScript libraries. Supposedly you have to use Bower (the 4 default dependencies in every new project have a .bower.json file in their respective folders), but there's no bower.json file on the project and honestly I don't know where to start.

I assume I should start by installing Bower in my development machine, but how do I integrate it with a build action in VS? I'm assuming that in a proper build, Bower should download and install all my JS dependencies.

I've searched for answers but most search results say that Bower is deprecated and I should be using LibMan and there are no tutorials about using LibMan on macOS.

Upvotes: 1

Views: 319

Answers (1)

Léster
Léster

Reputation: 1279

Ok, after trying tip after tip, I finally found a solution. Posting here in case someone else has the same problem.

Two things:

  • The solution uses Libman instead of Bower.
  • I presume you already have VS for Mac and the .NET Core SDK installed and already created a solution with an ASP.NET Core MVC project inside.

Do the following:

  1. Install Libman with the following command in Terminal: dotnet tool install -g Microsoft.Web.LibraryManager.Cli
  2. Remove all folders under the lib/ folder in your project. You'll have Libman manage all your JS dependencies.
  3. Add a JSON file to your project. Call it libman.json.

  4. Add the following content to libman.json and save it:

    {
    "version": "1.0",
    "defaultProvider": "cdnjs",
    "libraries": [
        {
            "library": "[email protected]",
            "destination": "wwwroot/lib/bootstrap"
        },
        {
            "library": "[email protected]",
            "destination": "wwwroot/lib/jquery"
        },
        {
            "library": "[email protected]",
            "destination": "wwwroot/lib/jquery-validation"
        },
        {
            "library": "[email protected]",
            "destination": "wwwroot/lib/jquery-validation-unobtrusive"
        }
    ]
}

  5. Go to Project > [PROJECT_NAME] Options... and there, in Build > Custom commands, add a Before build command. The command is /Users/[YOUR_USERNAME]/.dotnet/tools/libman restore and in the Working directory field, use the macro ${ProjectDir}. Save the changes.

Now, every time you compile the solution (or the specific project), Libman will fetch and install the libraries noted in libman.json. If the files are in their destinations already, Libman does not do anything. If a previous Libman execution downloaded the libraries, then it retrieves them from its internal cache.

Hope this helps.

Upvotes: 3

Related Questions