Helium.js

Making your React application lighter! 🎈

Helium.js is a node package that helps make your React application isomorphic and optimized.

• Currently: Includes server side rendering with support for React Router v4 and Redux v3
• Coming Soon: Optimization for webpack bundles

Prerequisites

You will need to have react/react-dom and the babel-cli installed as dependencies.

$ npm install react react-dom babel-cli --save

Installation

$ npm install helium.js --save

Usage

Hydrating on Client Side

/* Replace render with helium method
inside the index file of React application */

import helium from 'helium.js/react';

helium(
  <BrowserRouter>
    <App/>
  </BrowserRouter>, 
  'root' 
);

(with Redux)

/* Replace render with helium method
inside the index file of React application */

import helium, { getStore } from 'helium.js/react';

helium(
  <Provider store={getStore(reducer)}>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </Provider>, 
  'root' 
);

(with Redux and Middlewares)

/* Replace render with helium method
inside the index file of React application.
Declare your middlewares as usual and pass 
in as a second parameter to getStore invocation */

import helium, { getStore } from 'helium.js/react';

// declare your middlewares

helium(
  <Provider store={getStore(reducer, middleware)}>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </Provider>, 
  'root' 
);

Rendering on Server Side

Option 1: Automation with CLI

Have your server file automatically generated by answering questions using our cli.

To start up the cli, do one of the following:

* Type this command directly into your terminal

$ ./node_modules/.bin/he

* Add a script to your package.json and run the script

"scripts": {
  "start-helium-server": "./node_modules/.bin/he",
},

$ npm run he

* Install globally

$ npm i -g helium.js
$ he

Option 2: Do it Yourself

/* Include this in your server file 
(the file in which you initialize your 
express application) */

// import your root component
import App from './src/components/App.js';
const helium = require('helium.js');

// initialize your express application here

helium.init({
  // indicate the path to your main html file
  html: 'index.html',
  // specify the id to which your React application will be mounted on
  id: 'root',
  App,
});

// input api routes here

app.get('*', helium.serve);

(with Redux)

/* Include this in your server file 
(the file in which you initialize your 
express application) */

// import your root component and your reducer
import App from './src/components/App.js';
import reducer from './src/reducers';
const helium = require('helium.js');

// initialize your express application here

helium.init({
  // indicate the path to your main html file
  html: 'index.html',
  // specify the id to which your React application will be mounted on
  id: 'root',
  App,
  reducer,
});

// input api routes here

app.get('*', helium.serveRedux);

Running Your Application

If cli was not used, be sure to add a script to your package.json.

"scripts": {
    "start-helium-server": "./node_modules/.bin/webpack && babel-node HeliumServer.js",
},

# To run your application, type the following into your terminal
$ npm run start-helium-server

Contributing

If you would like to contribute, submit a pull request and update the README.md with details of changes.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Shachy Rivas - shachyjr
• Chris Li - cli53
• Julie Moon - juliemoon

License

This project is licensed under the MIT License - see the LICENSE.md file for details