tye/docs/frontend_backend_run.md

Frontend Backend sample with tye run

This tutorial will demonstrate how to use tye run to run a multi-project application. If you haven't so already, follow the Getting Started Instructions to install tye.

Running a single application with tye run

1. Make a new folder called microservice and navigate to it:

   mkdir microservice
   cd microservice
   

2. Create a frontend project:

   dotnet new razor -n frontend
   

3. Run this new project with tye command line:

   tye run frontend
   

   With just a single application, tye will do two things: start the frontend application and run a dashboard. Navigate to http://localhost:8000 to see the dashboard running.

   The dashboard should show the frontend application running.

   • The Logs column has a link to view the streaming logs for the service.
   • the Bindings column has links to the listening URLs of the service.

   Navigate to the frontend service using one of the links on the dashboard.

   The dashboard will use port 8000 if possible. Services written using ASP.NET Core will have their listening ports assigned randomly if not explicitly configured.

Running multiple applications with tye run

1. Create a backend API that the frontend will call inside of the microservices/ folder.

   dotnet new webapi -n backend
   

2. Create a solution file and add both projects

   dotnet new sln
   dotnet sln add frontend backend
   

   You should have a solution called microservice.sln that references the frontend and backend projects.

3. If you haven't already, stop the existing tye run command using Ctrl + C. Run the tye command line in the folder with the solution.

   tye run
   

   The dashboard should show both the frontend and backend services. You can navigate to both of them through either the dashboard of the url outputted by tye run.

   ⚠️ The backend service in this example was created using the webapi project template and will return an HTTP 404 for its root URL.

Getting the frontend to communicate with the backend

Now that we have two applications running, let's make them communicate. By default, tye enables service discovery by injecting environment variables with a specific naming convention. For more information on, see service discovery.

1. Add a NuGet.config to add the dotnet-core package source.

   Paste the following into nuget.config in the microservice/ directory.

   <?xml version="1.0" encoding="utf-8"?>
   <configuration>
       <packageSources>
           <clear />
           <add key="dotnet-core" value="https://dotnetfeed.blob.core.windows.net/dotnet-core/index.json" />
           <add key="nuget" value="https://api.nuget.org/v3/index.json" />
       </packageSources>
   </configuration>
   

2. Open the solution in your editor of choice.

3. Add a file WeatherForecast.cs to the frontend project.

   using System;
   
   namespace frontend
   {
       public class WeatherForecast
       {
           public DateTime Date { get; set; }
   
           public int TemperatureC { get; set; }
   
           public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
   
           public string Summary { get; set; }
       }
   }
   

   This will match the backend WeatherForecast.cs.

4. Add a file WeatherClient.cs to the frontend project with the following contents:

    using System.Net.Http;
    using System.Text.Json;
    using System.Threading.Tasks;
   
    namespace frontend
    {
        public class WeatherClient
        {
            private readonly JsonSerializerOptions options = new JsonSerializerOptions()
            {
                PropertyNameCaseInsensitive = true,
                PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
            };
   
            private readonly HttpClient client;
   
            public WeatherClient(HttpClient client)
            {
                this.client = client;
            }
   
            public async Task<WeatherForecast[]> GetWeatherAsync()
            {
                var responseMessage = await this.client.GetAsync("/weatherforecast");
                var stream = await responseMessage.Content.ReadAsStreamAsync();
                return await JsonSerializer.DeserializeAsync<WeatherForecast[]>(stream, options);
            }
        }
    }
   

5. Add a reference to the Microsoft.Tye.Extensions.Configuration package to the frontend project

   dotnet add frontend/frontend.csproj package Microsoft.Tye.Extensions.Configuration  --version "0.1.0-*"
   

6. Now register this client in Startup.cs class in ConfigureServices of the frontend project:

   public void ConfigureServices(IServiceCollection services)
   {
       services.AddRazorPages();
   
       services.AddHttpClient<WeatherClient>(client =>
       {
            client.BaseAddress = Configuration.GetServiceUri("backend");
       });
   }
   

   This will wire up the WeatherClient to use the correct URL for the backend service.

7. Add a Forecasts property to the Index page model under Pages\Index.cshtml.cs in the frontend project.

   public WeatherForecast[] Forecasts { get; set; }
   

   Change the OnGet method to take the WeatherClient to call the backend service and store the result in the Forecasts property:

   public async Task OnGet([FromServices]WeatherClient client)
   {
        Forecasts = await client.GetWeatherAsync();
   }
   

8. Change the Index.cshtml razor view to render the Forecasts property in the razor page:

   @page
   @model IndexModel
   @{
        ViewData["Title"] = "Home page";
    }
   
   <div class="text-center">
       <h1 class="display-4">Welcome</h1>
       <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
   </div>
   
   Weather Forecast:
   
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in @Model.Forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
   

9. Run the project with tye run and the frontend service should be able to successfully call the backend service!

   When you visit the frontend service you should see a table of weather data. This data was produced randomly in the backend service. The fact that you're seeing it in a web UI in the frontend means that the services are able to communicate.

Next Steps

Now that you are able to run a multi-project application with tye run, move on to the Frontend Backend Deploy Sample to learn how to deploy this application to Kubernetes.