How to call an API from JavaScript

[hlaueriksson]

I have two projects with .NET Aspire Orchestrator Support:

• api
• htmx

The htmx project is a ASP.NET Core Web App with static HTML.

From the static HTML I want to make a GET request to for example /api/hello via JavaScript (htmx).

How can I make enable the orchestration to the API in the JavaScript?

With Tye I solved this with an ingress.

[davidfowl]

Can you show what you were doing with tye?

[hlaueriksson]

I have a sample solution with HTMX + Minimal API:

• https://github.com/hlaueriksson/Markupolation/tree/main/samples#htmx--api

tye-htmx.yaml:

name: markupolation
services:
- name: markupolation-sample-api
  project: Markupolation.Sample.Api/Markupolation.Sample.Api.csproj
  bindings:
  - port: 5000
    protocol: https
- name: markupolation-sample-htmx
  project: Markupolation.Sample.Htmx/Markupolation.Sample.Htmx.csproj
  bindings:
  - port: 5001
    protocol: https
ingress:
  - name: ingress
    bindings:
      - port: 8080
        protocol: https
    rules:
    - path: /api
      service: markupolation-sample-api
    - service: markupolation-sample-htmx

index.html:

<article class="content px-4">
    <!-- Lazy Loading -->
    <div hx-get="/api/hello" hx-trigger="load"></div>
</article>

• This makes a GET request to the API with htmx

When browsing the site via the ingress, it works like a charm:

• https://localhost:8080/

[DamianEdwards]

You'd need to manually compose your app with a common ingress server (i.e. another ASP.NET Core project that uses YARP) if you want the frontend JS from one app to be able to request the API from another app on a common host name, and then browse to that ingress server's endpoint URL. From the browser's point of view, your app is coded so that all resources are on the same host so you'll need to ensure that's the actual case.

[hlaueriksson]

Thanks!

It's the same approach as David describes here:

• Support for YARP-based reverse proxy to use as ingress #836 (comment)

[hlaueriksson]

I got it to work 🎉

https://github.com/hlaueriksson/Markupolation/tree/main/samples#htmx--api--yarp--aspire

HTMX + Minimal API + YARP + .NET Aspire