This tutorial will give you a quick start example to follow along to, and help you build a barebones React chat application with Horizon.io.

source code for this can be found at: https://github.com/mickberber/reChat under the ‘tutorial’ branch

Recently, Speaking with a friend of mine about Angular 2, he was amazed at the command line tool it provides, like the ember cli, generates a ready to go application, test files, server and the whole kit and kaboodle(…somebody check my spelling on that). This is a wonderful development for the JS world. A quick script puts together your application and your ready to go write front end code basically right away! A little while later I heard about Horizon built by the guys behind RethinkDB and how it has a similar quick start command line feature. Horizon is a real-time server for web apps, sitting on top of Rethink. Having built a couple of real-time applications recently my ears perked up straight away. Rethink is meant for applications that leverage web sockets to transfer data quickly and provide an enjoyable real time experience for users while being easier for engineers to set up. It requires installing Rethink(can be done here), an open source database meant for real time web applications(like chat). I got a little interested in these tools and decided to give it a go!

First things first, lets go Horizioning.

npm install -g horizon

This downloads the horizon CLI and the next command will generate a directory and some files for our application.

##initialize application hz init [app name] ##cd into directory cd [app name] ##initialize package.json (hit enter through all options, they don't need special values) npm init ## OPTIONAL init git if desired git init

hz init will generate these files in the output

For this case we will use the name Rechat! React, Rethinkdb, Rechat. Makes the sense to me. For this tutorial we don’t need to touch the .hz/config.toml file, as Horizon sets up our server connection to the database for us and listens on localhost://8181, but we can take a quick look to see what it is actually doing.(More on toml here)

We can see here the local host connection being set up

As well as the port to the rethinkdb connection

In the Horizon documentation, it tells us that everything in our dist file will be served to the browser on GET requests. This will give us our landing spot for our bundle file that Webpack provides.

Extra reference on the Horizon command line tool:

Webpack it up

Here, we’ll install all of our necessary packages from npm to our package.json, and create our React files. Now, I will caution. This is ALOT of packages to install at once, but thats okay, most of them are for Babel to process our ES6 into ES5. This might feel a little bloated, but recently https://babeljs.io/ released Babel 6.0.0, which changed the process of setting up Webpack. If you experience any issues with an old version of Babel breaking this set up, I suggest reading about fixing that here.

npm install --save react react-dom webpack babel-core babel-polyfill babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-preset-react mkdir src/components

touch src/index.jsx

touch src/components/app.jsx

This will be our connection from React, to our DOM node, this is accomplished with the ReactDOM.render method. This method will take in a React component, and query the DOM for a tag with the class of ‘attach’ on it:

index.jsx

app.jsx

We’ll also need to alter our existing dist/index.html file by replacing the <marquee> tag with a div that has a class=’attach’ on it, and adding our bundle script:

dist/index.html

Now everything is set up to get our components bundled and attached to the DOM. Webpack will be our build system to accomplish this. We’re gonna need to make a couple more files:

touch babel.rc

touch webpack.config.js

The babel.rc file will help configure how your Webpack transforms our .jsx and ES6. I could go into way more depth here, but this does it way better than I ever could.

babel.rc should contain:

{

“presets”: [“es2015”, “react”, “stage-0”]

}

webpack.config.js

The important parts of this file can be broken down into three parts. The ‘entry’, ‘output’ and the module.loaders/resolve sections.

The entry is the file which Webpack will begin bundling the modules that contain our components.

The output is where our bundle file will be created.(it can be called anything, but bundle is used as a best practice)

Module.loaders/resolve is where Babel does it’s work. Resolve is for the file extensions to identify and change. The loaders are specifying how Babel will transform everything.

At this point, we can run the Horizon dev server:

hz serve --dev

And run Webpack:

webpack --watch --progress --colors

Note: I usually have 3 tabs in my terminal, 2 running the above processes and another for every other command I may need to run.

Extra Reference for Webpack:

At this point, we can navigate to http://localhost:8181 and see this:

Pretty quick huh?