The blog post is for people looking to get up and running quickly using cyclejs, a detailed introduction is available on egghead.io.

This series of blog posts will walk you through the steps involved in creating our demo application using rxjs and cyclejs. Let’s setup our development environment quickly. We will be making an app that lists near earth objects from the NASA. Below is a screenshot of how the app will look like when we are done building it

cyclejs demo app screenshot

Setting up the development environment

Prerequisites :

1) A text editor like atom / notepad++

2) NPM installed on your machine.

3) Optional : basic understanding of ES6. I learnt ES6 on a learn-as-you-code model so be warned, my code might not be the prettiest and there might be better ways to write.

Assuming you have the prerequisites setup you need to create a folder somewhere on your computer. This folder will serve as our project root. Open a command prompt at this path and run

npm init

What this does is  creates a package.json file that will help us manage our dependencies with information about our application like the author, name of the app etc.My package.json looks like below. Note that instead of running the init command you can copy and paste the below json file and run npm install which will download all the dependencies and install them in the node_modules folder of your project.

{
  "name": "Cycle Runs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot --inline"
  },
  "author": "Tanmay Dharmaraj",
  "license": "ISC",
  "dependencies": {
    "@cycle/core": "^7.0.0",
    "@cycle/dom": "^12.2.2",
    "@cycle/http": "^11.0.0",
    "@cycle/rxjs-run": "^3.0.3",
    "@cycle/xstream-run": "^3.1.0",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "lodash": "^4.15.0",
    "moment": "^2.14.1",
    "rx": "^4.1.0",
    "rxjs": "^5.0.0-beta.11",
    "webpack": "^1.13.2",
    "xstream": "^6.1.0"
  }
}

Once you have created your package.json file you will now need to create a webpack.config.js file. This file is what will start our dev server locally. The webpack.config.js looks like below

var path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js'
  },
  // assumes all JavaScript files you edit will be in src/
  // when importing from src/<file>.js, only need to specify as <file>
  resolve: {
    root: path.resolve('./src'), // must be absolute path
    extensions: ['', '.js']
  },
  devtool: 'source-map', // source maps to ease debugging
  module: {
    loaders: [
      {
        // pre-process every *.js file (except for ones in
        // node_modules/) with Babel:
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'babel-loader?cacheDirectory&presets[]=es2015'
        ]
      },
    ]
  }
};

Once that is done create a folder named src under the root of your project and we are done with setting up our environment. If you have been able to follow the steps above your folder structure should look like the below screen shot

folder-structure