Docs

Getting Started

Before we begin, make sure to read what orkan.js is. also, we assume you are familiar with React.js and have already created a Firebase account.

Prerequisites

  • React.js v16.0 +
  • Mobx v4.0 +
  • Firebase js SDK v4.5.0+

Hello World

Before we begin with the code, lets make sure we install out dependencies

with yarn:

yarn add react react-dom mobx firebase orkan 

with npm:

npm install --save react react-dom mobx firebase orkan 

Next, lets write a simple React app

import React, {PureComponent} from 'react';
import ReactDOM from 'react-dom';

class App extends PureComponent {
   render() {
	  return (
		 <div>
			 Hello World
		 </div>
	  );
   }
}

ReactDOM.render(
	<App/>,
	document.getElementById('root')
);

Finally lets integrate Orkan.js.

First, we need to import the Orkan Provider and the Value components. also, let's paste the configuration object we received from Firebase:

import {Provider, Value} from 'orkan';

const firebaseConfig = {
	apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
	authDomain: "xxxxxxxxxxxxxxxx.firebaseapp.com",
	databaseURL: "https://xxxxxxxxxx.firebaseio.com",
	projectId: "xxxxxxxxxxxxxx",
	storageBucket: "xxxxxxxxxxxxx.appspot.com",
	messagingSenderId: "00000000000000"
};

next, we wrap our App with the Provider

ReactDOM.render(
	<Provider firebaseConfig={firebaseConfig}>
		<App/>
	</Provider>,
	document.getElementById('root')
);

and replace that hard coded greeting with something dynamic

class App extends React.Component {
   render() {
	  return (
		 <div>
			 <Value path='objects/home/greeting'/>
		 </div>
	  );
   }
}

and all together:

import React, {PureComponent} from 'react';
import ReactDOM from 'react-dom';
import {Provider, Value} from 'orkan';

const firebaseConfig = {
	apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
	authDomain: "xxxxxxxxxxxxxxxx.firebaseapp.com",
	databaseURL: "https://xxxxxxxxxx.firebaseio.com",
	projectId: "xxxxxxxxxxxxxx",
	storageBucket: "xxxxxxxxxxxxx.appspot.com",
	messagingSenderId: "00000000000000"
};

class App extends React.Component {
   render() {
	  return (
		 <div>
			 <Value path='objects/home/greeting'/>
		 </div>
	  );
   }
}

ReactDOM.render(
	<Provider firebaseConfig={firebaseConfig}>
		<App/>
	</Provider>,
	document.getElementById('root')
);

Done!

Next - Setup the admin.