Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nypublicradio/wqxr-web-client
the ember app for wqxr.org
https://github.com/nypublicradio/wqxr-web-client
ember wqxr
Last synced: 4 days ago
JSON representation
the ember app for wqxr.org
- Host: GitHub
- URL: https://github.com/nypublicradio/wqxr-web-client
- Owner: nypublicradio
- Created: 2017-01-09T14:25:11.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2024-09-16T16:57:29.000Z (3 months ago)
- Last Synced: 2024-09-17T19:05:21.644Z (3 months ago)
- Topics: ember, wqxr
- Language: JavaScript
- Homepage:
- Size: 33.4 MB
- Stars: 0
- Watchers: 20
- Forks: 2
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WQXR Web Client
[](https://circleci.com/gh/nypublicradio/wqxr-web-client/tree/main) [](https://github.com/nypublicradio/wqxr-web-client/releases/latest) [](https://github.com/nypublicradio/wqxr-web-client/pulls) [](https://github.com/nypublicradio/wqxr-web-client/graphs/contributors)
This is a browser-based client for interfacing with the New York Public Radio digital infrastructure. This Ember application renders all of www.wqxr.org using the preexisting Django server as a backend data source, consuming HTML documents and JSON payloads to present a dynamic interface. This gives us the benefits of a persistent in-browser application while still using the existing content and infrastructure.
## Getting Started
This ember app is a **client**, which means its primary purpose is to provide an interface to data source. On its own, this application will not do much without some kind of source from which it can retrieve content to display. To this end, you will need to run a checkout of [`publisher`](https://github.com/nypublicradio/publisher) as a **server**.
`publisher` is a Django app with its own environment and dependencies, but is configured to work in concert with `wqxr-web-client`. In development mode, `publisher` will make requests to `http://localhost:4200/assets/` for Ember assets (see [`puppy/util/ember_config.py`](https://github.com/nypublicradio/publisher/blob/master/puppy/util/ember_config.py)). So you will need to set up a separate checkout of `publisher` to do any substantial development work on `wqxr-web-client`.
Fortunately, `publisher` has its own set of easy-to-follow getting started instructions.
### Prerequisites
You will need the following software properly installed on your computer. Please follow all the directions as written on the websites of these projects and do not neglect to install their dependencies.
* [Git](http://git-scm.com/downloads)
* [Ember CLI](https://ember-cli.com/user-guide/#getting-started) (>= 2.6.0)
* [Grunt](http://gruntjs.com/getting-started)
## Development
As noted above, you must spin up a checkout of [`publisher`](https://github.com/nypublicradio/publisher) at a web address against which this ember app can make requests. By default, the app will use `https://wqxr.demo2.wnyc.net` as its destination.
This value is controlled by a `.env` file you will create by following the directions below.
We use [modernizr](https://modernizr.com/) to detect for certain browser features. Rather than include a full build in the app, there is a single Grunt task included in this project which scans all the `.js` and `.scss` files for mentions of the modernizr API. Step 9 below will generate a modernizr build; do not skip it or you may have mysterious errors.
1. `$ git clone [email protected]:nypublicradio/wqxr-web-client.git && cd wqxr-web-client`
2. `$ git checkout `
3. `$ cp .env.sample .env`
4. Edit `.env` with your `publisher` app location _if_ you don't want to use the _demo_ environment
5. `$ yarn`
6. `$ grunt modernizr:dist`
The `publisher` service is not set up as a strictly data-only API server and will return HTML with embedded script tags that request against the domain root. To resolve this issue, you should run your local server with the proxy command:
```sh
$ ember serve --proxy https://wqxr.demo2.wnyc.net
```
## Related features in the Django app
When we fetch pages from the Django app, we include the `X-WNYC-Ember` HTTP header. This allows Django to suppress certain things (like redundant Javascript libraries) that are unnecessary when the Ember app is managing the client side.
[`module_wrapper.py`](https://github.com/nypublicradio/publisher/blob/master/puppy/util/module_wrapper.py) provides a very slim module system around all the legacy Javascript files. See [`app/services/legacy-loader.js`](https://github.com/nypublicradio/wqxr-web-client/blob/main/app/services/legacy-loader.js) for more detail.
## Additional Documentation
See `docs/prototype-report.html` for the original writeup when this application was created.
## Logging and Debug
### `ember-cli-mirage`
We use [`ember-cli-mirage`](http://www.ember-cli-mirage.com/) to provide mock server output against which to develop. It's turned off by default in dev environments, controlled by the `USE_MIRAGE` envvar in your `.env` file. You can turn it on by setting `USE_MIRAGE` to `true`.
Logging by `ember-cli-mirage` is turned off by default, due to how noisy the console becomes if it's turned on. This setting can be changed in [`mirage/config.js`](https://github.com/nypublicradio/wqxr-web-client/blob/main/mirage/config.js). Look for this line:
```
this.logging = false;
```
Set that to `true` and you'll see a line for all the requests that mirage handles, but be warned: there are many.
### `legacy-loader`
`wqxr-web-client` parses `publisher`'s HTML output for `` and `<link>` tags, which it then loads according to matching and ordering rules found in [`app/services/legacy-loader.js`](https://github.com/nypublicradio/wqxr-web-client/blob/main/app/services/legacy-loader.js). By default it will log when it has decided whether or not to load a legacy script. This setting can be turned off by commenting out the following line in [`config/environment.js`](https://github.com/nypublicradio/wqxr-web-client/blob/main/config/environment.js):
```
ENV.LOG_LEGACY_LOADER = true;
```
#### Metrics Adapters
We use [`ember-metrics`](https://github.com/poteto/ember-metrics) to proxy analytics tracking to two backends, our Data Warehouse and Google Analytics. Debug output for the Data Warehouse adapter can be turned on by adding `debug` to the url's query string. GA debugging is handled using [a chrome extension](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en).
#### Schedule page
FYI - we hid the non WQXR streams from the schedule page with CSS in the _schedule.scss file.