cycle.http.js

///////////
// main.js
///////////
import Rx       from 'rx';
import {h}    from '@cycle/dom';

const main = (sources) => {

  const HELLO_URL = 'https://something/api/v2/or-other/26';
  const request$  = Rx.Observable.just(HELLO_URL);
  const event$    = sources.HTTP
                           .filter(res$ => res$.request === HELLO_URL)
                           .mergeAll()
                           .map(res => res.text) // We expect this to be "Hello World"
                           .startWith('Loading...')
                           .map(text =>
                             h('div.container', [
                               h('h1', text)
                             ])
                           );

  return {
    DOM:  event$,
    HTTP: request$
  };
};

export default main;


///////
// app.js
///////

import Cycle                from '@cycle/core';
import {makeDOMDriver}      from '@cycle/dom';
import {makeHTTPDriver}     from '@cycle/http';
import Rx                   from 'rx';
import Main                 from './main';

// creating our mainApp from /.main
function mainApp(sources) {
  const sinks = Main(sources);
  return sinks;
}

$(document).ready(() => {
  const sources = {
    DOM:  makeDOMDriver('#consumer_web_container'),
    HTTP: makeHTTPDriver()
  };

  Cycle.run(mainApp, sources);
});