
https://github.com/Xaviergeerinck/MERGE-Stack

Since the rise of new client-side frameworks such as Angular, React and many others. A lot of code gets written and executed on the client-side. Resulting in a decreased performance, bad SEO, increased bandwidth and many other issues. On the contrary side, client-side applications also have stronger points such as an improved UX flow, faster transitions and others. The question that we have to ask ourselves here, is how we are able to keep the advantages, and eliminate the disadvantages. Resulting in the rise of Universal Javascript applications and the creation of the MERGE Stack.

These Universal Javascript applications 1 combine the power of Server Side and Client Side rendering to create applications that can run in servers, browsers and mobile devices. To improve SEO, initial load performance and many others.

The MERGE stack now offers a set of languages, tools and frameworks that allow the developer to get started with developing Universal Javascript applications in a short period of time, without the need of researching the best tools to use and combine.

It exists out of cutting edge technology such as MySQL, Express, React and GraphQL. Allowing for applications to be written in a modular way, and keeping the bandwidth requirements as optimal as possible.

## Stack

* MySQL: Database engine used to store our data, this can easily be interchanged with any other relational database engine such as Postgres, MSSQL, Oracle SQL, ...
* Express: Web application framework used to route GraphQL requests and apply authorization
* React: A Javascript library for building user interfaces
* GraphQL: A query language for your API, decreasing the bandwidth utilized and replacing REST calls
* Next.js: A framework that implements Server Side rendering
* Apollo Client: A easy to use client to connect the UI to our GraphQL server.

## Installation

The setup of the MERGE stack can be done manually through the cloning of the components listed above. It is however more trivial to create a clone of this repository and work from there. Once this repository is cloned, the client and the server can both be installed and configured as listed below.

> Note: Make sure that enough memory is available for the build process of the client (1Gb recommended). You can also use swap through the following commands

```bash
sudo fallocate -l 1G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
sudo cp /etc/fstab /etc/fstab.bak
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab
```

### Client

```bash
cd client/
npm install # or yarn
npm run dev # or yarn run dev
```

### Server

```bash
cd server/
npm install # or yarn
npm install -g sequelize-cli # Installation of the Database Manager
npm install mysql # Install the MySQL connector, or see http://docs.sequelizejs.com/en/v3/docs/getting-started/ for more)
sequelize db:migrate # Create the initial database schema, to adapt these configs, see: server/config/config.js
npm run dev # or yarn run dev
```

## Feature Solutions

### Authentication

Authentication in Universal Javascript applications can be a complex implementation, due to the use of both Server Side rendering and Client Side rendering. Because of this, we need to authenticate the user on the server on the first request, and also on the client.

To accomplish this, we are able to authenticate the user through a token based system, and store this token in a cookie. Once this is done, we are then able to forward this cookie to the server side, which is able to read and process the authentication.

For the client side, we can just read this token, and add it as a `Authorization: Bearer <token>` header, as described in the OAuth 2 token flow (https://tools.ietf.org/html/rfc6749#section-4.1).

The server can now lookup this token and add the user to the request for easy usage.

> Note that the choice was made to process the user in a middleware layer, to make this user easily available in the further layers of our application.


The MERGE Stack


## 1. Introduction

So in part 1 of this tutorial series we learned how the components work and how we can port our design over to this component based design. In part 2 we then went ahead and created our initial bootstrap for our application so that we are able to start working. Part 3 will be about creating our TODOList app as it is shown in the design. We will completely convert the design to the components and will be able to perform the actions such as checking items.

Please note that all the actions will be statically in this part and we will not be able to save it to a database yet. This part will be handled in part 4 (creating the API) and 5 (Creating the React.JS actions).

# 2. The components

As explained before we have the following components that we will have to create:

* **TodoList Page:** This is our page where we will put in the todolist component.
* **TodoList Component:** This is the component that we will be able to integrate into our page.
* **TodoListAdd:** The input box to add new todo items
* **TodoList:** The list of items
* **TodoListItem:** An item itself

We have already wrote the initial files for the TodoListPage component, which is why we will continue with the others before completing this one. This is because this component relies on the other components to be completed.

## 3. TodoList Component

Let's now start on the TodoList Component, for this create a folder in the `src/components/elements` folder called **TodoList**. This folder will then have the same bootstrap files as the TodoListPage folder: `TodoList.js`, `TodoList.css`, `package.json`. But we will also create extra files to accommodate the other features. Now also add `TodoListAdd.js`, `TodoListItems.js` and `TodoListItem.js`.

The TodoList folder will now look like this:

```bash
- src/components/elements/TodoList/
  - TodoList.css
  - TodoList.js
  - TodoListAdd.js
  - TodoListItems.js
  - TodoListItem.js
  - package.json
```

### 3.1. Writing the TodoList.js part

We are finally at the part of writing a component, it has been a long way but now the real work starts. Writing the component. Let us first start by defining the structure of the TodoList.js part. It will exist out of the Add box and the Overview box. So, add 2 elements `<TodoListAdd />` and `<TodoListItems />` which will show our items. Your class will look like this then:

```js
import React, { PropTypes } from 'react';
import TodoListAdd from './TodoListAdd';
import TodoListItems from './TodoListItems';

class TodoList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="TodoList">
        <TodoListAdd />
        <TodoListItems />
      </div>
    );
  }
}

export default TodoList;
```

### 3.2. Back to our TodoListPage

Now create the bootstrap files for the `TodoListAdd.js` and the `TodoListItems.js` files. This will allow us to add the TodoList component to our TodoListPage file. When you did this, add the TodoList Component to your Page by adding `<TodoList />` in it's render function. (Do not forget to include it.)

If you did everything right, when you reload the page it will show a blank page and no errors have happened in the console. If you encounter an error here, go back and see if you did not forget anything. Else check the repository.

## 3.3. Finishing the TodoListAdd part

The add function will allow us to insert a TodoItem by entering it's info into a textbox and clicking on the add button. We will also do this, so add a `<input type="text" ref="input_todo" />` and a `<input type="submit" />` element in the render function of the TodoListAdd part.

You will get this:

```js
<div className="TodoListAdd">
  <form onSubmit={this._handleOnSubmit.bind(this)}>
    <input type="text" ref="input_todo" />
    <input type="submit" />
  </form>
</div>
```

Note that I have already went ahead and created the event handler, it will call a local function `_handleOnSubmit` when a user submits the form. This function is here:

```js
_handleOnSubmit() {
  var input = this.refs.input_todo.getDOMNode().value;
  console.log(input);
}
```

for now it will just output our value that we have entered in the console.

> We are able to get the value of the textbox by placing a **ref** attribute on the HTML input element. Because of this we can now check `this.refs.input_todo` which contains this element. By calling `getDOMNode()` we can then ask react to get the raw HTML element and then get the value of it.

We are still not finished, the last part that we have to do is to give back this value to the parent component, this is needed since we do not allow TodoListAdd to have a state. The state of this TodoListComponent is managed through the root component, which is TodoList.

Therefor we will pass a function which will act as a sort of callback function to the root component. Adding this is really easy, we can add a property (which we will call handleOnSubmit) and call `this.props.handleOnSubmit` instead of the console.log.

To make sure that we allow this, we can add a `<MODULE>.propTypes = { }` and define our just explained function.

The resulting class looks like this:

```js
import React, { PropTypes } from 'react';

class TodoListAdd extends React.Component {
  constructor(props) {
    super(props);
  }

  _handleOnSubmit() {
    var input = this.refs.input_todo.getDOMNode().value;

    console.log(this.props);
    this.props.handleOnSubmit(input);
  }

  render() {
    return (
      <div className="TodoListAdd">
        <form onSubmit={this._handleOnSubmit.bind(this)}>
          <input type="text" ref="input_todo" />
          <input type="submit" />
        </form>
      </div>
    );
  }
}

TodoListAdd.propTypes = {
  handleOnSubmit: PropTypes.function
}

TodoListAdd.defaultProps = {
  handleOnSubmit: function () {}
}

export default TodoListAdd;
```

The code for adding the item is done, we will now go on to displaying the items. Do not worry about the items being inserted into our TodoList component state yet, this will happen on the end.

### 3.4. Finishing the TodoListItems part

Showing the TodoListItems is easy, we just check the items that were passed through an attribute and render those. The rendered items are then in turn TodoListItem components which will call the render function in the TodoListItem.js file.

#### TodoListItems.js

```js
import React, { PropTypes } from 'react';
import TodoListItem from './TodoListItem';

class TodoListItems extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { items } = this.props;

    return (
      <div className="TodoListItems">
        {
          items.map(i => {
            return <TodoListItem item={i} />
          })
        }
      </div>
    );
  }
}

TodoListItems.propTypes = {
  items: PropTypes.array
}

TodoListItems.defaultProps = {
  items: []
}

export default TodoListItems;
```

#### TodoListItem.js

```js
import React, { PropTypes } from 'react';

class TodoListItem extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { item } = this.props;

    return (
      <div className="TodoListItem">
        {item}
      </div>
    );
  }
}

TodoListItem.propTypes = {
  item: PropTypes.string
}

TodoListItem.defaultProps = {
  item: ""
}

export default TodoListItem;
```

### 3.5. Quickly testing what we have

For a quick test of what we have now works, just change the content of your `TodoList.js` file to this:

```js
import React, { PropTypes } from 'react';
import TodoListAdd from './TodoListAdd';
import TodoListItems from './TodoListItems';

class TodoList extends React.Component {
  constructor(props) {
    super(props);
  }

  _handleAddSubmit(value) {
    console.log('Received item: ' + value);
  }

  render() {
    const items = [ "test1", "test2", "test3", "test4" ];
    return (
      <div className="TodoList">
        <TodoListAdd handleOnSubmit={this._handleAddSubmit.bind(this)}/>
        <TodoListItems items={items} />
      </div>
    );
  }
}

export default TodoList;
```

When we load the page now, we will see our items being added and when we add an item there will happen a console.log showing the added item it's value.

Of course this is not yet how we want it! We still need to define a state which will hold our items so we can perform actions on it such as adding and removing items for this component.

### 3.6. Finishing the TodoList Component

Let us finish this adding now. For that to happen, we will first have to convert our TodoList to work with states. So replace the content with this:

```js
import React, { PropTypes } from 'react';
import update from 'react/lib/update';
import TodoListAdd from './TodoListAdd';
import TodoListItems from './TodoListItems';

class TodoList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [ ]
    }
  }

  _handleAddSubmit(value) {
    var self = this;

    self.setState({
      items: update(self.state.items, {
        $push: [ value ]
      })
    });
  }

  render() {
    const { items } = this.state;

    return (
      <div className="TodoList">
        <TodoListAdd handleOnSubmit={this._handleAddSubmit.bind(this)}/>
        <TodoListItems items={items} />
      </div>
    );
  }
}

export default TodoList;
```

As you can see we changed the constructor. This one now has a state and will be able to hold our items. We also changed our render method to use the state variable and render the items from it. The last thing that we changed is the handler for the item submission, here we will set the state but we will use the update library of react to be able to use $push, which allows us to add items to an existing array.

Let's now change the rendering of the TodoItem part so that we are able to remove them and set them marked one by one.

### 3.7. Finishing the TodoItem

What we will do for the TodoItem, is add a checkbox and a removal button and bind 2 handlers. These handlers will then be pushed towards the parent component (TodoItems) which in it's turn will push a change event towards it's parent (the TodoList). We will also change the way items work by creating objects with { isChecked, value } as the keys. This way we can check the items that have been checked.

Now our **TodoItem.js** files becomes this:

#### TodoItem.js

```js
import React, { PropTypes } from 'react';

class TodoListItem extends React.Component {
  constructor(props) {
    super(props);
  }

  _handleCheckItem(e) {
    e.preventDefault();

    this.props.onCheckItem(this.props.item);
  }

  _handleRemoveItem(e) {
    e.preventDefault();

    this.props.onRemoveItem(this.props.item);
  }

  render() {
    const { item } = this.props;


    return (
      <div className="TodoListItem">
        <div className="TodoListItem-Check">
          <input type="checkbox" ref="is_checked" checked={item.isChecked} onChange={this._handleCheckItem.bind(this)}/>
        </div>
        <span>{item.value}</span>
        <button onClick={this._handleRemoveItem.bind(this)}><i className="fa fa-remove"></i></button>
      </div>
    );
  }
}

TodoListItem.propTypes = {
  item: PropTypes.string,
  onRemoveItem: PropTypes.function,
  onCheckItem: PropTypes.function
}

TodoListItem.defaultProps = {
  item: ""
}

export default TodoListItem;
```

#### TodoListItems.js

```js
import React, { PropTypes } from 'react';
import TodoListItem from './TodoListItem';

class TodoListItems extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { items, onRemoveItem, onCheckItem } = this.props;
    var self = this;

    return (
      <div className="TodoListItems">
        {
          items.map(i => {
            return <TodoListItem item={i} key={i.key} onRemoveItem={onRemoveItem} onCheckItem={onCheckItem} />
          })
        }
      </div>
    );
  }
}

TodoListItems.propTypes = {
  items: PropTypes.array,
  onRemoveItem: PropTypes.function,
  onCheckItem: PropTypes.function
}

TodoListItems.defaultProps = {
  items: []
}

export default TodoListItems;
```

and **TodoList.js**

```js
import React, { PropTypes } from 'react';
import update from 'react/lib/update';
import TodoListAdd from './TodoListAdd';
import TodoListItems from './TodoListItems';
import './TodoList.css';

class TodoList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
      id_counter: 0
    }
  }

  _handleAddSubmit(value) {
    var self = this;

    self.setState({
      items: update(self.state.items, {
        $push: [{
          id: self.state.id_counter,
          isChecked: false,
          value: value,

          // Set initial key based on the id and the check state
          key: "key_" + self.state.id_counter + "_" + false
        }]
      }),
      id_counter: self.state.id_counter + 1
    });
  }

  _onRemoveItem(item) {
    var self = this;

    self.setState({
      items: self.state.items.filter(i => {
        return i.id !== item.id
      })
    });
  }

  _onCheckItem(item) {
    var self = this;
    self.setState({
      items: self.state.items.map(i => {
        if (item.id === i.id) {
          i.isChecked = !item.isChecked;

          // Change key since it has been checked!
          i.key = "key_" + i.id + "_" + i.isChecked;
        }

        return i;
      })
    });
  }

  render() {
    const { items } = this.state;

    return (
      <div className="TodoList">
        <TodoListAdd handleOnSubmit={this._handleAddSubmit.bind(this)}/>
        <TodoListItems items={items} onRemoveItem={this._onRemoveItem.bind(this)} onCheckItem={this._onCheckItem.bind(this)}/>
      </div>
    );
  }
}

export default TodoList;
```

> Note the key property? This is really important in react, react will update the components based on if the key has been changed or not. So to trigger an update to this key object we have to provide a different key. The key is created based on the id of the item and the checkstate here.

## 4. Adding some CSS

So we are completely finished with the interaction part, now all that is left to do is to add some css code to make it better on the eye

```css
.TODOList {
  width: 400px;
  margin: 0 auto;
}

.TODOList h1 {
  font-size: 16px;
}

.TodoListAdd {
  border: 1px solid #d9d9d9;
}

.TodoListAdd input {
  background-color: #f5f5f5;
  border: none;
  width: calc(100% - 40px);
  box-sizing: border-box;
  height: 30px;
}

.TodoListAdd input[type='submit'] {
  width: 40px;
  border-left: 1px solid #d9d9d9;
}

.TodoListAdd input[type='text'] {
  padding: 7px 10px;
}

.TodoListItems {
  margin-top: 20px;
}

.TodoListItem {
  box-sizing: border-box;
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-bottom: none;
  height: 30px;
}

.TodoListItem:last-child {
  border-bottom: 1px solid #d9d9d9;
}

.TodoListItem button {
  height: 100%;
  float: right;
  border: none;
  padding: 0;
  margin: 0;
  width: 40px;
  border-left: 1px solid #d9d9d9;
  background-color: transparent;
}

.TodoListItem span {
  height: 100%;
  float: left;
  line-height: 30px;
  font-size: 12px;
  padding-left: 6px;
}

.TodoListItem .TodoListItem-Check {
  height: 100%;
  border-right: 1px solid #d9d9d9;
  margin-left: 5px;
  margin-right: 5px;
  width: 20px;
  float: left;
  line-height: 30px;
}

.clear {
  clear: both;
}
```

## 5. Finalize

The application is now complete and we are able to use the module, however in a real world application we need to save the state to a database when we perform an action. This will be covered in parts 4 and 5 where we will write the backend and add interaction with the backend to the react.js application.

Todo Application Tutorial React JS - Splitting it up (part 3)


## 1. Introduction

So in part 1 of this tutorial series we explained why you should use React.JS and how it works, in this part we will set up the development environment and start creating our TODOList components that we have split up in the previous article.

## 2. Development Environment - Webpack

An easy way to get started in a few minutes is by installing webpack. This is pretty straightforward once you have done the initial configuration.

Start by creating a file called `webpack.config.js` in your root folder and paste the following content into it:

```js
var path = require('path');
var webpack = require('webpack');
var node_modules_dir = path.resolve(__dirname, 'node_modules');

const AUTOPREFIXER_BROWSERS = [
  'Android 2.3',
  'Android >= 4',
  'Chrome >= 20',
  'Firefox >= 24',
  'Explorer >= 8',
  'iOS >= 6',
  'Opera >= 12',
  'Safari >= 6'
];

var config = {
  entry: {
    app: ['webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080', path.resolve('src/index.js')],
  },
  output: {
    path: process.env.NODE_ENV === 'production' ? path.resolve(__dirname, 'dist') : path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    noParse: [],
    loaders: [{
        test: /.jsx?$/,
        exclude: [node_modules_dir],
        loaders: ['react-hot', 'babel']
      },
      {
        test: /.html$/,
        loader: 'file?name=[name].[ext]'
      },
      {
        test: /.css$/,
        exclude: [node_modules_dir],
        loader: 'style-loader!css-loader!cssnext-loader'
      },
      {
        test: /.txt/,
        loader: 'file-loader?name=[path][name].[ext]'
      },
      {
        test: /.gif/,
        loader: 'url-loader?limit=10000&mimetype=image/gif'
      },
      {
        test: /.jpg/,
        loader: 'url-loader?limit=10000&mimetype=image/jpg'
      },
      {
        test: /.png/,
        loader: 'url-loader?limit=10000&mimetype=image/png'
      },
      {
        test: /.svg/,
        loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
      },
      {
        test: /.eot/,
        loader: 'url-loader?limit=100000&mimetype=application/vnd.ms-fontobject'
      },
      {
        test: /.woff2/,
        loader: 'url-loader?limit=100000&mimetype=application/font-woff2'
      },
      {
        test: /.woff/,
        loader: 'url-loader?limit=100000&mimetype=application/font-woff'
      },
      {
        test: /.ttf/,
        loader: 'url-loader?limit=100000&mimetype=application/font-ttf'
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {}
  },
  cssnext: {},
  postcss: [
    require('postcss-nested')(),
    require('cssnext')(),
    require('autoprefixer-core')(AUTOPREFIXER_BROWSERS)
  ],
  plugins: [
    new webpack.DefinePlugin({
      "global.GENTLY": false
    })
  ],
  node: {
    __dirname: true
  }
};

module.exports = config;
```

If we analyze this file then we can see that we will transform our Javascript with babel and the react hot loader (which allows hot reloading), and transform our css using cssnext so that we will be able to use next-gen css features such as var().

The last file we will need to define before we will be able to start our environment is the **package.json** file.

```json
{
  "name": "tutorial_react_flux_hapi",
  "version": "0.0.0",
  "private": true,
  "main": "./src/index.js",
  "devDependencies": {
    "autoprefixer-core": "^6.0.0",
    "babel-core": "^5.8.23",
    "babel-loader": "^5.3.2",
    "css-loader": "^0.17.0",
    "cssnext": "^1.8.4",
    "cssnext-loader": "^1.0.1",
    "file-loader": "^0.8.4",
    "font-awesome": "^4.4.0",
    "jsx-loader": "^0.13.2",
    "normalize.css": "^3.0.3",
    "postcss": "^5.0.4",
    "postcss-loader": "^0.6.0",
    "postcss-nested": "^1.0.0",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.1",
    "webpack-dev-server": "^1.10.1"
  },
  "scripts": {
    "dev": "",
    "start": "webpack-dev-server --devtool eval --progress --colors --content-base build --hot --inline",
    "deploy": "NODE_ENV=production webpack -p"
  },
  "dependencies": {
    "babel-eslint": "^4.0.5",
    "babel-runtime": "^5.8.20",
    "bootstrap": "^3.3.5",
    "eslint": "^1.1.0",
    "eslint-plugin-react": "^3.2.2",
    "flux": "^2.0.3",
    "history": "^1.9.1",
    "react": "^0.13.3",
    "react-bootstrap": "^0.24.5",
    "react-mixin": "^1.7.0",
    "react-router": "^1.0.0-rc1",
    "superagent": "^1.4.0"
  }
}
```

This file will install the dependencies and will also define our startup script for our environment.

Now let's start the environment, first run `npm install` to install the dependencies and then you start the environment itself by running `npm start`, which will call the webpack file with some startup parameters (see package.json for this definition).

You will now see that it starts the environment but with some error at the end stating that we are missing our *index.js* file. This is normal since we have not written any code yet so just ignore this for now. The environment itself is now available on `localhost:8080`.

## 3. Writing the initial React.js files

The development environment is working, so we can finally start coding! When working with react it is important to first fill in the content for the `src/index.js`, `src/index.html` and `src/routes.js` since these will be our main entry points.

* `index.js`: Will be the main entry point for the package.json, this starts react or in our case intialises the router.
* `index.html`: This file is our html file that will get loaded when we load `localhost:8080`, it will contain the hot reloader script and the javascript compiled bundle.
* `routes.js`: Here are our routes that will be used, only the / route will be used seeing that this is a 1 page app. I however included this so that your app is able to grow.

### index.js

```js
import React from 'react';
import routes from './routes';

// Install the routes
React.render(routes, document.body);
```

### index.html

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles/main.css">
</head>

<body>
  <script src="http://localhost:8080/webpack-dev-server.js"></script>
  <script type="text/javascript" src="bundle.js"></script>
</body>

</html>
```

### routes.js

```js
import React from 'react/addons';
import { Router, Route, IndexRoute  } from 'react-router';
import App from './components/App';
import TODOListPage from './components/pages/TODOList';

var routes = (
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={TODOListPage} />
    </Route>
  </Router>
);

export default routes;
```

## 4. Creating our Application component

The application is the mother of our components, it will load the page that we are trying to load and that was defined in the routes file. We can also use it to set the authentication state of a user if we got a login functionality.

To create this component, go to the App folder in src/components/App and create the 3 files that make a component (App.css, App.js, package.json).

Fill these in with the following content:

### package.json

```json
{
  "name": "App",
  "private": true,
  "version": "0.0.0",
  "main": "./App.js"
}
```

### App.js

```js
import React, { PropTypes } from 'react';
import Router from 'react-router';
import './App.css';
var RouteHandler = Router.RouteHandler;

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div id="app" className="App-Container">
        {this.props.children}
      </div>
    );
  }
}

App.defaultProps = {

};

App.propTypes = {

};

export default App;
```

### App.css (EMPTY)

## 5. Testing the bootstrap

We start by creating our page, this way we are at least able to access our webpage. To do this, bootstrap a TODOList component in the `src/components/pages` folder. Now we will fill in the render function, here just return a new div element with as class the TODOListPage name.

For now we can put a HELLO WORLD string into the component so that we are able to test if it is all working nicely just as we want to. For that make your TODOListPage component look like this:

```js
import React, { PropTypes } from 'react';

class TODOList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="TODOList">
        HELLO WORLD
      </div>
    )
  }
}

export default TODOList;
```

When we now run `npm start` and navigate to `http://localhost:8080`, we will be presented with a nice HELLO WORLD body. Congratulations, we now got the initial bootstrap ready and we are able to start writing our TODOList components.

The part of writing the other TODOList components will be tackled in part 3.


Todo Application Tutorial React JS - Splitting it up (part 2)


## 1. Introduction

This post is part of a three part series that I am writing about how you can create a well designed and structured React.JS application. In part 1 we will delve into the basics of React.JS and how we can convert your application idea into a working React.JS component. After that we will create a small piece of backend code in Hapi that will interact with a easy to use disk adapter for simplicity (part 2) and last but not least we will then create the interaction between our component and API by using the flux architecture. So let's get started.

## 2. How components work

The vision of React is to enable us to re-use code quickly by splitting it up in components. Components are small pieces of code that are bundled in one little package. These components then have a state that contains the information about that specific component. Think for example of an input box, it's state would be the value that you put in it it's properties would be the name, placeholder, type, ...

Every component is then able to perform actions (onClick, onChange, ...) which we can define through properties. I try to keep the idea of letting the components define actions through properties and my pages through stores. That way we got a state for a page but make sure that we can re-use the components.

> It is also a good practice to bundle your css of a specific component into that component folder. This will make it possible to really drag and drop components as you go. Be careful though and keep a good naming convention since else you will end up overwriting other components. A nice practice that I follow is to name your className the name of your component and add dashes to give it more information.

By converting all our code into components we achieve multiple goals

1. Maximum reusability; we can just drag and drop and re-use components (if they are written correctly)
2. Better security; by recreating existing html components (for example input) we can prevent security issues from happening (think of xss).
3. Fast POC building; when you have a library, you can just drag and drop existing components, apply a new style and you got a POC in a few hours instead of days.
4. Complex forms are easy; ever tried to make a page with 20 input fields in Angular, plain HTML? Then you know forms are a pain! React makes this as easy as possible and we can even add validation and others by bundling it all in a single component.
5. Need updates to your application when something changes? React got you covered, by using a store and state change listeners we are able to update just the components that are needed. No need to refresh the complete page.

These advantages are in my personal opinion the future of the web. No need to juggle around bad code to prevent XSS injection attacks, easy forms and most import re-usability is what we need!

## 3. The application that we will be creating

Now let's get started building an application. For this tutorial I am going to write the "Hello World" of a web application. A todo list. Todo Lists seem simple but cover a lot of important aspects:

* CRUD Operations (Create, Read, Update and Delete)
* Dynamic flows; We see the component being added in real time allowing for a beautiful flow.
* Forms
* Some CSS of course

**Example of what we will be creating:**

![http://xaviergeerinck.com/wp-content/uploads/2015/09/TodoList-e1442575859548.png](http://xaviergeerinck.com/wp-content/uploads/2015/09/TodoList-e1442575859548.png)

## 4. Splitting it up

The most important task of React is to split up our component so we can re-use it. This is not always that easy, you have to keep in mind that the state of the component can change. But that your "page" it's store also should get updated. In case of the todo app we will take this picture as our break up:

![http://xaviergeerinck.com/wp-content/uploads/2015/09/TodoList-Marked.png](http://xaviergeerinck.com/wp-content/uploads/2015/09/TodoList-Marked.png)

Here we see a couple of components:

* **TodoList Page:** This is our page where we will put in the todolist component.
* **TodoList Component:** This is the component that we will be able to integrate into our page.
* **TodoListAdd:** The input box to add new todo items
* **TodoList:** The list of items
* **TodoListItem:** An item itself

Now we got the different components to create. Important to do now is to imagine how you would fit it in your application, are you able to incorporate it? Are you able to give it starting items? How would your page work with it? All those questions will convert into our next step, where we will define the folder structure.

## 5. Component folder structure

Every component has a folder structure, I always create 3 different files to be able to manage all the cases needed for the different components.

So to bootstrap these folders create the following files if the module is called `<MODULE>`:

* `<MODULE>.css`: The stylesheet for our component, You define all your styles for that specific component here. Please stick to clear code rules and always start your class names with `<MODULE>` for consistency and to never repeat your classnames in other files.
* `<MODULE>.js`: This is the main file, here we will define the component and how it works.
* `package.json`: The package.json is included here but set private, this is so that we are able to require the component without having to require the specific file.

Resulting in the following structure:

```bash
- <MODULE>/
    - <MODULE>.css
    - <MODULE>.js
    - package.json
```

### \<MODULE\>.js example content

```js
import React, { PropTypes } from 'react';
import './<MODULE>.css';

class <MODULE> extends React.Component {
  constructor(props) {
    super(props);
  }

    render() {
        return (
            <div className="<MODULE>">
            </div>
        );
    }
}

export default <MODULE>;
```

### \<MODULE\>.css example content

```css
@import '../variables.css';

.<MODULE>-Active {

}
```

### package.json example content

```bash
{
  "name": "<MODULE>",
  "private": true,
  "version": "0.0.0",
  "main": "./<MODULE>.js"
}
```

## 6. The folder structure

Creating the folder structure is the backbone of our application, it should be dynamic to grow over time, but not to dynamic so that we can actually understand it. While creating a private project for myself I found out over time that the following directory structure is a basic one where I can work with.
Keep in mind that there might be several things that you will not understand yet. Do not worry, these things will all be explained in the following parts. We just define the folder structure here to be able to have the architecture set up already.

> Please note that this folder structure is purely personally, you can change this to your likings but I myself found it to be working well.

### Folder structure

```bash
- src/
    - actions/            # Actions will be called by components and they will
                          # adapt a store, everything
                          # that ends on Server received a response from the server
    - components/         # Contains the components of our application (Includes pages!)
        - App/            # Main component, available on every page!
        - elements/       # consists out of all the different elements 
                          # (drag and drop elements).
                          # Try to keep these storeless so that we can reuse them!
        - layouts/        # Different page layouts, example: Frontpage, Dashboard, 
                          # Settings, ...
        - pages/          # Collection of elements bundled together to form a page 
                          # (Settings, Team, ...)
        - variables.css   # Contains CSS variables such as colours
    - constants/          # Contains the constants such as the actionTypes
    - dispatchers/        # Dispatchers, we make a difference between Server and 
                          # View actions, more about this later
    - stores/             # The stores contain the state of a page as a whole,
                          # a nice example is a AuthStore, this will contain the details 
                          # about a user and it's logged in state
    - utils/              # Contains API files, Example: AuthAPIUtils, makes API calls
    - index.js            # Entry point for our app
    - routes.js           # The routes for our app, we use react-router for this
    - index.html
- .babelrc                # babel config, set on level 1
- .gitignore              # files not to be pushed to git
- package.json            # dependencies
- README.md
- webpack.config.js       # workflow configuration for fast development
```

## 7. End Note

Now that we have the folder structure we got the basic building blocks and architecture to start building our react app. The actual building of this app will be done in part 2 of this tutorial series. There we will create the code for the components and get it to load our page. After that part we will then create an API and interact with that API through the actions.


Todo Application Tutorial React JS - Splitting it up (part 1)



September last year was one of the most influential times of my life. Being a newly graduated student at the Karel De Grote College in Antwerp I had several choices. Start a company from the project that I had been building, continue my educations and go for the bridge year so that I could do the master year afterwards or start working. Seeing that I was 20 back then I chose for continuing my education and go for my master of science with a major in Computer Science at the University Of Ghent. I believed that this was key to evolving my theoretical thinking skills, and to be able to solve bigger problems than the ones we were taught in college. It would also provide me more opportunities with the ability to get promoted faster later on.

This all sounded like an easy task but there was just one more obstacle that I had to overcome, the bridge year. In Belgium we are able to upgrade our “professional bachelor” to an “academic bachelor” (professional being more practical oriented than the academic one). This program however has been known to be one of the most difficult years that we would encounter when studying (when looking back, I can say you that this is the truth). It was a year full of frustrations and studying without getting any satisfaction because the grades kept on sucking even with this much time being put into them.

The year started, and so did the first semester (we got 2 semester each being 12 weeks) with physics (2 semesters merged into 1), math A (also 2 semesters merged into 1), databases, C/C++ Programming, Discrete Math and Digital Electronics. The first 3 courses were a hell (to put it lightly), the speed was a killer and the amount of information to process was even worse. I remember the first test of math (which was an intro test to grade the initial knowledge) where I only scored 1 out of 20. Databases was one of the most underestimated courses, even while we saw this in College this course was a killer. We had to learn recursive queries and solve the most daunting tasks that you can think of. (Check my blog for more information, example: http://xaviergeerinck.com/recursion-with-sql/).

The semester ended and I finished my exams, here I passed Discrete math (I was amazed), C/C++ and Digital Electronics. Which was not all that great but it was well enough for where I came from.

Then we got the second semester with Math B, The Bachelor Project, Programming of hardware (mostly asm), Perl, Computer Networking, Computer Systems and Algorithms/Data Structures. The semester had no merged courses but was heavy of different courses. At the end I passed 3 exams again.

When august approached the daunting task came, passing my resit exams (I had 7 of them, Physics, Math A & B, Algorithms/Data Structures, Networking, Computer Systems and Databases). At the end I eventually passed 3 exams again so I was left with 4 courses.

We are now at the end of my year and I passed 9 courses of the 13 which is a wonder seeing that I came from a practical education and was going to a more theoretical oriented one. Especially algorithms surprised me, it was one of the hardest courses where I studied days and nights to pass it. Seeing that a lot of the students that we started with left through the year, or at the end because they passed almost no exams, I can say that I myself am happy with this result. The result also reflects how well I understood everything and I think that the teachers did their best to give an objective gradation on their courses.

Because of my good result I am now able to start my master's year. The plan is to get a decent to follow first semester (42 study points instead of 48) by moving 2 easier courses towards the next year (seeing that I still have to do my thesis anyway in that year) and start the initial fundamentals of my thesis in 2016’s second semester under the course “internship” where I am able to work for my thesis and let it count next year towards the hours worked. (I did this because the second semester is just 16 study points).

For other students reading this, if you plan to do a bridge year, then prepare yourself. You will not have an easy year and you will lose most of your social contacts through the year. However if you keep your head up and try to stay ahead of your courses then you will manage. (Always prepare before the lesson starts! that way you will be able to understand more and learn more from the lessons).
 


Bridge Year Experience - University Ghent


This summer, just after finishing my exams for my bridge year, I decided to do something else this summer. After thinking about it for a long time, I thought, why not instead of working at an already established company, work for a startup instead? This is when I started looking out for startups that were in need of a developer to create their Minimum Viable Product (MVP).

Luckily for me, the search process got simplified. Near me there is an initiative called Start it @kbc. This is a program that allows startups to build out their idea, by having access to free work-spaces, events, networking, education in the startup world, 1to1 coaching, ... while still having fun. I got in contact with someone from this initiative through a friend of mine, together with this contact I set-up a small ad in the newsletter that they send to startups in the initiative every week.

This ad appeared to be the "golden ticket" towards landing a job at a startup. Shortly after the newsletter was sent to the startups I started receiving tons of emails, with startups in need for a developer to build their MVP. Of course I was curious to every startup on it's own (remember that every idea is unique and tries to solve a specific problem), so I went through all the emails and contacted every startup that seemed interesting to me, stating that I wanted more information to see what their vision was. This (for me personally) was the first round of shifting through all the emails, and selecting the ones that I thought would be a perfect fit for me. I then set-up a meeting (mostly through Skype at this point) to talk with the founders and see what they had already, how they wanted to continue, what they had in mind for me, future plans, business model, .... On average, these meetings took 10 - 30 minutes depending on how interesting it was and how the founders their first impression was.

You would think that having a conversations with so many startups is a boring and long process, but I myself got a different view of this. It was fun meeting new people, hearing new ideas and seeing how passionate the founders were. I also got the chance of getting the perfect impression of the founders and to select the founders that I thought would be the perfect fit for me (if you can't stand the founders, then you will be having a bad time at the job).

In the end I picked a startup called KumulAid to be the "chosen one" where I wanted to spend my summer at. KumulAid wanted (and still wants) to be the donation platform that brings companies, donors and charities together, to help NGO’s to raise more funds at a lower cost.

They had worked out their idea in such a depth that I had never experienced before. Everything was perfectly documented and explained so that their vision was instantly reflected upon me. My main task was to translate their written documentation into a working experience in the form of a website.

From my experiences from other small jobs we decided it would be best to write a backlog (=every task that should be done) containing the Category, As a/an, I want to..., so that..., Notes, Priority, Status and Assignee ( all for me of course ;) ). After tuning this backlog for a proper fit for both parties we got to an agreement that would suit us both. I also created an ERD (counted in my work hours afterwards) showing how their database was going to look and if they agreed with it (ERD = Entity Relation Diagram). Now all that was left to do was to get the papers stating the work agreement, the "company rules" (required in Belgium) and the "NDA" signed. Signing these is something we did in person, since it was the chance for us to meet each other and see again if we would be a great fit to work together.

Then my work started, I started setting up the frameworks to use (On the back-end Hapi.js together with a MySQL database and for the front-end AngularJS). The designs were delivered by a third-party. Because of their perfect documentation and our perfect planning with the backlog and such, work progressed almost flawlessly. I was free to work anywhere and anytime I wanted as long as the work got done within the discussed time frame. So within 2 - 3 weeks I was done with the complete MVP (after doing some crazy hours ;) of course).

This is when the testing phase came, I let the KumulAid founders play around for a while and got them to note down everything that was not to their wishes / things that I might have forgotten. After which I got to work with this feedback and iterate the MVP to get the bugs out of it and get it in shape for a first release. We also did this in person to sit together and see exactly what they mean and how I was going to solve it.

I now launched their MVP onto a staging server (using Amazon AWS for the server and Deploybot for deploying the code to the staging server automatically so that they could see the progress) which marked the end of my work at KumulAid. (Or at least the expected end of my work ;) ).

Looking back I think I have made some excellent choices for handling this kind of job:

    Arranging the contract with the use of a Backlog and an ERD made me understand the job perfectly and also helped the founders to see exactly what was going to be done.
    Meeting in person for the last bug fixes was a perfect choice, we went over every point and got to an understanding of how it should look like, this also made the bond between me and the company stronger.
    Being able to get the courage to look for a job at a startup and applying through the startup initiative, this was something new and I did not regret this choice once.

Now we are more than 1 month further after the work has finished. Seeing at where I came from and where I am now, I have to say the road was crazy. After finishing the work at KumulAid we saw together and discussed what we would do further. We eventually came up with me joining the team as a co-founder to help KumulAid on their endeavor to success. Together we just recently came to pitch for a startup incubator called Telenet Kickstart were we now hope to get accepted to continue building our product.

You may also wonder in how far we are with releasing the first MVP? Well currently our deadline for release is October 2015. We will start in Belgium and The Netherlands but hope to expand one day to conquer the international market and also enable donors and companies  in developing countries to use the KumulAid platform.

This marks the end of my blog post and I would like to take these last few lines to thank everyone that helped me to achieve this awesome summer experience. First my friend Adri for getting me in contact with the Startup Initiative Start it @kbc whom I also would like to thank for all the help. Then the startups who have all sent me an email with a job offer to help them (specifically Salesflare, Rialto, ... for having a meeting with me :) ) and last but not least the biggest thanks goes to the founders of KumulAid who believed in me and trusted me to help them build their product.


 


Spending the summer at a Startup


## Why did we use this development environment?

![Feedient setup](https://lh3.googleusercontent.com/rqhNZ3cSvwBui8n7mCnhuK8vWcFo-D2vrWqRJ-7JFgw=s600 "docker-17-36-51-1.jpg")
One of the tasks when hiring a new developer is to get this developer completely set-up on his new development environment. Most of the time this task takes a lot of time resulting in a lost workday for the newly hired employee.

That is why we at Feedient are using a development environment that consists out of the following:

- [CoreOS](https://coreos.com) (A stripped Linux distribution that has the unneeded software removed that other Linux distributions have)
- [Docker](https://www.docker.com) (Container management tool that uses Linux LVM)
- [Vagrant](https://www.vagrantup.com/) (Virtual Machine manager, mostly used for development environments).

>*Other alternatives too this setup are possible by switching out the Linux distribution for a more popular one such as Ubuntu, CentOS, ... And changing the container management tool for a provisioner such as Chef, Puppet, Ansible, ...*

The advantages of using this development environment are

- Small initial setup time allowing the newly hired development too start developing within 10 minutes.
- Almost an exact clone of the production environment, this allows the developer too test changes that are not dependent on the OS.
- Docker has the advantage over Chef / Puppet / Ansible / ... that it is way faster and smaller.
- Separation of concerns, we keep the complete development environment on a VM so that the developer does not need to install unneeded software on their own machine.
- CoreOS ships Docker by default, which is one package less to install.

## Setting up the environment

### Installing the prerequisites for the developer

Every environment has prerequisites that have to be installed, we can not avoid this but we can keep it to a minimum. This is why a new developer only has to install the following when they come in:

- [VirtualBox](https://www.virtualbox.org/) (Virtualization Software)
- [Vagrant](https://www.vagrantup.com/)
- [Git](http://git-scm.com/) (Version Control System)

A way to remove these initial prerequisites is by pre-installing the software on the computer of the developer before they receive it.

### Preparing Vagrant to boot for the first time

As soon as we have downloaded the prerequisites we have to start vagrant. Vagrant uses a `Vagrantfile` which contains the specification of the Virtual Machine that is going to be created when we enter `vagrant up`.

We have created our own repository that a new developer has to clone with the use of git and then they can instantly start their vagrant machine which does the rest of the configuration.

For a basic Vagrantfile that will install CoreOS you can clone this repository: [https://github.com/coreos/coreos-vagrant](https://github.com/coreos/coreos-vagrant). We however used our own Folder structure described below.

### Our Vagrant Folder structure

We have created our own directory structure that will allow us to reuse most of the files that were used during installation.

```bash
Vagrant_CoreOS_Docker
│ README.md
│ Vagrantfile
│ install.sh
│
└───docker
├───ghost_demo
│ │ Dockerfile
│ │ start.bash
```

This folder structure shows that we hold the Vagrantfile and install.sh in our root directory. This Vagrantfile will be used when we enter `vagrant up` and will then setup the Virtual Machine with CoreOS. After this is done it will then run install.sh which in turn is going to install the ghost_demo Dockerfile.

The reason we chose for this setup is because this allows a couple of things:

- We can add more projects under the docker folder
- install.sh accepts 2 parameters __DockerfilePath__ and __ImageName__ allowing us to change the Dockerfile that is being installed.

#### Vagrantfile

```ruby
# -*- mode: ruby -*-
# # vi: set ft=ruby :

require 'fileutils'

Vagrant.require_version ">= 1.6.0"

CLOUD_CONFIG_PATH = File.join(File.dirname(__FILE__), "user-data")
CONFIG = File.join(File.dirname(__FILE__), "config.rb")

$update_channel = "alpha"
nodes = [
  {
    :name => 'ghostdemo',
    :config => 'ghostdemo',
    :ip => '172.17.8.2',
    :box => "coreos-%s" % $update_channel,
    :url => "http://%s.release.core-os.net/amd64-usr/current/coreos_production_vagrant.json" % $update_channel,
    :version => ">= 308.0.1",
    :ram => 1024,
    :cpus => 1,
    :gui => false
  }
]
```

# Defaults for config options defined in CONFIG

```ruby
$update_channel = "alpha"
$enable_serial_logging = false

Vagrant.configure("2") do |config|
  nodes.each do |node|
    config.vm.define node[:name] do |node_config|
      nfs_setting = RUBY_PLATFORM =~ /darwin/ || RUBY_PLATFORM =~ /linux/

      # IF NO NFS: node_config.vm.synced_folder "www", "/var/www"
      #node_config.vm.synced_folder "www", "/var/www", :nfs => true, :mount_options => ['nolock,vers=3,udp']
      node_config.vm.synced_folder ".", "/home/core/share", id: "core", :nfs => true, :mount_options => ['nolock,vers=3,udp']

      # Configure Machine details
      node_config.vm.box = node[:box]
      node_config.vm.box_url = node[:url]
      node_config.vm.box_version = node[:version]
      node_config.vm.hostname = node[:name]

      # Private network
      config.ssh.forward_agent = true
      node_config.vm.network :private_network, ip: node[:ip]

      # Forwards ports 60000 - 60010
      (60000..6010).each do |port|
        config.vm.network :forwarded_port, :host => port, :guest => port
      end

      # User data
      if File.exist?(CLOUD_CONFIG_PATH)
        config.vm.provision :file, :source => "#{CLOUD_CONFIG_PATH}", :destination => "/tmp/vagrantfile-user-data"
        config.vm.provision :shell, :inline => "mv /tmp/vagrantfile-user-data /var/lib/coreos-vagrant/", :privileged => true
      end

      config.vm.provider :virtualbox do |v|
        # On VirtualBox, we don't have guest additions or a functional vboxsf
        # in CoreOS, so tell Vagrant that so it can be smarter.
        v.check_guest_additions = false
        v.functional_vboxsf = false
      end

      # plugin conflict
      if Vagrant.has_plugin?("vagrant-vbguest") then
        config.vbguest.auto_update = false
      end

      # Serial logging
      if $enable_serial_logging
        logdir = File.join(File.dirname(__FILE__), "log")
        FileUtils.mkdir_p(logdir)

        serialFile = File.join(logdir, "%s-serial.txt" % vm_name)
        FileUtils.touch(serialFile)

        config.vm.provider :vmware_fusion do |v, override|
        v.vmx["serial0.present"] = "TRUE"
        v.vmx["serial0.fileType"] = "file"
        v.vmx["serial0.fileName"] = serialFile
        v.vmx["serial0.tryNoRxLoss"] = "FALSE"
      end

      config.vm.provider :virtualbox do |vb, override|
        vb.customize ["modifyvm", :id, "--uart1", "0x3F8", "4"]
        vb.customize ["modifyvm", :id, "--uartmode1", serialFile]
      end
    end

    # Forward docker tcp
    if $expose_docker_tcp
      config.vm.network "forwarded_port", guest: 2375, host: ($expose_docker_tcp + i - 1), auto_correct: true
    end

    # Run our ghost container and mount it on port 4000 + sync folders.
    node_config.vm.provision :shell, :inline => "sh /vagrant/install.sh docker/ghost_demo/ ghost_demo 60000:2368"
    end
  end
end
```

#### install.sh

```bash
#!/bin/bash
#============================================================
# FILE: install.sh
# USAGE: ./install.sh sitename
# DESCRIPTION: This script will install the site with the given configuration
#
# OPTIONS: $1 The path to the Dockerfile (Using this project as root)
# OPTIONS: $2 The Imagename for the installed DockerContainer
# OPTIONS: $3 The Ports to be forwarded afterwards
# REQUIREMENTS: /
# AUTHOR: Xavier Geerinck (thebillkidy@gmail.com)
# COMPANY: Feedient
# VERSION: 1.1.0
# CREATED: 18/08/13 20:12:38 CET
# REVISION: ---
#============================================================
# Config parameters
docker_binary=/usr/bin/docker

# Check parameters (We need the dockerpath too install + name for the image)
if [ -z "$1" -o -z "$2" -o -z "$3" ]; then
  echo "Usage: `basename $0` "
  echo "Example: `basename $0` docker/ghost_demo/ ghost_demo"
  echo "Info: The DockerfilePath is the path from this as root to the directory where the Dockerfile is located"

  exit 0
fi

# If chef is not installed then install it
echo "Checking if Docker is installed..."
if ! test -f "$docker_binary"; then
  echo "Downloading and installing docker"

  # Update binaries
  sudo apt-get update

  # Install wget & ca-certificates
  sudo apt-get install -y wget ca-certificates docker.io

  # Link and fix paths
  ln -sf /usr/bin/docker.io /usr/local/bin/docker
  sed -i '$acomplete -F _docker docker' /etc/bash_completion.d/docker.io

  # Start Docker on server boot
  update-rc.d docker.io defaults
else
  echo "Docker is already installed"
fi

echo "Running docker"
cd /home/core/share/$1 && \
echo "Building the docker image from the dockerfile located at: /home/core/share/"$1 && \
docker build -t "$2" . && \
echo "Starting up the docker container: $2" && \
docker run -d -p $3 "ghost_demo"

echo "Done"
exit 0
```

#### Dockerfile

```bash
#
# Ghost Dockerfile
#
# https://github.com/dockerfile/ghost
#

# Pull base image.
FROM dockerfile/nodejs

# Install Ghost
RUN \
cd /tmp && \
wget https://ghost.org/zip/ghost-latest.zip && \
unzip ghost-latest.zip -d /ghost && \
rm -f ghost-latest.zip && \
cd /ghost && \
npm install --production && \
sed 's/127.0.0.1/0.0.0.0/' /ghost/config.example.js > /ghost/config.js && \
useradd ghost --home /ghost

# Add files.
ADD start.bash /ghost-start

# Set environment variables.
ENV NODE_ENV production

# Define mountable directories.
VOLUME ["/data", "/ghost-override"]

# Define working directory.
WORKDIR /ghost

# Define default command.
CMD ["bash", "/ghost-start"]

# Expose ports.
EXPOSE 2368
```

#### start.bash

```bash
#!/bin/bash

GHOST="/ghost"
OVERRIDE="/ghost-override"

CONFIG="config.js"
DATA="content/data"
IMAGES="content/images"
THEMES="content/themes"

cd "$GHOST"

# Symlink data directory.
mkdir -p "$OVERRIDE/$DATA"
rm -fr "$DATA"
ln -s "$OVERRIDE/$DATA" "content"

# Symlink images directory
mkdir -p "$OVERRIDE/$IMAGES"
rm -fr "$IMAGES"
ln -s "$OVERRIDE/$IMAGES" "$IMAGES"

# Symlink config file.
if [[ -f "$OVERRIDE/$CONFIG" ]]; then
  rm -f "$CONFIG"
  ln -s "$OVERRIDE/$CONFIG" "$CONFIG"
fi

# Symlink themes.
if [[ -d "$OVERRIDE/$THEMES" ]]; then
  for theme in $(find "$OVERRIDE/$THEMES" -mindepth 1 -maxdepth 1 -type d -exec basename {} \;)
  do
    rm -fr "$THEMES/$theme"
    ln -s "$OVERRIDE/$THEMES/$theme" "$THEMES/$theme"
  done
fi

# Start Ghost
chown -R ghost:ghost /data /ghost /ghost-override
su ghost << EOF cd "$GHOST" NODE_ENV=${NODE_ENV:-production} npm start EOF 
``` 

### Booting Vagrant 
After you have created your Vagrantfile and the other files. (or used the one of the repository above) you can then start your vagrant machine which will create the VirtualMachine and start it. This can be done by navigating to the directory that holds the Vagrantfile and then entering the command: `vagrant up`. This will now show something as shown below: 

> *__Note:__ This will not work on Windows since NFS is not supported on Windows. We however heard of a workaround called `cygwin rsync` but have not specific details about this.*
>
> *__Note2:__ When you used the repository above you will have a different output then shown below. You also will not have the ghost blog installed automatically.*

```bash
$ vagrant up
Bringing machine 'core-01' up with 'virtualbox' provider...
==> core-01: Box 'coreos-alpha' could not be found. Attempting to find and install...
core-01: Box Provider: virtualbox
core-01: Box Version: >= 308.0.1
==> core-01: Loading metadata for box 'http://alpha.release.core-os.net/amd64-usr/current/coreos_production_vagrant.json'
core-01: URL: http://alpha.release.core-os.net/amd64-usr/current/coreos_production_vagrant.json
==> core-01: Adding box 'coreos-alpha' (v431.0.0) for provider: virtualbox
core-01: Downloading: http://alpha.release.core-os.net/amd64-usr/431.0.0/coreos_production_vagrant.box
core-01: Calculating and comparing box checksum...
==> core-01: Successfully added box 'coreos-alpha' (v431.0.0) for 'virtualbox'!
==> ghostdemo: Importing base box 'coreos-alpha'...
==> ghostdemo: Matching MAC address for NAT networking...
==> ghostdemo: Checking if box 'coreos-alpha' is up to date...
==> ghostdemo: Setting the name of the VM: Vagrant_CoreOS_Docker_ghostdemo_1410250017479_38606
==> ghostdemo: Clearing any previously set network interfaces...
==> ghostdemo: Preparing network interfaces based on configuration...
ghostdemo: Adapter 1: nat
ghostdemo: Adapter 2: hostonly
==> ghostdemo: Forwarding ports...
ghostdemo: 22 => 2222 (adapter 1)
==> ghostdemo: Running 'pre-boot' VM customizations...
==> ghostdemo: Booting VM...
==> ghostdemo: Waiting for machine to boot. This may take a few minutes...
ghostdemo: SSH address: 127.0.0.1:2222
ghostdemo: SSH username: core
ghostdemo: SSH auth method: private key
ghostdemo: Warning: Connection timeout. Retrying...
==> ghostdemo: Machine booted and ready!
==> ghostdemo: Setting hostname...
==> ghostdemo: Configuring and enabling network interfaces...
==> ghostdemo: Exporting NFS shared folders...
==> ghostdemo: Preparing to edit /etc/exports. Administrator privileges will be required...
==> ghostdemo: Mounting NFS shared folders...
==> ghostdemo: Running provisioner: shell...
ghostdemo: Running: inline script
==> ghostdemo: Checking if Docker is installed...
==> ghostdemo: Docker is already installed
==> ghostdemo: Running docker
==> ghostdemo: Building the docker image from the dockerfile located at: /home/core/share/docker/ghost_demo/
==> ghostdemo: Sending build context to Docker daemon 4.608 kB
==> ghostdemo: Sending build context to Docker daemon
==> ghostdemo: Step 0 : FROM dockerfile/nodejs
==> ghostdemo: Pulling repository dockerfile/nodejs
==> ghostdemo: ---> 42558db32e73
==> ghostdemo: Step 1 : RUN cd /tmp && wget https://ghost.org/zip/ghost-latest.zip && unzip ghost-latest.zip -d /ghost && rm -f ghost-latest.zip && cd /ghost && npm install --production && sed 's/127.0.0.1/0.0.0.0/' /ghost/config.example.js > /ghost/config.js && useradd ghost --home /ghost
==> ghostdemo: ---> Running in 8dc4b656ac97
******************************** OUTPUT STRIPPED ********************************
==> ghostdemo: Removing intermediate container 8dc4b656ac97
==> ghostdemo: Step 2 : ADD start.bash /ghost-start
==> ghostdemo: ---> dd80e21aeb25
==> ghostdemo: Removing intermediate container ffc3f4127ca7
==> ghostdemo: Step 3 : ENV NODE_ENV production
==> ghostdemo: ---> Running in 785e2484b64f
==> ghostdemo: ---> 85043cda1ff3
==> ghostdemo: Removing intermediate container 785e2484b64f
==> ghostdemo: Step 4 : VOLUME ["/data", "/ghost-override"]
==> ghostdemo: ---> Running in 64cfe35fda23
==> ghostdemo: ---> fda26d5e7d2c
==> ghostdemo: Removing intermediate container 64cfe35fda23
==> ghostdemo: Step 5 : WORKDIR /ghost
==> ghostdemo: ---> Running in 588c6a347797
==> ghostdemo: ---> 105882ff6ed5
==> ghostdemo: Removing intermediate container 588c6a347797
==> ghostdemo: Step 6 : CMD ["bash", "/ghost-start"]
==> ghostdemo: ---> Running in 31b4e4d77f43
==> ghostdemo: ---> 48cdcfec4b71
==> ghostdemo: Removing intermediate container 31b4e4d77f43
==> ghostdemo: Step 7 : EXPOSE 2368
==> ghostdemo: ---> Running in b0bd604e832f
==> ghostdemo: ---> fd0825542e80
==> ghostdemo: Removing intermediate container b0bd604e832f
==> ghostdemo: Successfully built fd0825542e80
==> ghostdemo: Starting up the docker container: ghost_demo
==> ghostdemo: 6cfa46c230d4ffe2c9edf0aa6b21e1cb151e505fea6e5eab279cbbf9d3d0a6b9
==> ghostdemo: Done
```

After it echoed 'done' you will be able to ssh to the machine by entering the command: `vagrant ssh`. Which will greet you with the home directory and the nice welcoming message.

> *__Note:__ If you have multiple vagrant machines running you need to enter the command `vagrant ssh `. You can view the machines running by entering `vagrant status`.*

```bash
CoreOS (alpha)
core@core-01 ~ $
```

You will also be able to go to your newly created Ghost blog by navigating too: `172.17.8.2:60000`

## Conclusion

Setting up Vagrant, CoreOS and Docker is a lot of initial work that has to be done by the System Admin. However once it has been done you can store it on a central Git repository, allowing every other developer to set up it's development environment in less then 20 minutes.


Feedients Development Environment


When we are working with systems that do not support special cases then we need to simulate. That is why it is handy to create different simulations of already existing solutions.

In this case we will create a solution that is going to replicate the mkdir -p command in bash.

The code for this is pretty straightforward:

```bash
# Simulate mkdir -p
ABSOLUTE_PATH=0

if [[ ${1:0:1} == "/" ]];
then
  ABSOLUTE_PATH=1
fi

echo "Path: ${ABSOLUTE_PATH}"

# If absolute, cd to /
if [[ $ABSOLUTE_PATH == 1 ]];
then
  cd /
fi

# Start processing the path creation
IFS='/' read -ra dir <<< $1
for i in "${dir[@]}"; do
  # If empty, skip
  if [[ $i == "" ]];
  then
    continue
  fi

  # Determine if dir exists, if not create it
  if [[ ! -d $i ]];
  then
    mkdir "$i"
  fi

  # Descend into the new dir
  cd "$i"
done
```

We can now call this program by executing:

```bash
./program relativepath/1/2/3/4
./program /absolutepath/1/2/3/4
```


Simulating mkdir -p in bash


The goal of this exercise is to create a program that generates a table with random elements in it. Once we created this table we have to start 2 threads. 1 thread will find the biggest number and the other will find the smallest number. We will then send this to a result and print these 2 numbers.

We start building this by looking up the manual for creating and joining threads (`man 3 pthread_create` and `man 3 pthread_join`). For those not familiar with thread joining, we do this to ensure that the thread has exited. When we have done this we found that creating and joining pthreads is done by these lines:

```c
int pthread_create(pthread_t *thread, const pthread_attr_t *attr,
void *(*start_routine) (void *), void *arg);
int pthread_join(pthread_t thread, void **retval);
```

> On the end of the pthread_create we see that we need to enter void *arg to pass arguments. This means we can only pass 1 argument so we will need to use structs if we want to pass more arguments.

We now create and join the threads with this piece of code:

```c
void *thread1_result;
void *thread2_result;

pthread_t threads[2];

pthread_create(&threads[0], NULL, &find_smallest, &args);
pthread_create(&threads[1], NULL, &find_biggest, &args);

pthread_join(threads[0], &thread1_result);
pthread_join(threads[1], &thread2_result);

double smallest = *(double *)thread1_result;
double biggest = *(double *)thread2_result;
```

Note that I created a pthread_t array variable first, I did this to pass a thread id with the pthread_create function. The `&find_smallest` and `&find_biggest` functions are going to call the `void *find_smallest(void *args)` and `void *find_biggest(void *args)` functions that we can implement.

For the args I created a structure that contains the numbers and the number count. I then pass this structure by reference to the pthread_create function so that I am able to fetch this structure in my implementation methods. (see *args).

Now I just have to print everything and I get the following result:

```c
#include // pthread_join, pthread_create (compile and link with -pthread)
#include // rand, srand
#include // time
#include // cout, endl
#include // printf

#define ELEMENT_COUNT 1000000

typedef struct arguments {
  double* numbers;
  int number_count;
} arguments;

void* find_smallest(void *args) {
  arguments *a = (arguments*) args;

  double *smallest = (double *)malloc(sizeof(double));
  *smallest = a->numbers[0];

  for (int i = 1; i < a->number_count; i++) {
    if (*smallest > a->numbers[i]) {
      *smallest = a->numbers[i];
    }
  }

  return smallest;
}

void* find_biggest(void *args) {
  arguments *a = (arguments*) args;

  double *biggest = (double *)malloc(sizeof(double));
  *biggest = a->numbers[0];

  for (int i = 1; i < a->number_count; i++) {
    if (*biggest < a->numbers[i]) {
      *biggest = a->numbers[i];
    }
  }

  return biggest;
}

int main(int argc, char** argv) {
  srand(time(0));

  arguments args;

  args.numbers = (double *)malloc(sizeof(double) * ELEMENT_COUNT);
  args.number_count = ELEMENT_COUNT;

  for (int i = 0; i < ELEMENT_COUNT; i++) {
    *(args.numbers + i) = rand();
  }

  // create threads for finding the biggest and the smallest number
  void *thread1_result;
  void *thread2_result;

  pthread_t threads[2];

  pthread_create(&threads[0], NULL, &find_smallest, &args);
  pthread_create(&threads[1], NULL, &find_biggest, &args);

  pthread_join(threads[0], &thread1_result);
  pthread_join(threads[1], &thread2_result);

  double smallest = *(double *)thread1_result;
  double biggest = *(double *)thread2_result;

  printf("Biggest: %fn", biggest);
  printf("Smallest: %fn", smallest);
  std::cout << "Done" << std::endl;

  free(thread1_result);
  free(thread2_result);
  free(args.numbers);

  return 0;
}
```


Finding smallest and biggest number multithreaded in C++


A friend of mine had just gotten the question to find every combination for a given array in [1, 2, 3].
When analyzing this question I found out that this is actually a simple permutation that has to be generated with the use of Javascript. Lucky for me we had just had the course Discrete math in school so we saw some algorithms that could do this. The algorithm that I used for this is **Heap's algorithm**.

## Heap's Algorithm

Heaps algorithm is an algorithm that computes every single permutation of a given set of elements. The algorithm is basically going to swap elements based on the iteration k we are in for the current size n. If this iteration k is even then we will swap the kth element with the last element, and else we will swap the last element with the first element.

For more details about this algorithm please check Robert Sedgewick's book.

## Javascript

Programming this in Javascript can be done by following the pseudocode that we can find on sites such as wikipedia or just following the details given in Robert Sedgewick's book.

### Pseudocode

```
generate (n, arr)
if n = 1
  output arr
else
  for i = 0; i < n; i += 1
    generate (n - 1, arr)

if n is even
  swap(arr[i], arr[n - 1])
else
  swap(arr[0], arr[n - 1])
```

### Javascript

```javascript
// Purpose is to create every permutation from the elements in the array
// We can do this by using Heap's algorithm
var start = [1, 2, 3];

// Get the permutations
generate(start.length, start);

// Generate the permutation for a given n (amount of elements) and a given array
function generate(n, arr) {
  // If only 1 element, just output the array
  if (n == 1) {
    console.log(arr);
    return;
  }

  for (var i = 0; i < n; i+= 1) {
    generate(n - 1, arr);

    // If n is even
    if (n % 2 == 0) {
      swap(arr, i, n - 1);
    } else {
      swap(arr, 0, n - 1);
    }
  }
}

function swap(arr, idxA, idxB) {
  var tmp = arr[idxA];
  arr[idxA] = arr[idxB];
  arr[idxB] = tmp;
}
```

### Output
for the array [1, 2, 3] as used in the solution I get the following solution.

```
[2, 3, 1]
[3, 2, 1]
[1, 2, 3]
[2, 1, 3]
[3, 1, 2]
[1, 3, 2]
[2, 3, 1]
[3, 2, 1]
```
