Update Bootstrap in Visual Studio

When creating a new ASP.NET Core/Razor Pages project in Microsoft Visual Studio 2022, Bootstrap 5.1.0 is installed.

At the current time, the present version of Bootstrap is 5.3.1 and to update there are two paths to upgrade Bootstrap.

Project Source code

Options

From Visual Studio

Right clicking in solution explorer in the project, select Add, Client-Side library then type bootstrap and you get bootstrap@5.3.1 (or if there is a newer version than it will show). Next click Install.

From CLI

• In solution explorer, right click on wwwroot/lib/bootstrap

• Delete the folder

• Install Libman CLI

• Open a command window to the root of the project and enter

  • libman init --default-provider cdnjs
  • libman install bootstrap@5.3.1 --destination wwwroot/lib/bootstrap/dist

In the root of the project libman.json is generated from the first command.

The second command installed version 5.3.1 of bootstrap.

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "bootstrap@5.3.1",
      "destination": "wwwroot/lib/bootstrap/dist"
    }
  ]
}

Caveat

When installing from Visual Studio the libman interface allows selective installation of files while the CLI does not. In the current project it does selective installation of Bootstrap using --files argument.

Console project to handle the update

First checks if libman.json exist, if not contine, if exists do nothing.

Process

Remove the current Bootstrap folder

Directory.Delete("wwwroot\\lib\\bootstrap", true);

Create a batch file to run libman

StringBuilder builder = new();
builder.AppendLine("libman init --default-provider cdnjs");
builder.AppendLine("libman install bootstrap@5.3.1 " + 
                   "--destination wwwroot/lib/bootstrap/dist " + 
                   "--files css/bootstrap.min.css --files css/bootstrap.min.css.map " + 
                   "--files js/bootstrap.bundle.min.js --files js/bootstrap.bundle.min.js.map");

await File.WriteAllTextAsync("install.bat", builder.ToString());

Run the batch file

var batchCommandFile = Path.Combine(Directory.GetCurrentDirectory(), "install.bat");

ProcessStartInfo psi = new ProcessStartInfo
{
    WorkingDirectory = Directory.GetCurrentDirectory(),
    FileName = batchCommandFile,
    RedirectStandardOutput = true,
};

Process process = Process.Start(psi);

process!.WaitForExit(-1);

Clean up

File.Delete(batchCommandFile);

How to use

Once compile, create an external command in Visual Studio.

In Visual Studio

Open the Tools menu, click on external tools...

Click the Add button

Title: Update to Bootstrap 5.3.1
Command: traverse to the executable folder for this proect and select the executable

Arguments: $(ProjectDir)

Initial directory: $(ProjectDir)

Click OK.

To use the above, select a startup project in Solution explorer, select the new tool, done.

Resources

• Use LibMan with ASP.NET Core in Visual Studio
• Use the LibMan CLI with ASP.NET Core
• cdnjs Bootstrap
• Using LibMan To Manage Client-Side Dependencies

Closing

What has been provided can work for other client side libraries.

And for those hard core CLI developers, create a solution, project with Bootstrap 5.3.0

dotnet new razor --language "C#" --output FirstApp
rm .\FirstApp\wwwroot\lib\bootstrap -Recurse -Force
cd .\FirstApp\
libman init --default-provider cdnjs
libman install bootstrap@5.3.1 --destination wwwroot/lib/bootstrap/dist
libman install bootstrap@5.3.0 --destination wwwroot/lib/bootstrap/dist --files css/bootstrap.min.css --files css/bootstrap.min.css.map --files js/bootstrap.bundle.min.js --files js/bootstrap.bundle.min.js.map

Source code

Requires Microsoft Visual Studio 2022 or higher

Clone the following GitHub repository and open the project UpdateBootstrapApp.