Missing UI elements when accessing via Vagrant Box - Bad Base HREF URL

[weierophinney]

My issue is similar to #16 except I ran this from the repo's own vagrant box

My repro was

• Install from composer create
• Boot up the vagrant box provided in the skeleton
• vagrant ssh
• enabled development mode
• then ran php -S 0.0.0.0:8080 -t public public/index.php

So on my host machine (outside the vbox),

• Go to http://localhost:9090/
• Get the ApiGility welcome message
• Click on "Get Started"
• Directs me to http://localhost:9090/apigility/ui
• I see an unstyled page with {{ flash.message }} vars around

I do have the rwoverdijk/assetmanager directory in my vendor folder and it works fine.

I encountered a similar situation on my own vagrant box with the same issue. So I tried it with the skeleton's own vagrant box and still encountered the error.

My local enviroment

• Ubuntu Desktop 14.04
• Vagrant 1.6.2
• Virtulabox 4.3.6

Any help would be great

Update: The problem does not appear if I load up the built-in PHP server locally - it only happens when if I access it via Vagrant (the php web server is started from the vagrant instance) If I ran the PHP web server in Vagrant and access it to there, it will give me missing UI issues. But I just ran it locally (without Vagrant), this works fine. It is still an issue because I would like to enable my fellow developers to run Apigility from their vagrant boxes and ensuring everyone is on the same env settings.

---

Originally posted by @mechastorm at https://github.com/zfcampus/zf-apigility-skeleton/issues/64

[weierophinney]

Do you see something like this in your browser? https://cloud.githubusercontent.com/assets/468091/2926926/4f17d9d6-d763-11e3-8a06-6356f34b4497.png

If yes then you most probably use Internet Explorer. Which version is this? Did you try using Chrome?

---

Originally posted by @kaloyan-raev at https://github.com/zfcampus/zf-apigility-skeleton/issues/64#issuecomment-44653325

[weierophinney]

Update: Ok I noticed now the problem does not appear if I load up the built-in PHP server locally. If I ran the PHP web server in Vagrant and access it to there, it will give me missing UI issues. But I just ran it locally (without Vagrant), this works fine. It is still an issue because I would like to enable my fellow developers to run Apigility from their vagrant boxes and ensuring everyone is on the same env settings. I have updated this on the main description as well

@kaloyan-raev I am seeing that screenshot on my Ubuntu Desktop enviroment

• Ubuntu Chrome 31.0.1650.63
• Ubuntu Firefox 29 This was on localhost:9090 which maps to the vagrant box's port 8080

I tried it remotely on a Mac via 192.x.x.x:9090, and I still saw the same issue on

• Mac OS Mavericks - Version 35.0.1916.114

---

Originally posted by @mechastorm at https://github.com/zfcampus/zf-apigility-skeleton/issues/64#issuecomment-44673650

[weierophinney]

Check the source code in the browser. There is a "base" tag somewhere on the top. Check if the URL in the "href" attribute is accessible from the client box (the one running the browser). If not, then the JavaScript and CSS file won't be served correctly to the browser, and hence the nice picture you see.

---

Originally posted by @kaloyan-raev at https://github.com/zfcampus/zf-apigility-skeleton/issues/64#issuecomment-44675934

[weierophinney]

Found the cause! Thanks for the tip @kaloyan-raev . Though I need to find a proper solution to this.

When I checked the source code of the generated site on my browser, the base href was shown as

<base href="http://localhost:9090:8080/zf-apigility-admin/">

Port 8080 is what the built-in php server was activated on, and Port 9090 was that port that was mapped in the VagrantFile to the vbox port 8080.

Modified my Vbox to map port 8080 to port 8080 - this fixes the issue. Not an elegant one, the proper one could be either

• update the skeleton VagrantFile to map guest port 8080 to host 8080 (instead of 9090)
• go through the PHP module and debug what is causing it out put two port numbers on the base href

---

Originally posted by @mechastorm at https://github.com/zfcampus/zf-apigility-skeleton/issues/64#issuecomment-44681655

[weierophinney]

Seconded this:

Modified my Vbox to map port 8080 to port 8080 - this fixes the issue.

The application is generating links that assume that the server is running on port 8080, so either the port forwarded needs to be 8080 or that hardcoding needs to be removed from the app.

---

Originally posted by @Danack at https://github.com/zfcampus/zf-apigility-skeleton/issues/64#issuecomment-58499794