Cookie Clicker with RxJS. Part 1: init

Hmm, cookies!!

I want to try RxJS. I like Cookie Clicker. Let’s try to make a basic Cookie Clicker with RxJS!

What’s Cookie clicker? An addictive Javascript game, where you click to create cookies, to buy buildings that generate more cookies. It even has a wikipedia page!

Because personal projects needs to be fun, we’ll use RxJS, Babel, Webpack and Yarn. Yeah 2017!


Git

Of course we use Git, so let’s use the basic

git init

to start a clean project with code versioning.

File organisation

Classic, our code will be in src/, the build will be in dist/

It’s Javascript, so hello npm!

If you’re doing Javascript on different projets, you know for sure nvm or n, which helps you to quickly change node versions. I use nvm, so we’ll go with it.

First step is to choose your node version. Let’s go with the last LTS version, 6.9.1.

echo "6.9.1" > .npmrc
nvm i

I want to install a dependency to install dependencies (because recursion)

I can’t use Yarn at work due to my bad VPN connection and this bug, so we’ll use it on this project! You can totally use npm if you want and skip to the next part.

Global dependencies are bad, so Yarn will be the only one.

npm i -g yarn

ES6 is the norm, but not in browsers

To compile ES6 (modern, nice, shiny) to ES5 (only version supported by the browsers), we’ll install Babel + some plugins :

yarn add --dev babel-core
yarn add --dev babel-loader
yarn add --dev babel-preset-es2015

How to build my app?

Webpack is a nice evolution to Gulp and Grunt, because it allows us to describe tasks relative to the files Webpack will find during its dependency tree traversal.

yarn add --dev webpack

We’ll need some plugins to ease our development

yarn add --dev webpack-dev-server
yarn add --dev html-webpack-plugin

And we need to configure Webpack, so we’ll use this webpack.config.js :

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/app.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "app.bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel', // 'babel-loader' is also a valid name to reference
query: {
presets: ['es2015']
}
}
]
},
plugins: [new HtmlWebpackPlugin()]
};

In the next part, we’ll (finally) start our project!