Skip to content

Use elm-live to forward OpenStack API calls to CCP

Julian Pistorius requested to merge julianpistorius/exosphere:elmlive-proxy-to-ccp into master

From the commit message:

Since !344 (merged) it is possible to use elm-live to launch a local development server. To make this work with the CCP (Cloud CORS Proxy) we had to instruct the developer to ignore the output of elm-live and use a special hostname (app.exosphere.localhost) instead of localhost when browsing to the development server.

Besides potentially causing confusion it appears that the *.localhost hostname convention does not work universally. For example:

  • One developer using Windows reported having to add an entry in /etc/hosts for app.exosphere.localhost that points to 127.0.0.1
  • DNSCryptProxy (for those that use it) does not resolve the *.localhost hostnames by default, causing a DNS failure, and then requires you to manually change the DNSCryptProxy configuration files to add this exception

Fast-forward: I noticed that elm-live has a built-in reverse proxy. It can forward API calls to an upstream server. This proxy can handle CORS. This means that you do not have to configure CORS on the upstream API server to allow HTTP requests made from the elm-live development server.

This commit:

  1. Changes the default CCP URL in ports.js from https://try-dev.exosphere.app/proxy to /proxy
  2. Modifies the elm-live scripts in package.json to use the elm-live reverse proxy to forward all requests made to the /proxy path on the elm-live server to the development CCP URL at https://try-dev.exosphere.app/proxy
  3. Modifies the elm-live scripts to automatically open the elm-live development server URL (localhost:8000) in the developer's default browser when they run 'npm run live' or 'npm run live-debug'

These changes should result in:

  • A more consistent experience for developers who expect the standard behavior of local development servers like elm-live
  • No manual intervention required on systems which don't conform to the *.localhost convention

How to Test

  • In the root of the project run npm run live in the terminal
  • Ensure that the output of elm-live includes: - Proxying requests starting with /proxy to https://try-dev.exosphere.app/proxy (See screenshot below)
  • Ensure that your default browser opens the Exosphere app running on the elm-live development URL: http://localhost:8000 (See screenshot below)
  • Open the browser developer tools view and keep an eye on the console and network views
  • Add an OpenStack provider to Exosphere (you can skip this step if you already see one or more providers in the app)
  • Use Exosphere to perform OpenStack API calls by viewing/creating/deleting servers and volumes
  • On the network view of the browser developer tools, filter URLs using /proxy string, and ensure that Exosphere makes OpenStack API requests to http://localhost:8000/proxy (See screenshot below)
  • Ensure that you do not see any errors indicating CORS failures in Exosphere ('toasts'), or in the browser developer tools
  • Ensure that the Guacamole web terminal feature works as normal
  • Edit and save an Elm file for a view, and ensure that the elm-live server automatically reloads the Exosphere application and displays the modified view in the browser
  • Kill the server (Ctrl-C), then repeat the above steps starting from the npm run live-debug script instead

Screenshots

exosphere-elm-live-with-proxy

exosphere-proxy-browser-tools

Merge request reports