Blazor, dotnet CLI, VS Code & Tailwind - how to set that up?

I'm a big fan of VS Code and love using it to write all types of apps I can. Also, I like working with C# and wanted to play a bit with Blazor recently. Combining both of these interests, I decided to write a small project in Blazor, but using VS Code instead of typical Visual Studio approach. It also forced me to learn dotnet CLI a bit more (not as much as I thought at the beginning, though 😄). In this post, I'll describe general project configuration which includes:

1. Creating a new Blazor Web App solution & project


2. Adding a custom, "Shared", project to the solution


3. VS Code setup


4. Debugging in VS Code (including Hot Reload)


5. Adding Bootstrap and Tailwind to the project

Maybe, one day, I'll dive a bit more into the project implementation, but for now, it's gonna be just the environment setup 😉

Creating the project

As mentioned, I wanted to learn a bit of dotnet CLI, so we'll create the solution and add needed projects using command line.

The goal is to have a solution with the default Blazor Web App projects + additional "Shared" project that can contain, for example, business logic, classes common for backend and frontend, etc.

Empty solution and Blazor Web App project

To create an empty solution, run

dotnet new sln -o MyCoolProject

And then run

dotnet new blazor -int Auto --empty -n MyCoolProject

to create a Blazor Web App project.

Quick explanation of the arguments:

• 
  blazor - creates a Blazor Web App


• 
  -int Auto - sets . You can read its description yourself, but, in essence, it makes VS Code more IDE-like for C# compared to being just a text editor. You might also look into
  
  
  

  
  
  
  Debugging
  

  
  
  

  At that point, we should be able to run and debug the code from VS Code - ideally, just press F5 and it should work. If not, click "Run and debug", select C#, and then something with "default configuration". At worst, restart VS Code (to be sure, really close and open it again, not just reload the window via the command palette).

  
  
  

  Now let's try actual debugging with a breakpoint. Due to the project config with Auto, remember about @rendermode InteractiveAuto at the top of the Home.razor file:
  
  

  
  
  
  
  

  CODE Kopieren

  @page "/"
  
  @rendermode InteractiveAuto
  
  
  
  <h3>Simple Counter</h3>
  
  
  
  <p>Current value: <strong>@counterValue</strong></p>
  
  
  
  <button @onclick="IncrementCounter">Increment</button>
  
  
  
  @code {
  
      private int counterValue = 0;
  
  
  
      private void IncrementCounter()
  
      {
  
          counterValue++;
  
      }
  
  }
  
  

  
  
  
  
  
  
  
  

  Place a breakpoint in the IncrementCounter method, run the app in debug mode, and, hopefully, it will be hit when you press the button to increase the counter.

  
  
  

  ❗ If the counter doesn't work and you see an error in the DevTools console about the Home component not being found, move it from the MyCoolProject/Components/Pages directory to MyCoolProject.Client/Components ❗.

  
  
  

  Docs are super clear and to the point, so I won't write everything again here, but in short:

  
  
  
  
  
  • 
    

    install LibMan globally with
    
    

    
    
    CODE Kopieren

    dotnet tool install -g Microsoft.Web.LibraryManager.Cli
    
    

    
    
    
  
  
  • 
    

    initialize it in the current project with
    
    

    
    
    CODE Kopieren

    libman init -p unpkg
    
    

    
    
    
    

    in .Client project folder (

  
  

  • I haven't checked the whole integration thoroughly, so treat the above steps just as a starter 😊

  
  
  
  
  

  
  
  
  Tailwind
  

  
  
  

  Tailwind can be summarized as a set of utility CSS classes you can use to style your HTML. They are similar to Bootstrap p-4, mb-3, d-flex etc. but way more powerful. Another point worth noting from a configuration point of view is its build process - there is a Tailwind tool that scans your source files, looks for Tailwind CSS class names, and includes them in the final CSS file you link to your main HTML. That's it in terms of theory - let's actually add Tailwind to our Blazor project. I've followed Chris Sainty's blog post on that.

  
  
  

  First things first, we'll need the mentioned Tailwind tool for creating the output CSS. Install it globally with
  
  

  
  
  
  
  

  CODE Kopieren

  npm install -g tailwindcss
  
  

  
  
  
  
  
  
  
  

  Then we need a main config file for Tailwind. To create it, go to the root directory of the project and run
  
  

  
  
  
  
  

  CODE Kopieren

  npx tailwindcss init
  
  

  
  
  
  
  
  
  
  

  And then, adjust content field in the created tailwind.config.js to be:
  
  

  
  
  
  
  

  CODE Kopieren

  content: [
  
      './MyCoolProject/**/*.{razor,html}',
  
      './MyCoolProject.Client/**/*.{razor,html}',
  
  ],
  
  

  
  
  
  
  
  
  
  

  It tells Tailwind which files to watch for the CSS classes.

  
  
  

  Then we need the main CSS files to be processed by Tailwind. We'll also include default Tailwind classes and styles there. We can use the existing MyCoolProject\wwwroot\app.css file for that. Just add:
  
  

  
  
  
  
  

  CODE Kopieren

  @tailwind base;
  
  @tailwind components;
  
  @tailwind utilities;
  
  

  
  
  
  
  
  
  
  

  at the top and that should do the trick.

  
  
  

  Using CLI, we should now tell Tailwind which file to process and where to put the final CSS that we'll link in the HTML. Our input will be the mentioned app.css file, and we'll output the final CSS to MyCoolProject\wwwroot\app-compiled.css. The command is:
  
  

  
  
  
  
  

  CODE Kopieren

  npx tailwindcss -i .\MyCoolProject\wwwroot\app.css -o .\MyCoolProject\wwwroot\app-compiled.css --watch
  
  

  
  
  
  
  
  
  
  

  Due to the --watch switch it also automatically rebuilds the output after any changes in the input file are detected.

  
  
  

  To finish linking Tailwind to out app, go to MyCoolProject\Components\App.razor and update one of the <link> tags which contains reference to app.css and change it to app-compiled.css, i.e.:
  
  

  
  
  
  
  

  CODE Kopieren

  <link rel="stylesheet" href="app-compiled.css" />
  
  

  
  
  
  
  
  
  
  

  To test if things work, you can open MyCoolProject.Client\Components\Home.razor and add somewhere
  
  

  
  
  
  
  

  CODE Kopieren

  <h1 class="text-3xl font-bold underline">
  
      Hello world!
  
  </h1>
  
  

  
  
  
  
  
  
  
  

  Then launch the app (F5).

  
  
  

  
  
  
  Summary
  

  
  
  

  In the post, I've very briefly described how to set up a dev environment for developing Blazor Web App using VS Code. We created solution, projects and linked them properly using dotnet CLI. Then we added the most important extensions to VS Code and updated it settings to enable Hot Reload. To finish the configuration, we added CSS library (Tailwind).

  
  
  

  It's very much not in-depth post, but I hope it gives a general idea of how to do things 😊 Blazor is quite a new thing for me, so comments and questions are more than welcome.

  
  
  

  Thanks for reading! ❤️

  
  
  

  
  
  PS
  
  I've been writing this post over quite some time (motivation, time & stuff), so if something doesn't work anymore, let me know!
  
  

  Vollständiger Original-Bericht

  Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

  ↗ Original-Artikel auf dev.to lesen