How to Resolve localhost Issues in Angular on Raspberry Pi with a .NET Backend

Learn how to access your Angular front-end from a different device while using a .NET backend hosted on a Raspberry Pi. We’ll simplify the process of adjusting your API calls to avoid `localhost` problems.
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Can't load API from localhost from Angular Client with C# Backend hosted on a standalone unit

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Resolve localhost Issues in Angular on Raspberry Pi with a .NET Backend

When developing an Angular application that communicates with a .NET backend, having both components on different devices can sometimes lead to frustrating issues, especially when trying to access them over a network. One common problem developers face is the inability to load the backend API when accessing the application from different machines. In this guide, we'll explore a specific scenario: accessing an Angular client (v14) with a .NET 6 WebAPI hosted on a Raspberry Pi, and how to solve the localhost resolution issue.

The Problem at Hand

In the setup described, the Angular application and .NET WebAPI are running on a Raspberry Pi, configured to function as a standalone kiosk. When accessing the Angular app from another PC on the same network, users encounter an issue where the application cannot resolve localhost for the backend API. Instead, it attempts to ping the localhost of the PC and not the Raspberry Pi where the actual backend resides.

This issue not only affects local access but also complicates remote API calls, preventing functionalities like those that might be tested through Postman or other applications.

Why the Issue Occurs

The core problem lies in the way the Angular application references its backend API URL. The default setting often points to localhost, which is unique to each machine. When a request is made from the frontend, the browser looks up the API on the requesting machine (the one running the browser), failing to connect to the backend on the Raspberry Pi.

Common Causes:

Static Localhost References: The application is hardcoded or incorrectly configured to rely on localhost, which leads to confusion between different devices on the network.

Network Accessibility: The application must properly set up and enable network routes and proxies to communicate effectively.

A Step-by-Step Solution to Fix the Issue

1. Update API URL in Angular Configuration

Instead of pointing to localhost, configure the front-end to use the current IP address dynamically. Here’s how to manage that:

[[See Video to Reveal this Text or Code Snippet]]

2. Implement Relative Paths in API Calls

One of the simplest and most effective solutions is to use relative paths in your API calls. This way, regardless of where your application is accessed, it will direct to the same server that serves your front-end. Change your API call from:

[[See Video to Reveal this Text or Code Snippet]]

To:

[[See Video to Reveal this Text or Code Snippet]]

3. Proxy Configuration

[[See Video to Reveal this Text or Code Snippet]]

Replace <raspberry-pi-ip> with the actual IP of your Raspberry Pi.

4. Setting Up Nginx

Make sure your Nginx configuration file correctly directs traffic to the Angular application and backend API. The current setup uses proxy_pass effectively but updating references to use dynamic IP through your local configurations would streamline this process.

5. Testing Your Changes

After making the changes, you can start your Angular app and ensure that it is using the proxy. Deploy using the script that references the proxy configuration:

[[See Video to Reveal this Text or Code S