Installing Cycle.js

We could use Cycle.js by including it in an HTML page using <script></script> tags, but that would not be the best way to use it because Cycle.js is designed in an extremely modular way. Every module tries to be as self-sufficient as possible and including several modules as scripts could easily load tons of duplicated code, causing unnecessary downloads and longer start-up times for our applications.

Instead of using <script></script> tags, we’ll use the Node Package Manager, npm, and Browserify to generate the code for our final scripts.

First, we’ll create a new folder where the project will live and install our project dependencies:

mkdir wikipedia-search && cd wikipedia-search 
npm install browserify
npm install @cycle/core
npm install @cycle/dom

The first npm command installs Browserify, which allows us to write code for the browser as if it were a Node.js application. With Browserify, we can use Node.js’s module loader, which will be smart about what dependencies to include, making the code to download as concise as possible.

Next, we will install cycle-core and cycle-dom, which are the two base modules of Cycle.js. With these base modules in place, we can create a file called index.js where we’ll edit our application. We’ll compile the index.js file into a file called bundle.js using the local Browserify binary:

touch index.js
`npm bin`/browserify index.js --outfile bundle.js

The preceding command will go through our dependency tree and create a bundle.js file that will contain everything we need to run our application, including any dependency we require in our code. We can directly include bundle.js in our index.html file: