Hot reload with asp net core and tailwindcss or adding extra command to dotnet

Introduction

Hot reload is a feature that allows developers to make to their code and see the results immediately without having to restart the application. It greatly improves the development experience by reducing the time spent waiting for the application to rebuild and restart. In this article, we will explore how to enable hot reload in an ASP.NET Core application that uses Tailwind CSS. We will also discuss an alternative approach of an extra command to the dotnet CLI to achieve the same result.

Enabling Hot Reload with ASP.NET Core and Tailwind CSS

To enable hot reload in an ASP.NET Core application that uses Tailwind CSS, we need to make a few modifications to the project configuration.

First, we need to install the Microsoft.AspNetCore.Mvc..RuntimeCompilation package. This package provides the necessary for compilation of Razor views, which is required for hot reload to work.


dotnet add package Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation

Next, we need to update the .cs file to enable runtime compilation. We can do this by adding the following code to the ConfigureServices method:


services.AddControllersWithViews().AddRazorRuntimeCompilation();

With these changes in place, we can now make changes to our code or CSS and see the results immediately without having to restart the application.

Adding an Extra Command to the dotnet CLI

If you prefer not to modify the project configuration, you can achieve hot reload by adding an extra command to the dotnet CLI.

To do this, we need to create a new file called dotnet-.json in the root of our project. This file allows us to configure the dotnet watch command, which is used for hot reload.

the dotnet-watch.json file, we can specify the files that should trigger a rebuild and restart of the application. For example, if we want to include all .cshtml and .css files, we can use the following configuration:


{
  "filePatterns": {
    "**/*.cshtml": {
      "commandLineArgs": "run"
    },
    "**/*.css": {
      "commandLineArgs": "run"
    }
  }
}

With this configuration in place, we can now run the dotnet watch command to start the application with hot reload enabled. Any changes made to the specified files will trigger a rebuild and restart of the application.

Conclusion

Hot reload is a valuable feature that greatly improves the development experience in ASP.NET Core applications. In this article, we explored two approaches to enable hot reload: modifying the project configuration and adding an extra command to the dotnet CLI. Both approaches allow developers to make changes to their code and see the results immediately without having to restart the application. Choose the approach that best suits your and enjoy a more productive development workflow.

Rate this post

Leave a Reply

Your email address will not be published. Required fields are marked *

Table of Contents