The document discusses CF WebUI, a single page front-end for Cloud Foundry built using Bootstrap, AngularJS, and Nginx. It was developed by ICCLab at Zurich University of Applied Sciences to provide a web interface for interacting with Cloud Foundry. Key challenges in developing CF WebUI included working around the same origin policy limitations of web browsers, which was addressed using CORS or a proxy server. The document also provides information on configuring and deploying CF WebUI, upcoming planned features, and details on how to contribute or get help with the project.

1. Zürcher Fachhochschule
CF WebUI
ICCLab
Zurich University of Applied Sciences

2. Zürcher Fachhochschule
What is CF WebUI
Single web page front-end for Cloud Foundry
Based on Cloud Foundry API
Open Source

3. Zürcher Fachhochschule
How we developed CF WebUI
Bootstrap
AngularJS
Nginx

4. Zürcher Fachhochschule
Challenges
Same Origin Policy
API Features

5. Zürcher Fachhochschule
Same Origin Policy
Problem:
• Same Origin Policy in browser
Two solutions:
• Cross-Origin Resource Sharing (CORS)
• Proxy

6. Zürcher Fachhochschule
Same Origin Policy using CORS

7. Zürcher Fachhochschule
Same Origin Policy using proxy

8. Zürcher Fachhochschule
Proxy Implementations
First version: PHP Proxy
• Based on cURL
• Buildpack: PHP
Second version
• Based on reverse proxy (nginx)
• Buildpack: staticfile-buildpack

9. Zürcher Fachhochschule
Proxy - First Version

10. Zürcher Fachhochschule
Proxy - Second Version

11. Zürcher Fachhochschule
API Endpoint
‘List all apps’
Not showing crashed ones
Alternative solution: compare running instances

12. Zürcher Fachhochschule
API Endpoint

13. Zürcher Fachhochschule
API Endpoint

14. Zürcher Fachhochschule
How to configure CF WebUI - manifest.yml
---
applications:
- name: cf-webui
memory: 64M
host: console-cf-webui-${random-word}
path: ./build
buildpack: https://github.com/cloudfoundry/staticfile-buildpack
env:
API_ENDPOINT: https://api.run.pivotal.io
# Use Google DNS by default
NGINX_RESOLVER: 8.8.8.8
#Enforce https is used (using x_forwarded_proto check). Default: enabled
FORCE_HTTPS: 1

15. Zürcher Fachhochschule
Roadmap
Upcoming Features:
• Show applications logs
• Create/deploy new application
• Update for Cloud Foundry API v3
Update to AngularJS 2

16. Zürcher Fachhochschule
Contribute & Questions
Questions?
Thank you!
https://icclab.github.io/cf-webui/
https://github.com/icclab/cf-webui
https://blog.zhaw.ch/icclab/