React-router and also the client that we use in the frontend need to be
informed on how to access the Chronograf backend when it's being hosted
on a route other than /. To accomplish this, a data attribute is written
into the `<div>` which serves as our React root. We then make the React
router aware of this if it's set and also pass the prefix to axios (our
front end HTTP client) by way of window.
Originally, it was desired to have the basepath accessible via an API,
but this proved to be impossible because to access that API, the front
end would already need to know the basepath. The technique we went with
was arrived at independently, but is also used by Jupityr notebooks
which encountered the same problem.
The prefixer needs to not only replace `src="` attributes as it
currently does because that is not the only place a relative URL can
appear. It needs to also prefix URLs found in CSS which can also come
from the downstream http.ResponseWriter.
This adds support for an arbitrary list of patterns that will cause the
prefixer to insert its configured prefix. This is currently set to look
for `src`, `href`, and `url()` attributes.
Also, because we are modifying the stream, we need to suppress the
Content-Length generated by any downstream http.Handlers and instead
enable Transfer-Encoding: chunked so that we can stream the modified
response (we don't know apriori how many times we'll perform a
prefixing, so we can't calculate a final Content-Length). This is
accomplished by duplicating the Headers in the wrapResponseWriter that
is handed to the `Next` handler. We also handle the chunking and
Flushing that needs to happen as a result of using chunked transfer
encoding.
In order to support hosting chronograf under an arbitrary path[1], we
need to be able to rewrite all the URLs that are served in HTML and CSS.
Take, for example, the scenario where Chronograf is to be hosted under
`/chronograf` using Caddy and this example Caddyfile:
```
localhost:2020
gzip
proxy /chronograf localhost:8888 {
without /chronograf
}
```
Chronograf will not load properly when visiting
`http://localhost:2020/chronograf` because the requests for CSS, and
fonts will go to `http://localhost:2020/app-somegianthash.js` when they
should go to `http://localhost:2020/chronograf/app-somegianthash.js`.
This is the essence of issue #721.
To solve this, we add a URLPrefixer http.Handler, that acts as a
middleware. It inserts itself between any upstream handlers, and the
handler that was passed to it as its `Next` parameter and searches for
`src="` attributes. Upon discovering one of these attributes, it writes
the detected attribute and then the configured prefix. It then continues
writing the stream to the upstream http.ResponseWriter until
encountering another attribute until EOF.
Alex P
Tim Raymond
Chris Goller
Andrew Watkins
Nathan Haugo
Jade McGough
Hunter Trujillo
Regan Kuchan