# Integrating Rubix in existing project

Rubix is available as an NPM module at @sketchpixy/rubix.

Integrating Rubix into your existing project requires a few more steps than just running npm install. We will explain the procedure in the form of a tutorial here:

For this tutorial we will make use of a simple starter-kit. Once such kit is Create React App which was open-sourced by Facebook. It is quite simple and easy to setup so we can focus on the actual Rubix integration rather than creating build configurations.

First, install Create React App. To do so, run the following command in your terminal/command prompt (use sudo if necessary):

$ npm install -g create-react-app

Then, let's create our "hello-world" React project:

$ create-react-app hello-world

This will take a while as npm installs the transitive dependencies, but once it’s done, you will see a list of commands you can run in the created folder.

Change the working directory to your newly created "hello-world" project:

$ cd hello-world

Then install Rubix NPM module like so:

$ npm install --save @sketchpixy/rubix

Install node-sass and bless (we will be using this for compiling SASS files)

$ npm install --save node-sass bless@3.0.3

Copy the contents of the rubix/custom-project directory to the root of hello-world project. The rubix/custom-project directory contains a public folder which includes necessary image files and fonts required by Rubix (also included are some optional javascript files like: Rubix charts, jQuery, perfectScrollbar etc), a sass folder that contains scss files that are required by Rubix for styles, an index.html and some settings files for bower (bower.json and .bowerrc).

Now edit your package.json file and add the following highlighted line within the "scripts" block:


  "scripts": {
    // ...some lines omitted...
    "sass": "node-sass --include-path ./node_modules --include-path ./public sass/main.scss src/main.css && blessc -f src/main.css"
  },

The above line compiles main.sass file found within the sass folder and then runs the bless compiler on it to make it suitable for use with IE9. To know more about bless and why it is necessary visit this website: http://blesscss.com.

Change the image and icon paths in sass/_variables.scss file to point to the public directory (public directory in this starter-kit is not the root. You should set the path according to your starter-kits root):


$img-path: '/public/imgs/common';
$font-path: '/public/fonts';

This completes the integration.

To test it out quickly, add the following code to your src/App.js file (Rubix code is highlighted):


import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import './main.css';
import { Button } from '@sketchpixy/rubix';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header" style={{ height: 170 }}>
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <p>
          Adding some Rubix related code:
        </p>
        <div>
          <div><Button bsStyle='green'>Green Button!</Button></div>
          <div><Button bsStyle='red'>Red Button!</Button></div>
          <div><Button bsStyle='blue' outlined>Blue Button!</Button></div>
        </div>
      </div>
    );
  }
}

export default App;

Then, just run the following command to compile your sass/main.scss stylesheet:

$ npm run sass -s

Once you have done that, start your server like so:

$ npm start -s

When you visit http://localhost:3000 you should see 3 buttons (one green, one red and another outlined blue).