How to call my API in XAMPP when this server has an IP different than localhost?

Question

I installed the new XAMPP 7.4 in macOS Catalina and the window is very different than before. I press Mount and it runs. But I have Angularjs projects that calls API Rest Laravel projects in htdocs, but doesn't work because it calls to localhost or to the local IP of the computer, but I don't know how XAMPP works now.

XAMPP creates a new ip where is htdocs and I access to the folder throw the IP but my Angularjs projects can't access because they don't know the IP, only call to 127.0.0.1.

How can I configure XAMPP to work with localhost or how can I configure Angularjs to call to that IP without affect my production server?

Thank you!

Answer 1

Disclaimer: I have not done this before, my answer is based on my angularjs experience and a brief search.

Trying a brand new project

In this article (which you have probably already seen and tried): https://kode-blog.io/angularjs-install-and-configure there is a very relevant segment, namely Step 1: "You can directly create the folder angular-js in drive C:\xampp\htdocs". I understand your issues is just vaguely related, though you could try following this article step-by-step with a brand new project

XAMPP to local/virtual host

If I understood correctly you are looking for a way to modify the XAMPP/AngularJS serving to the same IP. Let's try setting XAMPP to localhost first: Setting up a virtual host on XAMPP on Mac or How to set xampp open localhost:8080 instead of just localhost and also more detailed, step-by-step ones: https://jonathannicol.com/blog/2012/03/11/configuring-virtualhosts-in-xampp-on-mac/

Serving AngularJS to a specific host

AngularJS is a lot less flexible than Angular 2+ (Set default host and port for ng serve in config file) when it comes to serving a host. You could try using http-server and node.js (first answer here: How to create a localhost server to run an AngularJS project but also check out other answers, there is some extra useful info there)

Extra bits

What you are trying seems to be absolutely feasible and done by others (Setup AngularJS and NodeJS on Xampp Web server or https://www.quora.com/Can-we-use-AngularJS-in-XAMPP) but it's not the most common thing.

I know that this answer does not directly give you an easy-to-implement-one-single-line-of-wondercode, but I hope it will start discussion at least and result in something more useful.

Answer 2

To use a Status IP like localhost:8080, you have to go to the Network tab in XAMPP and press Enable on the localhost:8080 option. I feel ashamed for taking too long to find this. Thank you.