Logo
Hydro toolkit
Setup a project for Hydro toolkit

Here you can learn how to prepare your project to use Hydro toolkit if you don't want to use the Hydro template.

If you don't have a project yet, you can create a new one. 

dotnet new webapp -o MyApp
cd MyApp

Now you can install Hydro package: 

dotnet add package Hydro

In application's startup code (either Program.cs or Startup.cs) add: 

builder.Services.AddHydro();

...

app.UseHydro(builder.Environment);
NOTE: Make sure that UseHydro is called after UseStaticFiles and UseRouting, which are required.

In _ViewImports.cshtml add: 

@addTagHelper *, Hydro

In layout's head tag: 

<meta name="hydro-config" />
<link rel="stylesheet" href="~/css/output.css" asp-append-version="true" />
<script src="~/hydro/hydro.js" asp-append-version="true"></script>
<script src="~/hydro/alpine.js" asp-append-version="true"></script>;

Configure styling

Hydro toolkit uses Tailwind. Some of the components are built using HyperUI as a base. If you don't have Tailwind in your project yet, please follow the instructions below.

Download Tailwind CLI for your operating system:

MacOS: 

brew install tailwindcss

Windows: 

winget install --id=TailwindLabs.TailwindCSS -e

Create file /wwwroot/css/input.css and add the following content: 
@import "tailwindcss";

@source "./**/*.{cshtml,cs}";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-main: hsl(0 0% 100%);
  --color-main-foreground: hsl(240 10% 3.9%);
  --color-primary: hsl(220 75% 50%);
  --color-primary-accent: hsl(220 75% 55%);
  --color-primary-foreground: hsl(0 0% 98%);
  --color-secondary: hsl(240 4.8% 95.9%);
  --color-secondary-foreground: hsl(240 5.9% 10%);
  --color-accent: hsl(240 4.8% 95.9%);
  --color-accent-foreground: hsl(240 5.9% 40%);
  --color-error: hsl(0 84.2% 60.2%);
  --color-error-foreground: hsl(0 0% 100%);
  --color-control: hsl(240 5.9% 90%);
  --color-input: hsl(240 4.9% 84%);
  --color-ring: hsl(240 5% 65%);
}

In layout add: 

<link rel="stylesheet" href="~/css/output.css" asp-append-version="true" />;

Add a hosted service to your project that will run Tailwind tool for you during development: 

using System.Diagnostics;

namespace YourProject;

public class TailwindHostedService : IHostedService
{
    private Process _process;

    public Task StartAsync(CancellationToken cancellationToken)
    {
        _process = Process.Start(new ProcessStartInfo
        {
            FileName = "tailwindcss",
            Arguments = "-i ./wwwroot/css/input.css -o ./wwwroot/css/output.css --watch",
            RedirectStandardOutput = true,
            RedirectStandardError = true,
            UseShellExecute = false,
            CreateNoWindow = true
        })!;

        _process.EnableRaisingEvents = true;
        _process.OutputDataReceived += (_, e) => LogInfo(e);
        _process.ErrorDataReceived += (_, e) => LogInfo(e);

        _process.BeginOutputReadLine();
        _process.BeginErrorReadLine();

        return Task.CompletedTask;
    }

    private static void LogInfo(DataReceivedEventArgs e)
    {
        if (!string.IsNullOrWhiteSpace(e.Data))
        {
            Console.WriteLine($"Tailwind: {e.Data}");
        }
    }

    public Task StopAsync(CancellationToken cancellationToken)
    {
        Console.WriteLine("Tailwind: STOP");
        _process?.Kill(entireProcessTree: true);
        return Task.CompletedTask;
    }
}
Usage in your Startup.cs: 
if (builder.Environment.IsDevelopment())
{
    services.AddHostedService<TailwindHostedService>();
}

In your csproj add a target that will build your styles when building for the first time or publishing: 

<Target Name="BuildTailwind" BeforeTargets="Build">
  <PropertyGroup>
    <TailwindMinify Condition="'$(Configuration)'=='Release'">--minify</TailwindMinify>
  </PropertyGroup>
  <Exec Command="tailwindcss -i ./wwwroot/css/input.css -o ./wwwroot/css/output.css $(TailwindMinify)" />
</Target>

Now your project is prepared to use examples from Hydro toolkit!

Logo
Hydro toolkit